ICON ĐẸP CHO WEB/BLOG

Icon là thành phần không thể thiếu trên Web/Blog, ngoài việc trang trí thêm đẹp, các bạn cũng có thể dùng Icon để minh hoạ cho bài viết...

Hiện nay, bạn có thể dễ dàng tải Icon từ một số trang dịch vụ trực tuyến, các Icon trên dunghennessy thường được tải ở một trang dịch vụ này. Mời các bạn xem vài mẫu phía dưới.

Còn hàng ngàn Icon đẹp đang chờ bạn khám phá....

Chúc các bạn có Icon đẹp cho blog của mình

Xem và tải Icon

▀▄▀▄▀▄ dunghennessy.blogspot.com ▄▀▄▀▄▀

MENU NGANG CÓ LOGO PHÍA TRƯỚC

Cũng giống các menu ngang khác, các tab ở menu này sẽ đổi màu khi bạn rê chuột và sẽ dẫn bạn đến một trang Web/blog nào đó khi bạn bấm vào "nó".

Đặc biệt hơn, trước mỗi tab bạn có thể gắn Logo bất kỳ để minh hoạ cho tiêu đề mà mình gắn trên menu.
Bạn bấm vào "Xem thử" phía dưới để thấy rõ hơn hiệu ứng của menu này.

Xem thử

Thủ thuật này cũng khá đơn giản, bạn chỉ việc đăng nhập vào Blog > Chọn thiết kế > Thêm tiện ích HTML (đối với các bạn đang sử dụng giao diện blog mới thì bạn đăng nhập vào Blog > Chọn Bố cục > Thêm tiện ích HTML) rồi dán code phía dưới vào.

<style type="text/css">

.shadowblockmenu{
font-weight: bold;
font-size: 85%;
width: 100%;
}

.shadowblockmenu ul{
border: 1px solid #BBB;
border-width: 3px 0; /* Show only top and bottom border for main menu container */
padding: 0;
margin: 0;
overflow: hidden;
}

.shadowblockmenu ul li{
display: inline;
margin:0;
padding:0;
}

.shadowblockmenu ul li a{
display:block;
float:left;
text-transform: uppercase;
color: #494949;
padding: 8px 15px 8px 9px;
margin: 0;
text-decoration: none;
border-right: 1px solid #BBB; /*right border between menu items*/
-moz-box-shadow: inset -7px 0 10px rgba(114,114,114, 0.4); /* Add inset shadow to each menu item. First 3 values in (114,114,114, 0.4) specifies rgb values, last specifies opacity */
-webkit-box-shadow: inset -7px 0 10px rgba(114,114,114, 0.4);
box-shadow: inset -7px 0 10px rgba(114,114,114, 0.4);
text-shadow: 0 -1px 1px #cfcfcf; /* CSS text shadow to give text some depth */
-moz-transition: all 0.2s ease-in-out; /* Enable CSS transition between property changes */
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}


.shadowblockmenu li:nth-of-type(1) a{ /* Extra style for first menu link */
border-left: 1px solid #BBB; /* add border to left side of first menu link */
padding-left:25px;
background: url(Link ảnh của Logo) 1px center no-repeat; /* Link ảnh của logo */
}

.shadowblockmenu li:nth-of-type(2) a{ /* Extra style for 2nd menu link */
padding-left:25px;
background: url(Link ảnh của Logo) 1px center no-repeat; /* Link ảnh của logo */
}

.shadowblockmenu li:nth-of-type(3) a{ /* Extra style for 2nd menu link */
padding-left:25px;
background: url(Link ảnh của Logo) 1px center no-repeat; /* Link ảnh của logo */
}

.shadowblockmenu li:nth-of-type(4) a{ /* Extra style for 2nd menu link */
padding-left:25px;
background: url(Link ảnh của Logo) 1px center no-repeat; /* Link ảnh của logo */
}

.shadowblockmenu li:nth-of-type(5) a{ /* Extra style for 2nd menu link */
padding-left:25px;
background: url(Link ảnh của Logo) 1px center no-repeat; /* Link ảnh của logo */
}

.shadowblockmenu li:nth-of-type(6) a{ /* Extra style for 2nd menu link */
padding-left:25px;
background: url(Link ảnh của Logo) 1px center no-repeat; /* Link ảnh của logo */
}

.shadowblockmenu ul li a:hover{
color: black;
-moz-box-shadow: inset -7px 0 10px rgba(60,162,221, 0.4), inset 0 0 12px rgba(60,162,221, 0.6); /* Add 2 inset shadows to each menu item  */
-webkit-box-shadow: inset -7px 0 10px rgba(60,162,221, 0.4), inset 0 0 12px rgba(60,162,221, 0.6);
box-shadow: inset -7px 0 10px rgba(60,162,221, 0.4), inset 0 0 12px rgba(60,162,221, 0.6);
}

</style>
<div class="shadowblockmenu">
<ul>
<li><a href="địa chỉ liên kết">Tên hiển thị số 1 </a></li>
<li><a href="địa chỉ liên kết">Tên hiển thị số 2</a></li>
<li><a href="địa chỉ liên kết">Tên hiển thị số 3</a></li>
<li><a href="địa chỉ liên kết">Tên hiển thị số 4</a></li>
<li><a href="địa chỉ liên kết">Tên hiển thị số 5</a></li>
<li><a href="địa chỉ liên kết">Tên hiển thị số 6</a></li>


</ul>
</div>

 Bây giờ, bạn thay đổi các dòng lệnh màu đỏ và màu xanh (link màu xanh là link ảnh của Logo với kích thước tối đa là 24x24) để phù hợp với blog mình.

Mở rộng thêm:

Ở đoạn code phía trên có tất cả là 6 tab, vì vậy nếu bạn muốn nhiều hơn thì copy dòng lệnh này:

.shadowblockmenu li:nth-of-type(6) a{ /* Extra style for 2nd menu link */
padding-left:25px;
background: url(Link ảnh của Logo) 1px center no-repeat; /* Link ảnh của logo */
}

Dán vào phía dưới và thay đổi số thứ tự nằm trong ngoặc theo số tiến dần.
Và copy thêm dòng lệnh này:

<li><a href="địa chỉ liên kết">Tên hiển thị số </a></li>


Dán trên dòng lệnh </ul> cuối cùng.

Ví dụ: Ở đoạn code trên hiện có 6 tab, tôi muốn thêm 2 tab nữa là 8 tab, thì code sẽ giống như thế này:

<style type="text/css">

.shadowblockmenu{
font-weight: bold;
font-size: 85%;
width: 100%;
}........
 .shadowblockmenu li:nth-of-type(6) a{ /* Extra style for 2nd menu link */
padding-left:25px;
background: url(Link ảnh của Logo) 1px center no-repeat; /* Link ảnh của logo */
}

.shadowblockmenu li:nth-of-type(7) a{ /* Extra style for 2nd menu link */
padding-left:25px;
background: url(Link ảnh của Logo) 1px center no-repeat; /* Link ảnh của logo */
}

.shadowblockmenu li:nth-of-type(8) a{ /* Extra style for 2nd menu link */
padding-left:25px;
background: url(Link ảnh của Logo) 1px center no-repeat; /* Link ảnh của logo */
}..............

</style>
<div class="shadowblockmenu">
........
<li><a href="địa chỉ liên kết">Tên hiển thị số 7</a></li>
<li><a href="địa chỉ liên kết">Tên hiển thị số 7</a></li>
<li><a href="địa chỉ liên kết">Tên hiển thị số 8</a></li>


</ul>
</div>

Chúc các bạn thành công

▀▄▀▄▀▄ dunghennessy.blogspot.com ▄▀▄▀▄▀

TẠO LOGO TRỰC TUYẾN (Phần 2)

Trước đây, tôi có chia sẻ với các bạn một trang tạo Logo trực tuyến Flaming Text (Xem TẠI ĐÂY).

Tiếp hôm nay, tôi xin chia sẻ thêm cho các bạn một trang tạo Logo cũng khá đẹp với nhiều mẫu mã có sẳn.

Thật ra trang này dùng để làm hình nền động cho các dòng điện thoại nhưng bạn cũng có thể dùng nó để tạo ra một ảnh động có kèm theo tên blog mình với nhiều kích thước khác nhau để làm Logo, sau đó dán vào các sidebar để tạo thêm sinh động cho blog của mình.

Dưới đây là một vài mẫu tôi làm từ trang dịch vụ này, mời các bạn tham khảo:

Còn nhiều mẫu khá đẹp đang chờ các bạn khám phá. Nếu các bạn quan tâm thì bấm vào thẻ phía dưới:

Xem hướng dẫn và tạo Logo

Chúc các bạn có một Logo đẹp cho blog của mình

▀▄▀▄▀▄ dunghennessy.blogspot.com ▄▀▄▀▄▀

MENU DỌC CÓ HIỆU ỨNG ĐỘNG (Kiểu 2)

Tiếp theo bài "TẠO MENU DỌC CÓ HIỆU ỨNG ĐỘNG KIỂU 1" (Xem TẠI ĐÂY). Hôm nay tôi giới thiệu cho các bạn thêm một menu dọc nữa cũng có hiệu ứng động khi rê chuột vào menu.

Cũng không khác gì các menu dọc khác, menu này bao gồm các thanh màu xanh chứa các tên hiển thị liên kết và được sắp xếp theo hình răng cưa, khi bạn rê chuột vào thì thanh này sẽ sáng lên và trượt dài ra về bên trái, khi bạn bấm chuột vào nó sẽ dẫn đến trang mà bạn đã gắn liên kết.

Mời bạn bấm vào "Xem thử" để thấy rõ hơn hiệu ứng của thủ thuật này




Xem thử

Thủ thuật này cũng khá đơn giản, bạn chỉ việc đăng nhập vào Blog > Chọn thiết kế > Thêm tiện ích HTML (đối với các bạn đang sử dụng giao diện blog mới thì bạn đăng nhập vào Blog > Chọn Bố cục > Thêm tiện ích HTML) rồi dán code phía dưới vào.

<style>

ul.svertical{
width: 270px; /* độ rộng của menu*/
overflow: auto;
background: black; /* màu nền của menu */
margin: 0;
padding: 0;
padding-top: 7px;
list-style-type: none;
}

ul.svertical li{
text-align: right;
}

ul.svertical li a{
position: relative;
display: inline-block;
text-indent: 5px;
overflow: hidden;
background: rgb(127, 201, 68);
font: bold 16px Germand;
text-decoration: none;
padding: 5px;
margin-bottom: 1px;
color: black;
-moz-box-shadow: inset -7px 0 5px rgba(114,114,114, 0.8); /* inner right shadow added to each link */
-webkit-box-shadow: inset -7px 0 5px rgba(114,114,114, 0.8);
box-shadow: inset -7px 0 5px rgba(114,114,114, 0.8);
-moz-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}

ul.svertical li a:hover{
padding-right: 50px; /* độ dài của thanh menu khi bạn rê chuột vào */
color: black;
background: rgb(153,249,75);
-moz-box-shadow: inset -3px 0 2px rgba(114,114,114, 0.8); /* contract inner right shadow */
-webkit-box-shadow: inset -3px 0 5px rgba(114,114,114, 0.8);
box-shadow: inset -3px 0 5px rgba(114,114,114, 0.8);
}

ul.svertical li a:before{
content: "";
position: absolute;
left: 0;
top: 0;
border-style: solid;
border-width: 70px 0 0 20px;
border-color: transparent transparent transparent black; /* change black to match the background color of the menu UL */

}

</style>
<center>
<ul class="svertical">
<li><a href="địa chỉ URL">Tên hiển thị menu 1</a></li><li><a href="địa chỉ URL">Tên hiển thị menu 2</a></li>
<li><a href="địa chỉ URL">Tên hiển thị menu 3</a></li>
<li><a href="địa chỉ URL">Tên hiển thị menu 4</a></li>
<li><a href="địa chỉ URL">Tên hiển thị menu 5</a></li>
<li><a href="địa chỉ URL">Tên hiển thị menu 6</a></li>
</ul></center>

Bây giờ, bạn thay đổi các dòng lệnh màu đỏ để phù hợp với blog mình.

Mở rộng thêm:
Ở đoạn code trên chỉ có 6 mục (6 thanh màu xanh), nếu muốn nhiều hơn thì bạn copy dòng lệnh này:

<li><a href="địa chỉ link liên kết">Tên hiển thị</a></li>

Dán trên thẻ </ul> và bấm Lưu lại là xong

Chúc các bạn thành công

▀▄▀▄▀▄ dunghennessy.blogspot.com ▄▀▄▀▄▀

HỘP DỊCH CÓ HÌNH CÁC LÁ CỜ (Kiểu 2)

Trước đây, tôi có chia sẻ với các bạn thủ thuật "Tạo hộp dịch có hình các lá cờ (Kiểu 1), bạn có thể xem TẠI ĐÂY.

Tiếp tục, tôi chia sẻ thêm với các bạn một hộp dịch có hình các lá cờ (kiểu 2). Với kiểu này thì hộp dịch chỉ thể hiện có 9 ngôn ngữ như: Anh, TâyBanNha, Trung Quốc, Pháp, Ấn Độ, Đức, Arabic, Nhật và Nga.

Cũng giống như thủ thuật của kiểu 1, với kiểu 2 này các bạn muốn dịch các bài viết ở trang mình ra ngôn ngữ nào thì bấm vào hình lá cờ đó, các bài viết của bạn sẽ được chuyển đổi sang ngôn ngữ đó ngay lập tức.

Mời bạn bấm vào "Xem thử" phia dưới để trải nghiệm trước nha:

 



Xem thử

Ở kiểu 2 này, có 2 mẫu để bạn chọn lựa, ứng với mỗi mẫu là code ở phía dưới, bạn chỉ cần đăng nhập vào Blog > Chọn Thiết kế > Thêm tiện ích HTML (đối với các bạn đang sử dụng giao diện mới của Blogspot thì đăng nhập vào Blog > Chọn Bố cục > Thêm tiện ích HTML) rồi dán code phía dưới vào và bấm Lưu lại là xong.

Mẫu 1: 

Code mẫu 1:

<center><div id="translator_39703"></div><script type="text/javascript" src="http://dl.dropbox.com/u/66348944/dunghennessy/hopdich/39703-2.js"></script></center>

Mẫu 2:  

Code mẫu 2:

<center><div id="translator_92333"></div><script type="text/javascript" src=" http://dl.dropbox.com/u/66348944/dunghennessy/hopdich/92333-3.js "></script></center>

Bây giờ bạn trở lại vào Blog sẽ thấy có một tiện ích khá đẹp và khá hữu ích: HỘP DỊCH CÓ HÌNH CÁC LÁ CỜ CỦA 9 QUỐC GIA TRÊN THẾ GIỚI.
Chúc bạn vui

▀▄▀▄▀▄ dunghennessy.blogspot.com ▄▀▄▀▄▀

GẮN HỘP GIỚI THIỆU CHO BLOG LIÊN KẾT

Để phát triển cộng đồng Blogger và để giao lưu học hỏi với các Web/Blog khác, các bạn có thể gắn liên kết các Web/Blog vào Blog của mình.

Có nhiều cách để gắn liên kết như: liên kết bằng địa chỉ URL hoặc bằng hình ảnh...v...v...

Trong giới hạn bài viết này, tôi chia sẻ với các bạn một tiện ích nhỏ cho việc gắn liên kết, sử dụng tiện ích này bạn sẽ tiết kiệm được khá nhiều không gian của blog mặc dù vậy nó vẫn hiển thị đầy đủ các yêu cầu gắn liên kết của bạn.

Thủ thuật này sẽ tạo ra một hộp nhỏ chứa đựng các đường link mà mình muốn liên kết. Khi khách tham quan bấm vào mũi tên nằm ở bên phải của hộp thì hộp sẽ xổ dọc xuống tất cả các tên Web/Blog mà bạn đã liên kết, ứng với mỗi tên Web/Blog là một vài dòng giới thiệu mô tả phía dưới của hộp nhằm để khách tham quan có thể dễ dàng lựa chọn chủ đề mà mình muốn xem từ Web/Blog đã liên kết.

Bạn bấm vào "Xem thử" phía dưới để thấy rõ hơn thủ thuật này.

Xem thử

Thủ thuật này cũng khá đơn giản, bạn chỉ việc đăng nhập vào Blog > Chọn thiết kế > Thêm tiện ích HTML (đối với các bạn đang sử dụng giao diện blog mới thì bạn đăng nhập vào Blog > Chọn Bố cục > Thêm tiện ích HTML) rồi dán code phía dưới vào.

<center>

<form name="combowithtext">

<select name="example" size="1" onchange="showtext()">

<option value="địa chỉ link liên kết 0" />Tên Web/blog liên kết 0

<option value="địa chỉ link liên kết 1" />Tên Web/blog liên kết 1

<option value="địa chỉ link liên kết 2" />Tên Web/blog liên kết 2

<option value="địa chỉ link liên kết 3" />Tên Web/blog liên kết 3

<option value="địa chỉ link liên kết 4" />Tên Web/blog liên kết 4

<option value="địa chỉ link liên kết 5" />Tên Web/blog liên kết 5

<option value="địa chỉ link liên kết 6" />Tên Web/blog liên kết 6

</select>

<input type="button" value="OK!"

onclick="gothere()" /><br />

<textarea rows=5 cols=30 wrap="virtual" name="text"></textarea>

<script language="javascript">

<!--

var shortcut=document.combowithtext

var descriptions=new Array()

//extend this list if neccessary to accomodate more selections

descriptions[0]="nhập dòng giới thiệu cho link liên kết 0 vào đây"

descriptions[1]="nhập dòng giới thiệu cho link liên kết 1 vào đây"

descriptions[2]="nhập dòng giới thiệu cho link liên kết 2 vào đây"

descriptions[3]="nhập dòng giới thiệu cho link liên kết 3 vào đây"

descriptions[4]="nhập dòng giới thiệu cho link liên kết 4 vào đây"

descriptions[5]="nhập dòng giới thiệu cho link liên kết 5 vào đây"

descriptions[6]="nhập dòng giới thiệu cho link liên kết 6 vào đây"

shortcut.text.value=descriptions[shortcut.example.selectedIndex]

function gothere(){

location=shortcut.example.options[shortcut.example.selectedIndex].value

}

function showtext(){

shortcut.text.value=descriptions[shortcut.example.selectedIndex]

}

//-->

</script>

</form>

</center>

Bây giờ, bạn thay đổi các dòng lệnh màu đỏ để phù hợp với blog mình.

Mở rộng thêm:

Ở đoạn code phía trên có tất cả là 7 đường link liên kết (tính luôn số 0), vì vậy nếu bạn muốn nhiều hơn thì copy dòng lệnh này:

<option value="địa chỉ link liên kết" />Tên Web/Blog liên kết

Dán trên thẻ </select> phía trên.

Tiếp tục copy dòng lệnh này:

descriptions[7]="nhập dòng giới thiệu vào đây"

Dán vào phía dưới và thay đổi số thứ tự nằm trong ngoặc theo số tiến dần.

Ví dụ: Tôi muốn thêm 2 link liên kết nữa thì code sẽ giống như thế này:

<center>

<form name="combowithtext">

<select name="example" size="1" onchange="showtext()">

<option value="địa chỉ link liên kết 0" />Tên Web/blog liên kết 0

<option value="địa chỉ link liên kết 1" />Tên Web/blog liên kết 1

<option value="địa chỉ link liên kết 2" />Tên Web/blog liên kết 2

<option value="địa chỉ link liên kết 3" />Tên Web/blog liên kết 3

<option value="địa chỉ link liên kết 4" />Tên Web/blog liên kết 4

<option value="địa chỉ link liên kết 5" />Tên Web/blog liên kết 5

<option value="địa chỉ link liên kết 6" />Tên Web/blog liên kết 6

<option value="địa chỉ link liên kết 7" />Tên Web/blog liên kết 7

<option value="địa chỉ link liên kết 8" />Tên Web/blog liên kết 8

</select>......

descriptions[0]="nhập dòng giới thiệu cho link liên kết 0 vào đây"

descriptions[1]="nhập dòng giới thiệu cho link liên kết 1 vào đây"

descriptions[2]="nhập dòng giới thiệu cho link liên kết 2 vào đây"

descriptions[3]="nhập dòng giới thiệu cho link liên kết 3 vào đây"

descriptions[4]="nhập dòng giới thiệu cho link liên kết 4 vào đây"

descriptions[5]="nhập dòng giới thiệu cho link liên kết 5 vào đây"

descriptions[6]="nhập dòng giới thiệu cho link liên kết 6 vào đây"

descriptions[7]="nhập dòng giới thiệu cho link liên kết 7vào đây"

descriptions[8]="nhập dòng giới thiệu cho link liên kết 8 vào đây"

shortcut.text.....

</center>

Chúc các bạn thành công

▀▄▀▄▀▄ dunghennessy.blogspot.com ▄▀▄▀▄▀

TẠO MENU DỌC CHO HÌNH ẢNH

Với thủ thuật dưới đây, các bạn có thể dễ dàng tạo một menu cho một hình ảnh nào đó. Khi bạn rê chuột vào hình ảnh này thì sẽ có một menu xổ dọc xuống phía dưới hoặc phía trên tuỳ theo vị trí của ảnh. Các bạn có thể áp dụng thủ thuật này để làm liên kết với các blog khác...

Mời bạn bấm vào Xem thử phía dưới để trải nghiệm nha.

Xem thử

Thủ thuật này cũng khá đơn giản, bạn chỉ cần đăng nhập vào Blog > Chọn Thiết kế > Thêm tiện ích HTML rồi dán đoạn code phía dưới vào.

<link rel="stylesheet" type="text/css" href="http://dl.dropbox.com/u/66348944/dunghennessy/menudoc-menucon/anylinkmenu.css" />
<script type="text/javascript" src="http://dl.dropbox.com/u/66348944/dunghennessy/menudoc-menucon/anylinkmenu.js">
</script>

<script type="text/javascript">

var anylinkmenu1={divclass:'anylinkmenu', inlinestyle:'width:260px; background:#FDD271', linktarget:'_new'} //First menu variable. Make sure "anylinkmenu1" is unique
anylinkmenu1.items=[
["Tiêu đề 1", "Link liên kết"],
["Tiêu đề 2", "Link liên kết"],
["Tiêu đề 3", "Link liên kết"],
["Tiêu đề 4", "Link liên kết"],
["Tiêu đề 5", "Link liên kết"],
["Tiêu đề 6", "Link liên kết"],
["Tiêu đề 7", "Link liên kết"],
["Tiêu đề cuối", "Link liên kết"] //dòng cuối này không có dấu phẩy phía sau
]

//anylinkmenu.init("menu_anchors_class") //Pass in the CSS class of anchor links (that contain a sub menu)
anylinkmenu.init("menuanchorclass")

</script>

<a href="http://www.dunghennessy.blogspot.com" class="menuanchorclass" rel="anylinkmenu1"><img border="0" src="Link hình ảnh" /></a>

Bây giờ, bạn cần thay đổi các dòng lệnh màu đỏ (bao gồm kích thước, màu nền, tiêu đề và đường link liên kết của menu), cuối cùng bấm Lưu lại là xong.

Mở rộng thêm:
* Ở code trên có tất cả 8 mục, nếu muốn nhiều mục hơn, bạn copy lệnh này:

["Tiêu đề", "Link liên kết"],

Và dán trên dòng lệnh "Tiêu đề cuối".

* Nếu bạn muốn thay hình bằng chữ thì thay dòng lệnh:

<img border="0" src="Link hình ảnh" />

Bằng dòng chữ nào mình thích, ví dụ:

<a href="http://www.dunghennessy.blogspot.com" class="menuanchorclass" rel="anylinkmenu1">Chọn chủ đề để xem</a>

Chúc các bạn thành công!!! 

▀▄▀▄▀▄ dunghennessy.blogspot.com ▄▀▄▀▄▀