HIỂN THỊ NGÀY GIỜ TRÊN THANH TIÊU ĐỀ BLOGGER

Thanh tiêu đề Blog là thanh nằm ngang trên cùng của trang web/blog, bạn có thể hiển thị THỨ, NGÀY THÁNG NĂM VÀ GIỜ HIỆN TẠI trên thanh này với một thao tác đơn giản như sau:

Đầu tiên, bạn đăng nhập vào Blog > chọn Thiết kế > chọn Thêm tiện ích > thêm HTML/Javacript rồi dán đoạn code này vào

<Script Language="JavaScript" Type="Text/JavaScript"> var mytime1=24; function mytime2() { mytime3=mytime1+6; mytime4=mytime1+mytime3; timexx=mytime1+mytime3+mytime4; timexxx=timexx/mytime4*mytime1; twelfth=mytime4*mytime1/12*mytime3; timexxxx=mytime1+mytime3/timexxx-16*timexx; timexxxxx=twelfth*(mytime1-5)/mytime4+timexx; timexxxxxx=timexxxxx/timexxxx+mytime1*mytime4-timexx; mytime5=(timexxxxxx+mytime1/mytime4*timexx+mytime3*timexxx)/twelfth+timexxxxx-timexxxxxx-1; mytime6=Math.floor(mytime5); mytime8=mytime6*mytime3/2+100; mytime7 = window.setTimeout("mytime2()", mytime8); var mytime9 = new Date(); var mytime10= mytime9.toLocaleString(); document.title = mytime10;} function op(){mytime2()} window.onload=op; </script><br />

Sau đó Lưu lại và trở lại Blog xem kết quả

More about →

TẠO CHỮ ĐỘNG CHO BLOGGER

Mời các bạn xem các dòng chữ dưới đây:

Để làm các chữ này, bạn VÀO ĐÂY, sau đó gõ chữ mình cần tạo, chọn Font, chọn kiểu động, chọn cỡ chữ và cuối cùng bấm phải vào hình chọn Save as... để tải về máy, nếu cần dán vào Web/Blog thì bấm vào bước 4 để lấy mã code.

More about →

KHUNG CHỨA CODE CÓ CHỮ SELECT ALL

Để tạo khung chứa code có chữ SELECT ALL (khi bạn bấm vào chữ Select All này thì tự động các dòng code trong khung được chọn hết), các bạn cần làm theo các bước sau:

Đầu tiên, bạn đăng bài như bình thường, khi muốn chèn khung chứa code ở đoạn nào thì bạn Enter xuống dòng và chọn thẻ chỉnh sửa HTML ở phía tay phải của khung đăng bài để chuyển qua mã HTML.

Sau đó, dán tất cả các dòng code dưới đây vào dưới thẻ </div>.

<form name="MyTextBoxForm"><input name="button" onclick="javascript:this.form.MyTextBox.focus();this.form.MyTextBox.select();" type="button" value="Select All" /><br /> <textarea cols="80" name="MyTextBox" rows="12" wrap="off">Your Contents Here

Bây giờ bạn có thể nhập nội dung đoạn code vào thay thế chữ Your Contents Here

Và bạn cũng có thể thay đổi độ rộng của khung ở lệnh cols, độ cao của khung ở lệnh rows, có thể thay thế chữ Select All bằng chữ khác nếu bạn thích (ví dụ: chọn hết, chọn tất cả...).

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

More about →

MENU NGANG CÓ HIỆU ỨNG ĐỘNG KHI RÊ CHUỘT

Hôm nay, tôi chia sẻ đến với các bạn cách tạo menu ngang có hiệu ứng động khi rê chuột (không có menu con). Với menu này khi bạn rê chuột đến một thẻ bất kỳ trên menu thì thẻ đó sẽ tự động đổi màu khác khá đẹp. Mời bạn bấm vào Xem thử để trải nghiệm






Xem thử

Đầu tiên, bạn đăng nhập vào Blog > chọn Thiết kế > chọn Chỉnh sửa HTML, bạn bấm đồng thời cặp phím Ctrl+F để mở hộp tìm kiếm và gõ vào lệnh ]]></b:skin>, sau đó dán đoạn code phía dưới trước dòng lệnh đó.

ul#topnav {
margin: 0px 0 0px;
padding: 0;
list-style: none;
font-size: 1.1em;
clear: both;
float: left;
width: 650px; /*độ rộng của menu*/
}
ul#topnav li{
margin: 0;
padding: 0;
overflow: hidden;
float: left;
height:40px; /*chiều cao của menu*/
}
ul#topnav a, ul#topnav span {
padding: 10px 20px;
float: left;
text-decoration: none;
color: #fff; /*màu text của menu*/
text-transform: uppercase;
clear: both;
height: 20px;
line-height: 20px;
background: #1d1d1d;
}
ul#topnav a { color: #7bc441; }
ul#topnav span {
display: none;
}

ul#topnav.v2 span{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsig1Ornh1u4zYmIeBpNMV53R_wq2Ia-Tjz5MbohQS7dHa6xkJZgLaqOOwHYZ14XSnby4O6CGWUQ-KteL_IDtgOIyXwextm3288AlS_6dRD5FVyO9WSAQ0e51qXnqZT47EPGUxoZktqz0f/) repeat-x left top; /*màu nền của menu*/
}
ul#topnav.v2 a{
color: #555;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsig1Ornh1u4zYmIeBpNMV53R_wq2Ia-Tjz5MbohQS7dHa6xkJZgLaqOOwHYZ14XSnby4O6CGWUQ-KteL_IDtgOIyXwextm3288AlS_6dRD5FVyO9WSAQ0e51qXnqZT47EPGUxoZktqz0f/)repeat-x left bottom; /*màu nền của menu*/
}

 Tiếp tục, trong khung tìm kiếm nhỏ bạn thay dòng lệnh ]]></b:skin> bằng lệnh <head> và dán đoạn code dưới đây vào sau nó.

<script src='http://dl.dropbox.com/u/66348944/jquery.min.js' type='text/javascript'/>

<script src='http://dl.dropbox.com/u/66348944/ani_menu.js' type='text/javascript'/>

Cuối cùng bấm Lưu lại. Bây giờ, bạn trở lại trang thiết kế > Thêm tiện ích > Thêm HTML/Javacript rồi dán đoạn code phía dưới vào.
 

<ul id="topnav" class="v2">
<li><a href="URL Menu 1">MENU 1</a></li>
<li><a href="URL Menu 2">MENU 2</a></li>
<li><a href="URL Menu 3">MENU 3</a></li>
<li><a href="URL Menu 4">MENU 4</a></li>
<li><a href="URL Menu 5">MENU 5</a></li>
<li><a href="URL Menu 6">MENU 6</a></li>
<li><a href="URL Menu 5">MENU 5</a></li>
<li><a href="URL Menu 6">MENU 6</a></li>
</ul>

Bạn thay đổi các dòng màu đỏ và màu xanh theo ý mình và bấm Lưu lại.

Bạn trở lại vào Blog sẽ thấy có một menu ngang màu đỏ và khi bạn rê chuột vào menu này sẽ có hiệu ứng chuyển động tuyệt đẹp.

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

More about →

ẨN HIỆN THANH ĐIỀU HƯỚNG

Thanh điều hướng là thanh nằm trên cùng trang Blog của bạn, bạn có thể cho ẩn và khi rê chuột đến đầu trang Blog thanh điều hướng này sẽ xuất hiện để cho bạn thao tác sử dụng...

Đầu tiên, bạn đăng nhập Blog > Chọn thiết kế > chọn Chỉnh sửa HTML, sau đó bấm đồng thời cặp phím Ctrl+F để mở hộp tìm kiếm và gõ vào dòng lệnh  ]]></b:skin>
Bạn copy đoạn code này và dán trên dòng lệnh đó.

#navbar-iframe { height:5px; } /* IE7, IE8, IE6 */ #navbar-iframe { height/*\**/: 30px\9; } #navbar-iframe:hover { height:40px; !important; }

Cuối cùng bấm Lưu lại để hoàn tất. Bây giờ bạn trở lại vào Blog xem kết quả nha.

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

More about →

BÀI MỚI ĐĂNG CÓ HÌNH PHÍA TRƯỚC VÀ HIỆU ỨNG CHẠY NGANG

Trước đây, tôi có giới thiệu bài "Tiêu đề bài đăng mới có hiệu ứng chạy ngang", nay tôi xin chia sẻ với các bạn bài đăng mới cũng  có hiệu ứng giống như bài trên nhưng khác ở chỗ chúng ta có thể gắn hình phía trước: (các bạn có thể xem hiệu ứng phía dưới):

Để làm được như vậy, các bạn đăng nhập vào Blog > chọn Thiết kế > Thêm tiện ích > Thêm HTML/Javacript rồi dán tất cả các code này vào

<script type='text/javascript'>

            var w2bWidth="100";

            var w2bScrollAmount="10";

            var w2bScrollDelay="50";

            var w2bDirection="left";

            var w2btargetlink="no";

            var w2bnumPosts="10";

            var w2bBulletchar =">>>";

            var w2bimagebullet="yes";

            var w2bimgurl="LINK ẢNH";

            var w2bfontsize="16";

            var w2bbgcolor="transparent";

            var w2blinkcolor="FF0000";

            var w2blinkhovercolor="3366CC";

</script>

<script type='text/javascript' src='http://bloggerblogwidgets.googlecode.com/files/way2blogging_rpscroller_v3.js' ></script>

<script type='text/javascript' src="http://địa chỉ của Blog của bạn/feeds/posts/default?alt=json-in-script&callback=w2bAdvRecentPostsScrollerv3&max-results=10" ></script>

Bây giờ bạn thay thế các chữ màu đỏ và màu xanh để phù hợp với Blog mình. Bạn nên chọn hình ảnh có kích thước nhỏ để cho phù hợp (khoảng 40x40 là đẹp nhất)

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

More about →

TẠO MENU NGANG CÓ NHIỀU MENU CON XỔ DỌC XUỐNG NHIỀU CẤP (KIỂU 1)

Nếu trên Blog của bạn có quá nhiều trang riêng lẻ thì công việc tạo menu ngang là cần thiết, có nhiều cách để tạo ra menu ngang (bạn có thể xem các mẫu menu ngang đơn giản TẠI ĐÂY).

Ngoài cách trên, bạn có thể tạo cho mình một menu có nhiều menu con xổ dọc xuống khi bạn click vào một menu chính bất kỳ, điều này sẽ làm cho Blog bạn trông "gọn gàng" hơn và "Pro" hơn rất nhiều.
Mời bạn bấm Xem thử phía dưới để trải nghiệm trước menu ngang này

Xem thử

Để tạo được như vậy, các bạn cần làm theo các bước sau đây:

Đầu tiên, bạn đăng nhập vào Blog > Chọn bố cục > Thêm tiện ích HTML/Javacript (nếu chưa biết cách thêm tiện ích HTML/Javacript thì mời bạn xem TẠI ĐÂY). Sau đó dán toàn bộ code phía dưới vào.

<!doctype html public "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<link rel="stylesheet" type="text/css" href="https://dl.dropbox.com/u/66348944/dunghennessy/menungangxodoc1.css" />
<link rel="stylesheet" type="text/css" href="https://dl.dropbox.com/u/66348944/dunghennessy/menungangxodoc1-v.css" />

<script type="text/javascript" src="https://dl.dropbox.com/u/66348944/dunghennessy/jquery.min.js"></script>
<script type="text/javascript" src="https://dl.dropbox.com/u/66348944/dunghennessy/menungangxodoc1.js">

</script>

<script type="text/javascript">

ddsmoothmenu.init({
    mainmenuid: "smoothmenu1", //menu DIV id
    orientation: 'h', //Horizontal or vertical menu: Set to "h" or "v"
    classname: 'ddsmoothmenu', //class added to menu's outer DIV
    //customtheme: ["#1c5a80", "#18374a"],
    contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]
})

ddsmoothmenu.init({
    mainmenuid: "smoothmenu2", //Menu DIV id
    orientation: 'v', //Horizontal or vertical menu: Set to "h" or "v"
    classname: 'ddsmoothmenu-v', //class added to menu's outer DIV
    //customtheme: ["#804000", "#482400"],
    contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]
})

</script>

<div id="smoothmenu1" class="ddsmoothmenu">

<ul>

<li><a href="http://www.dunghennessy.blogspot.com">Home</a></li>

<li><a href="#"> Tên menu chính 1 </a>

  <ul>

  <li><a href=" địa chỉ trang "> Tên menu phụ 1 </a></li>
  <li><a href=" địa chỉ trang "> Tên menu phụ 1 </a></li>
  <li><a href=" địa chỉ trang "> Tên menu phụ 1 </a></li>
  <li><a href=" địa chỉ trang "> Tên menu phụ 1 </a></li>  
  <li><a href=" địa chỉ trang "> Tên menu phụ 1 </a></li>
  <li><a href=" địa chỉ trang "> Tên menu phụ 1 </a></li>
  <li><a href=" địa chỉ trang "> Tên menu phụ 1 </a></li>
  </ul>

</li>

<li><a href="#"> Tên menu chính 2</a>

  <ul>

  <li><a href=" địa chỉ trang "> Tên menu phụ 2 </a></li>
  <li><a href=" địa chỉ trang "> Tên menu phụ 2 </a></li>
  <li><a href=" địa chỉ trang "> Tên menu phụ 2 </a></li>
  <li><a href=" địa chỉ trang "> Tên menu phụ 2 </a></li>  
  <li><a href=" địa chỉ trang "> Tên menu phụ 2 </a></li>
  <li><a href=" địa chỉ trang "> Tên menu phụ 2 </a></li>
  <li><a href=" địa chỉ trang "> Tên menu phụ 2 </a></li>

  </ul>

</li>

<li><a href=" địa chỉ trang "> Tên menu chính 3</a></li>

<li><a href="#"> Tên menu chính 4</a>

  <ul>

  <li><a href=" địa chỉ trang "> Tên menu phụ 4 </a></li>

  <li><a href="#"> Tên menu phụ 4 </a>

    <ul>

    <li><a href=" địa chỉ trang "> Tên menu phụ 4/1 </a></li>

    <li><a href=" địa chỉ trang "> Tên menu phụ 4/1 </a></li>
    <li><a href="#"> Tên menu phụ 4/2 </a>

  <ul>

      <li><a href=" địa chỉ trang "> Tên menu phụ 4/3 </a></li>

      <li><a href=" địa chỉ trang "> Tên menu phụ 4/3 </a></li>

      <li><a href=" địa chỉ trang "> Tên menu phụ 4/3 </a></li>

      <li><a href=" địa chỉ trang "> Tên menu phụ 4/3 </a></li>

      <li><a href=" địa chỉ trang "> Tên menu phụ 4/3 </a></li>

  </ul>

    </li>

    <li><a href=" địa chỉ trang "> Tên menu phụ 4/2 </a></li>

    </ul>

  </li>

  </ul>

</li>

<li><a href=" địa chỉ trang "> Tên menu chính 5 </a></li>

</ul>

<br style="clear: left" />

</div></!doctype>

Bây giờ bạn chỉ việc thay đổi các dòng lệnh màu đỏ và màu xanh theo ý của bạn, cuối cùng bấm Lưu và trở lại blog bạn sẽ thấy blog của mình sẽ có một menu ngang xổ dọc xuống các menu con khá tiện dụng...
Chúc bạn thành công

More about →

KHUNG CHỨA CODE MÀU XANH

Trước đây tôi có đăng bài "Tạo khung chứa code trong bài đăng", nay xin giới thiệu đến các bạn khung chứa code có màu nền xanh. Đây là code của nó

<textarea name="code" rows="2" cols="42" style="background:#A9F5A9;  color:#295F00; border:2px #295F00 dashed; line-height:1.5em;  padding:5px;"> TYPE YOUR TEXT AREA IN HERE </textarea>

Các bước đều giống bài trên nhưng khác ở chỗ sau khi dán code xong, bạn gõ nội dung mà mình muốn hiển thị  thay vào dòng chữ TYPE YOUR TEXT AREA IN HERE ngay tại ô chỉnh sửa HTML luôn, không cần phải bấm vào thẻ VIẾT trên góc phải trang đăng bài.

Bạn có thể thay đổi kích thước khung ở mục "cods" và số dòng ở mục "row"

Chúc bạn vui

More about →

TẠO KHUNG CHỨA HÌNH ẢNH

Ngoài việc tạo khung chứa code, bạn cũng có thể tạo khung có thanh trượt để chứa các hình ảnh của mình.

Đầu tiên, bạn đăng nhập Blog > chọn Thiết kế > chọn Thêm Tiện ích > Thêm HTML/Javacript rồi dán tất cả các code này vào:

<div style="height: 300px; overflow: scroll; width: 500px;"><br /> <img alt="scroll" border="0" height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKlxWQ-D5QWTNYdy77dMyUZHaDYZ64M5gh0SHFfEBvj-2hPB1GlIMz7IUSZhXe9RNAZJ70jzkiXwrBgx6KafBR0ZRMBa4oVpbJ9uHvONP7o_7cHStUxc5zyPwYYts8qBDfc4EaYC8QRK7h/s320/scrapeenet_glitterizer_20110512044152hkoGGa.gif" width="500" /><br /> <br /> <img alt="scroll" border="0" height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicih2NQxtP0ixULRGkDllykD-DF8HrydbbD-Ax50PCvwgTfg0R0wYpr-wIDpa78jBarN5_kj2DA0gIzaKmMdxq74Sk0kb1VMt3xbbd0wIrkkwXSqw0QjH5wAIioTtPF3Heopvkc-W_2P5j/s320/8837_microsoft_win_xp_6_2.jpg" width="500" /><br /> <br /> <br /> <br /> <img alt="scroll" border="0" height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRDs7mjDC9AtVxqpi71vCCIYEtdK_8nZtUgwkQZk60TiA-4EsrMuUJElKvgSWA0uRGlNJa9SzHQtEy9ZS2LzDF5pxEnnf1Qc549s1hItAiWDqq9AkG6jGwcyRkOW1aWA0i-sWlVfTojfia/s320/scrapeenet_glitterizer_20110512044106492Wq5.gif" width="500" /><br /> <br /> </div>

Bây giờ, bạn thay đổi link ảnh và kích thước ảnh mà mình muốn hiển thị, cuối cùng bấm Lưu là xong.

Với code trên ta sẽ được hình như thế này:

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

More about →

TIỆN ÍCH BÀI VIẾT VỚI HIỆU ỨNG RƠI TỪ TRÊN XUỐNG

Để gắn tiện ích bài viết mới có kèm ảnh với hiệu ứng "rơi" từ trên xuống, các bạn cần làm các bước sau:

Đầu tiên, bạn đăng nhập Blog > chọn Thiết kế > chọn Thêm tiện ích > Thêm HTML/Javacript, sau đó dán tất cả các code này vào

<style type="text/css">

#spylist {

overflow:hidden;

margin-top:5px;

height:450px; /* độ cao của tiện ích*/

}

#spylist ul{

overflow:hidden;

list-style-type: none;

padding: 0px;

}

#spylist li {

border:1px dotted #0000ff;

width:208px; /* độ rộng của tiện ích*/

margin:0px 0px 5px 0px;

padding:2px 1px 2px 2px;

list-style-type:none;

float:none;

height:60px; /* độ cao của mỗi tiêu đề bài viết*/

overflow: hidden;

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMe9BSlq3ZGtrTpoMZ-WO4K4abrJMhwABN1hvPS98cEetJ6ua6stM8t2XH2kvkOtXQvOwJRfhHXOiPYe_crjH5B_InzPisrxGFfBgAJTbQGkm7r4uVKJ97FqhLRcQRwgOX66u1_B2Zf-31/); /* màu nền của tiện ích*/

}

#spylist li a {

text-decoration:none;

color:#0066cc;

font-size:11px;

height:18px;

overflow:hidden;

margin:0px 0px 0px 0px;

padding:0px 0px 2px 0px;

}

#spylist li a:hover{

text-decoration:underline;

color:#ff0000;

}

#spylist li img {

float:left;

margin-right:5px;

border:1px;

}

.spydate{

overflow:hidden;

font-size:10px;

color:#ff0066;

padding:2px 0px;

margin:1px 0px 0px 0px;

height:15px;

font-family:Tahoma,Arial,verdana, sans-serif;

}

.spycomment{

overflow:hidden;

font-family:Tahoma,Arial,verdana, sans-serif;

font-size:10px;

color:#262B2F;

padding:0px 0px;

margin:0px 0px;

}

</style>

<script src="http://dl.dropbox.com/u/66348944/jquery.min.js" type="text/javascript"></script>

<script language="JavaScript">

imgr = new Array();

imgr[0] = "http://img138.imageshack.us/img138/7159/noimage.jpg";

limitspy = 6; //số bài trình diễn

intervalspy = 4000; //tốc độ chuyển đổi bài viết

showRandomImg = true;

boxwidth = 255;

cellspacing = 0;

borderColor = "#000000";

bgTD = "#fff";

thumbwidth = 60; //độ rộng ảnh thumb

thumbheight = 60; //độ cao ảnh thumb

fntsize = 12;

acolor = "#666";

aBold = true;

icon = " ";

text = "no"; //nếu muốn hiển thị số comment thì bạn thay "no" thành "comments"

showPostDate = false;

summaryPost = 40;

summaryFontsize = 10; //kích thước của text

summaryColor = "";

icon2 = " ";

numposts = 10; //số bài viết hiển thị

label = "Advanced blogger"; //nhãn bài viết (nếu hiển thị theo bài viết thì không cần quan tâm)

home_page = "http://www.dungheineken.blogspot.com/"; //địa chỉ blog của bạn

</script>

<div id="spylist"><script src="http://dl.dropbox.com/u/66348944/recent_post_spy.js" type="text/javascript"></script></div>

Sau đó, bạn thay đổi địa chỉ Blog của bạn và bạn có thể thay đổi các tùy chỉnh như trên code đã chú thích để chọn cho mình một tiện ích đẹp nhất nha. Cuối cùng bấm lưu lại và quay trở lại Blog xem kết quả. 

Ở code trên thì thủ thuật này sẽ hiển thị tất cả các bài ở Web/Blog, nếu muốn thủ thuật chỉ hiển thị ở một nhãn nhất định, bạn thay thế dòng code cuối cùng (màu đỏ) thành đoạn code như sau:

  

https://dl.dropbox.com/u/66348944/recent_label_spy.js

Với mã code ở trên thì chúng ta sẽ có tiện ích giống như thế này:




Xem thử

More about →

TẠO 4 BANNER QUẢNG CÁO 125X125 TRONG MỘT TIỆN ÍCH HTML/JAVACRIPT

Các bạn thường thấy trên các trang Web/Blog họ hay đặt các khung banner quảng cáo nhỏ vào trong một tiện ích HTML/Javacript để tiết kiệm không gian cho Web/Blog.

Bạn cũng có thể làm được như vậy với các bước sau:

Đầu tiên bạn đăng nhập vào Blog > Chọn Thiết kế > Chọn Thêm tiện ích > Thêm HTML/Javacript rồi dán tất cả các code này vào:

<div align="center"><table bgcolor="#000000" border="0" cellpadding="2" cellspacing="6" width="265"><tbody><tr><td><center><a href="http://dunghennessy.blogspot.com" rel="nofollow" target="_blank"><img alt="AD DESCRIPTION" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMo1xnuZtZ9C2SgJ_I26QjpSwMS71-FK-ui85ARExS4ui-5tk27JoSySq3NsGUqaVKlmzLX-Jc_XZ5t_JNd7a3VWzBrP6123XwKbAeGFhsjuNxuzpBjs_63e0XeqEkHfzKVlWI3SgeDoc/" border="0" height="125" width="125" /></a></center></td><td><center><a href="http://dunghennessy.blogspot.com" rel="nofollow" target="_blank"><img alt="AD DESCRIPTION" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMo1xnuZtZ9C2SgJ_I26QjpSwMS71-FK-ui85ARExS4ui-5tk27JoSySq3NsGUqaVKlmzLX-Jc_XZ5t_JNd7a3VWzBrP6123XwKbAeGFhsjuNxuzpBjs_63e0XeqEkHfzKVlWI3SgeDoc/" border="0" height="125" width="125" /></a></center></td></tr><tr><td><center><a href="http://dunghennessy.blogspot.com" rel="nofollow" target="_blank"><img alt="AD DESCRIPTION" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMo1xnuZtZ9C2SgJ_I26QjpSwMS71-FK-ui85ARExS4ui-5tk27JoSySq3NsGUqaVKlmzLX-Jc_XZ5t_JNd7a3VWzBrP6123XwKbAeGFhsjuNxuzpBjs_63e0XeqEkHfzKVlWI3SgeDoc/" border="0" height="125" width="125" /></a></center></td><td><center><a href="http://dunghennessy.blogspot.com" rel="nofollow" target="_blank"><img alt="AD DESCRIPTION" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMo1xnuZtZ9C2SgJ_I26QjpSwMS71-FK-ui85ARExS4ui-5tk27JoSySq3NsGUqaVKlmzLX-Jc_XZ5t_JNd7a3VWzBrP6123XwKbAeGFhsjuNxuzpBjs_63e0XeqEkHfzKVlWI3SgeDoc/" border="0" height="125" width="125" /></a></center></td></tr></tbody></table></div>

Sau đó, bạn thay link liên kết ở dòng lệnh màu đỏ, link ảnh ở dòng lệnh màu xanh hoặc kích thước mình muốn ở height và Width:

<td><center><a href=" http://dunghennessy.blogspot.com " rel="nofollow" target="_blank"><img alt=" " src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMo1xnuZtZ9C2SgJ_I26QjpSwMS71-FK-ui85ARExS4ui-5tk27JoSySq3NsGUqaVKlmzLX-Jc_XZ5t_JNd7a3VWzBrP6123XwKbAeGFhsjuNxuzpBjs_63e0XeqEkHfzKVlWI3SgeDoc/" border="0" height="125" width="125".
Sau đó bấm Lưu là xong, bây giờ bạn trở vào Blog sẽ thấy 4 banner hiển thị trên Blog của bạn.
Nếu muốn thêm nhiều banner nữa, bạn copy code này vào
 
<tbody><tr><br /> <td><center><a href=" http://dunghennessy.blogspot.com " rel="nofollow" target="_blank"><img alt=" " src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMo1xnuZtZ9C2SgJ_I26QjpSwMS71-FK-ui85ARExS4ui-5tk27JoSySq3NsGUqaVKlmzLX-Jc_XZ5t_JNd7a3VWzBrP6123XwKbAeGFhsjuNxuzpBjs_63e0XeqEkHfzKVlWI3SgeDoc/" border="0" height="125" width="125" /></a></center></td><br /> <td><center><a href="http://dunghennessy.blogspot.com" rel="nofollow" target="_blank"><img alt=" " src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMo1xnuZtZ9C2SgJ_I26QjpSwMS71-FK-ui85ARExS4ui-5tk27JoSySq3NsGUqaVKlmzLX-Jc_XZ5t_JNd7a3VWzBrP6123XwKbAeGFhsjuNxuzpBjs_63e0XeqEkHfzKVlWI3SgeDoc/" border="0" height="125" width="125" /></a></center></td><br /> </tr><br /> <tr><br />

Và dán phía trên dòng lệnh: </tbody></table></div>
Chúc các bạn thành công

More about →

LINK TEXT THAY ĐỔI MÀU LIÊN TỤC KHI RÊ CHUỘT VÀO LINK

Để cho Blog mình thêm đẹp bạn có nhiều cách tạo hiệu ứng cho nó, trong giới hạn bài viết này, tôi sẽ giới thiệu đến các bạn đổi hình trỏ chuột kết hợp link text sẽ thay đổi màu liên tục khi rê chuột đến link.

Đầu tiên, bạn đăng nhập vào Blog > chọn Thiết kế > chọn Thêm tiện ích > Thêm HTML/Javacript rồi dán tất cả các code này vào

<style type="text/css"> HTML,BODY{cursor: url("http://downloads.totallyfreecursors.com/cursor_files/blkglitwrkbgnd.ani"), url("http://lh5.ggpht.com/_TaHzV-QgYq0/S17G6-QTLDI/AAAAAAAAFRE/opaLpGQugtU/redglitter.gif"), auto;}</style><br /> <style>A:hover{cursor: url("http://downloads.totallyfreecursors.com/cursor_files/butterflyani1.cur"), url("http://lh5.ggpht.com/_TaHzV-QgYq0/S17G632P9HI/AAAAAAAAFRA/ArKIi6ah1Fo/redglitlnkslct.gif"), auto;}</style><br /> <script src="http://traidatmui-tips.googlecode.com/files/hover_textcolor.js"></script><br />

Và cuối cùng bấm Lưu lại là xong.
Nếu bạn không thích hình con chuột ở trên, bạn có thể thay đổi hình trỏ chuột khác bằng cách thay đổi dòng lệnh này:
http://lh5.ggpht.com/_TaHzV-QgYq0/S17G632P9HI/AAAAAAAAFRA/ArKIi6ah1Fo/redglitlnkslct.gif bằng link hình con trỏ chuột trên TRANG NÀY.
Bây giờ bạn trở lại vào blog để "hưởng thụ" thành quả nha
Chúc vui

More about →

TẠO MENU DỌC CHO NHÃN

Mặc định các nhãn của Blogspot được hiển thị rất đơn điệu, nếu bạn muốn các nhãn hiển thị được đẹp hơn, bạn có thể tạo menu dọc cho nó, để tạo menu dọc các bạn phải dán code vào mã nguồn và một vào HTML/Javacrip.

Các bước như sau:

Đầu tiên, bạn đăng nhập Blog > chọn Thiết kế > Chỉnh sửa HTML, bấm đồng thời 2 phím Ctrl+F để mở hộp tìm kiếm, gõ vào khung lệnh ]]></b:skin>, sau đó dán code trong khung màu xanh vào phía trên nó và lưu lại. Tiếp theo bạn vào Thiết kế > Thêm tiện ích > Thêm HTML/Javacript và dán code trong khung màu tím vào, thay đổi các đường link của nhãn, viết tên hiển thị của nhãn, cuối cùng lưu lại là xong (Bạn có thể xem thêm chỉ dẫn chi tiết cách thức dán các code TẠI ĐÂY)

 

Mẫu 1:

#menu9 ul { list-style: none; margin: 0; padding: 0; } #menu9 img { border: none; } #menu9 { width: 200px; margin: 10px; } #menu9 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu9 li a:link, #menu9 li a:visited { color: #FFF; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZTsG6EYUyUR5oH2wtqb6q_fDFpOrG3wqwN4v-8ZeQ5pcWPST64TXL2zY1yhXHpazoftOYfBEKd6RUZ0UUwg2MeRj6ML8UZwZ1PPLPoypZ713GzHvs9f2l29jTVQX2u8H9uSOLRu4n-fs/s288/menu9.gif); padding: 8px 0 0 35px; } #menu9 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZTsG6EYUyUR5oH2wtqb6q_fDFpOrG3wqwN4v-8ZeQ5pcWPST64TXL2zY1yhXHpazoftOYfBEKd6RUZ0UUwg2MeRj6ML8UZwZ1PPLPoypZ713GzHvs9f2l29jTVQX2u8H9uSOLRu4n-fs/s288/menu9.gif) 0 -32px; padding: 8px 0 0 35px; }

Dán vào HTML/Javacript
<div id="menu9"><ul><li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul></div>


Mẫu 2:

#menu6 ul { list-style: none; margin: 0; padding: 0; } #menu6 img { border: none; } #menu6 { width: 200px; margin: 10px; } #menu6 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu6 li a:link, #menu6 li a:visited { color: #8D9179; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgE3SQpf9RzRnX7heU6k6dTjsNfMnVZ9HGscQ7W85IGc_Z-B_pX7y6KonGw5jTZrUhTYxN-Um1k-tTFfjiUwcTG9v5s5NhFujXlrOS7dJDJlSKQjmc9Sna5gZJ32ONoOqeXyckkahQJLx4/); padding: 8px 0 0 10px; } #menu6 li a:hover, #menu6 li #current, #menu6 li a:active { color: #6C7250; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgE3SQpf9RzRnX7heU6k6dTjsNfMnVZ9HGscQ7W85IGc_Z-B_pX7y6KonGw5jTZrUhTYxN-Um1k-tTFfjiUwcTG9v5s5NhFujXlrOS7dJDJlSKQjmc9Sna5gZJ32ONoOqeXyckkahQJLx4/) 0 -32px; padding: 8px 0 0 10px; }<br />

Dán vào HTML/Javacritp
<div id="menu6"><ul><li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul></div>


Mẫu 3:

#menu3 ul { list-style: none; margin: 0; padding: 0; } #menu3 img { border: none; } #menu3 { width: 200px; border: 1px solid #ccc; margin: 10px; } #menu3 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu3 li a:link, #menu3 li a:visited { color: #888; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfbp6RxV2ymlrF8NvQOh4q9FKvav3Gb-y_J5KvOzuRu6Yp1yD6zCKdubA7VVdJL_9xG0a7rTbtCDuC0uEEhKToox8JQA6chPS84lpkBiZEEIe-hyh-7MnomaEaBdFvykgxDtIzq5Fikiw/); padding: 8px 0 0 30px; } #menu3 li a:hover, #menu3 li #current, #menu3 li a:active { color: #283A50; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfbp6RxV2ymlrF8NvQOh4q9FKvav3Gb-y_J5KvOzuRu6Yp1yD6zCKdubA7VVdJL_9xG0a7rTbtCDuC0uEEhKToox8JQA6chPS84lpkBiZEEIe-hyh-7MnomaEaBdFvykgxDtIzq5Fikiw/) 0 -32px; padding: 8px 0 0 30px; }<br />

Dán vào HTML/Javacritp
<div id="menu3"><ul><li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul></div>

Mẫu 4:

#menu6 ul { list-style: none; margin: 0; padding: 0; } #menu6 img { border: none; } #menu6 { width: 200px; margin: 10px; } #menu6 li a { font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu6 li a:link, #menu6 li a:visited { color: #FFF; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiT7dzWr2Ypi4C_7pLABd2jtvkixgi3fbLlYHpYcP_wQ2Uk8NfK7_G-4vOthLRBrZibPESozeMpB_1aRLJOWqUmtPzjn3p6mk-vnUAcb97ddoSxQ6I-zIhMMEUiXVyOhafOJpIcbawrxJY/); padding: 8px 0 0 20px; } #menu6 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiT7dzWr2Ypi4C_7pLABd2jtvkixgi3fbLlYHpYcP_wQ2Uk8NfK7_G-4vOthLRBrZibPESozeMpB_1aRLJOWqUmtPzjn3p6mk-vnUAcb97ddoSxQ6I-zIhMMEUiXVyOhafOJpIcbawrxJY/) 0 -32px; padding: 8px 0 0 20px; }

Dán vào HTML/Javacript
<div id="menu6"><ul><li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul></div>



Mẫu 5:

#menu14 ul { list-style: none; margin: 0; padding: 0; } #menu14 img { border: none; } #menu14 { width: 200px; margin: 10px; } #menu14 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu14 li a:link, #menu14 li a:visited { color: #fff; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh54afvSya4a_h5KEgR_9XMGLnIDxk07a7ijklIvwF_rNWY0uJrtaKuU4cY94Bc-TnpmBkJE3QbJ77z1H83Wf9xZk8pIs4m0zoO7gwd-YcaUuFQVMljL2MJ09HNbexm1ycQDVHiP1lSqBw/s800/menu14.gif) 0 -32px; padding: 8px 0 0 10px; } #menu14 li a:hover { color: #333; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh54afvSya4a_h5KEgR_9XMGLnIDxk07a7ijklIvwF_rNWY0uJrtaKuU4cY94Bc-TnpmBkJE3QbJ77z1H83Wf9xZk8pIs4m0zoO7gwd-YcaUuFQVMljL2MJ09HNbexm1ycQDVHiP1lSqBw/s800/menu14.gif); padding: 8px 0 0 10px; }

Dán vào HTML/Javacript
<div id="menu14"><ul><li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul></div>



Mẫu 6:

#menu7 ul { list-style: none; margin: 0; padding: 0; } #menu7 img { border: none; } #menu7 { width: 200px; margin: 10px; } #menu7 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu7 li a:link, #menu7 li a:visited { color: #FFF; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhX254Vxxm4VVI_xcjGVq-c6A-b6gxk0jooRgjXUi8sHw1fpN4W6zQ7y1pmCbZkO6R6M3mWrO9_HPPEN8ttPhKtn3LwWx725eUjYzaPI-dUFYYJrVr58T9iCx97IesC-YMhG9Lphw0RaCY/s800/menu7.gif); padding: 8px 0 0 30px; } #menu7 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhX254Vxxm4VVI_xcjGVq-c6A-b6gxk0jooRgjXUi8sHw1fpN4W6zQ7y1pmCbZkO6R6M3mWrO9_HPPEN8ttPhKtn3LwWx725eUjYzaPI-dUFYYJrVr58T9iCx97IesC-YMhG9Lphw0RaCY/s800/menu7.gif) 0 -32px; padding: 8px 0 0 30px; }

Dán vào HTML/Javacript
<div id="menu7"><ul><li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul></div>



Mẫu 7:

#menu2 ul { list-style: none; margin: 0; padding: 0; } #menu2 img { border: none; } #menu2 { width: 200px; border-style: solid solid none solid; border-color: #677D92; border-size: 1px; border-width: 1px; margin: 10px; } #menu2 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu2 li a:link, #menu2 li a:visited { color: #fff; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiHQC0imJJ9hRBJsxsl3huxWio0vD3ZVSbNjQBQEDChvm6K8t-WiT_QUwW2ClIJRqzxaoFB1LC9rv5c8E8epZrZoEqz_uxXyDQSnEq0CctD91_J06oc9EN0hKSk0RwxOLVv0Fmac9G5Rk/s800/menu2.gif); padding: 8px 0 0 10px; } #menu2 li a:hover, #menu2 li #current { color: #283A50; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiHQC0imJJ9hRBJsxsl3huxWio0vD3ZVSbNjQBQEDChvm6K8t-WiT_QUwW2ClIJRqzxaoFB1LC9rv5c8E8epZrZoEqz_uxXyDQSnEq0CctD91_J06oc9EN0hKSk0RwxOLVv0Fmac9G5Rk/s800/menu2.gif) 0 -32px; padding: 8px 0 0 10px; } #menu2 li a:active { color: #283A50; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiHQC0imJJ9hRBJsxsl3huxWio0vD3ZVSbNjQBQEDChvm6K8t-WiT_QUwW2ClIJRqzxaoFB1LC9rv5c8E8epZrZoEqz_uxXyDQSnEq0CctD91_J06oc9EN0hKSk0RwxOLVv0Fmac9G5Rk/s800/menu2.gif) 0 -64px; padding: 8px 0 0 10px; }

Dán vào HTML/Javacript
<div id="menu2"><ul><li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul></div>



Mẫu 8:

#menu9 ul { list-style: none; margin: 0; padding: 0; } #menu9 img { border: none; } #menu9 { width: 200px; margin-top: 10px; } #menu9 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu9 li a:link, #menu9 li a:visited { color: #E5E8D4; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6ieBtdKGzDYftedS4h5MveolOWp-Y6y7w_G5-euDCODBoW-9vb5FyEME39XvnwsAvhOvW0cUnQJJRUYCIJ0oEzWlouw9xd9gA2eeF6ac4IJJilYV86dbEQahzN9wClt_rPQEkk7ijYhs/s800/menu9.gif); padding: 8px 0 0 10px; } #menu9 li a:hover, #menu9 li #current { color: #725033; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6ieBtdKGzDYftedS4h5MveolOWp-Y6y7w_G5-euDCODBoW-9vb5FyEME39XvnwsAvhOvW0cUnQJJRUYCIJ0oEzWlouw9xd9gA2eeF6ac4IJJilYV86dbEQahzN9wClt_rPQEkk7ijYhs/s800/menu9.gif) 0 -32px; padding: 8px 0 0 10px; } #menu9 li a:active { color: #fff; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6ieBtdKGzDYftedS4h5MveolOWp-Y6y7w_G5-euDCODBoW-9vb5FyEME39XvnwsAvhOvW0cUnQJJRUYCIJ0oEzWlouw9xd9gA2eeF6ac4IJJilYV86dbEQahzN9wClt_rPQEkk7ijYhs/s800/menu9.gif) 0 -64px; padding: 8px 0 0 10px; }

Dán vào HTML/Javacript
<div id="menu9"><ul><li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul></div>



Mẫu 9:

#menu12 ul { list-style: none; margin: 0; padding: 0; } #menu12 img { border: none; } #menu12 { width: 200px; margin: 10px; } #menu12 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 22px; text-decoration: none; } #menu12 li a:link, #menu12 li a:visited { color: #666; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtLp0TX2BJV7ZfD9Ga5aESW9DaNVthyphenhyphenl3tyfX_pFz9H0svk-v0kLISxPbOajUpCIp987YgrPGLGYe8xSFpI6bhaSWDlmkORO4a6H3VN1ZVrPyEaZHRwqLRzDBBXC1kjEww7Ye-dVHzgqY/s800/menu12.gif); padding: 10px 0 0 35px; } #menu12 li a:hover { color: #000; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtLp0TX2BJV7ZfD9Ga5aESW9DaNVthyphenhyphenl3tyfX_pFz9H0svk-v0kLISxPbOajUpCIp987YgrPGLGYe8xSFpI6bhaSWDlmkORO4a6H3VN1ZVrPyEaZHRwqLRzDBBXC1kjEww7Ye-dVHzgqY/s800/menu12.gif) 0 -32px; padding: 10px 0 0 35px; }

Dán vào HTML/Javacript
<div id="menu12"><ul><li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul></div>



Mẫu 10:

#menu13 ul { list-style: none; margin: 0; padding: 0; } #menu13 img { border: none; } #menu13 { width: 200px; margin: 10px; } #menu13 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu13 li a:link, #menu13 li a:visited { color: #C7377D; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKJqizJkjX9heMdm7KRK7B5T76UE_HnYqWvFtBT-VfKFnpPvfYC7pXXiLbXKtEnl_546WI1G1wID1bLIPsFiELaL7osmwCFPAUILc3owZ_jRDpQdO3nHB4okMFPKO-CfuLkCqzytmGs9c/s800/menu13.gif); padding: 8px 0 0 10px; } #menu13 li a:hover { color: #C7377D; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKJqizJkjX9heMdm7KRK7B5T76UE_HnYqWvFtBT-VfKFnpPvfYC7pXXiLbXKtEnl_546WI1G1wID1bLIPsFiELaL7osmwCFPAUILc3owZ_jRDpQdO3nHB4okMFPKO-CfuLkCqzytmGs9c/s800/menu13.gif) 0 -32px; padding: 8px 0 0 10px; }

Dán vào HTML/Javacript
<div id="menu13"><ul><li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul></div>



Mẫu 11:

#menu4 ul { list-style: none; margin: 0; padding: 0; } #menu4 img { border: none; } #menu4 { width: 200px; border-style: solid solid none solid; border-color: #D76100; border-size: 1px; border-width: 1px; margin: 10px; } #menu4 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu4 li a:link, #menu4 li a:visited { color: #9E3C02; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj21_IeXUUrusqEVC9WoK3VPvxi0ujBmFPYNYNtMp92_9oN9gBvuGHyfJyiWPUmKstaUO1bkL6R8fdwfl-v758W3IHqa5ZZMRAs1ZPD311qXh14W5llrdBQtAbr9v3P12BcRE4QSSB2w_M/s800/menu4.gif); padding: 8px 0 0 30px; } #menu4 li a:hover, #menu4 li #current { color: #fff; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj21_IeXUUrusqEVC9WoK3VPvxi0ujBmFPYNYNtMp92_9oN9gBvuGHyfJyiWPUmKstaUO1bkL6R8fdwfl-v758W3IHqa5ZZMRAs1ZPD311qXh14W5llrdBQtAbr9v3P12BcRE4QSSB2w_M/s800/menu4.gif) 0 -32px; padding: 8px 0 0 30px; } #menu4 li a:active { color: #fff; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj21_IeXUUrusqEVC9WoK3VPvxi0ujBmFPYNYNtMp92_9oN9gBvuGHyfJyiWPUmKstaUO1bkL6R8fdwfl-v758W3IHqa5ZZMRAs1ZPD311qXh14W5llrdBQtAbr9v3P12BcRE4QSSB2w_M/s800/menu4.gif) 0 -64px; padding: 8px 0 0 30px; }

Dán vào HTML/Javacript
<div id="menu4"><ul><li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul></div>



Mẫu 12:

#navlist { color: white; background: #17a; border-bottom: 0.2em solid #17a; border-right: 0.2em solid #17a; padding: 0 1px; margin-left: 0; width: 20em; font: normal 10px Verdana, sans-serif; } #navlist li { list-style: none; margin: 0; font-size: 1em; } #navlist a { display: block; text-decoration: none; margin-bottom: 0.5em; margin-top: 0.5em; color: white; background: #39c; border-width: 1px; border-style: solid; border-color: #5bd #035 #068 #6cf; border-left: 1em solid #fc0; padding: 0.25em 0.5em 0.4em 0.75em; } #navlist a#current { border-color: #5bd #035 #068 #f30; } #navlist a { width: 99%; /* only necessary for Internet Explorer */ } #navlist a { voice-family: "\"}\""; voice-family: inherit; width: 9.6em; /* Tantek-hack should only used if Internet-Explorer 6 is in standards-compliant mode */ } #navcontainer>#navlist a { width: auto; /* only necessary if you use the hacks above for the Internet Explorer */ } #navlist a:hover, #navlist a#current:hover { background: #28b; border-color: #069 #6cf #5bd #fc0; padding: 0.4em 0.35em 0.25em 0.9em; } #navlist a:active, #navlist a#current:active { background: #17a; border-color: #069 #6cf #5bd white; padding: 0.4em 0.35em 0.25em 0.9em; }

Dán vào HTML/Javacritpt
<div id="navcontainer"><ul id="navlist"><li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul></div>



Mẫu 13:

#menu8 ul { list-style: none; margin: 0; padding: 0; } #menu8 img { border: none; } #menu8 { width: 200px; margin-top: 10px; } #menu8 li a { text-decoration: none; height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; } #menu8 li a:link, #menu8 li a:visited { color: #777; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyqs3pwAJUBY2GOBERJNyCTaiqqH_q1x6DtIGphr_GQxwXHeZoUXFOClzt2VGqI8xMM8f5x0hxq_OP-hrZH7_vIeYupYJFIL7Rz_n4ZuFC9rAUmXqbIQyhF3vJwImUR2N0CcNO02GEbLE/s800/menu8.gif); padding: 8px 0 0 20px; } #menu8 li a:hover, #menu8 li #current { color: #257EB7; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyqs3pwAJUBY2GOBERJNyCTaiqqH_q1x6DtIGphr_GQxwXHeZoUXFOClzt2VGqI8xMM8f5x0hxq_OP-hrZH7_vIeYupYJFIL7Rz_n4ZuFC9rAUmXqbIQyhF3vJwImUR2N0CcNO02GEbLE/s800/menu8.gif) 0 -32px; padding: 8px 0 0 25px; } #menu8 li a:active { color: #fff; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyqs3pwAJUBY2GOBERJNyCTaiqqH_q1x6DtIGphr_GQxwXHeZoUXFOClzt2VGqI8xMM8f5x0hxq_OP-hrZH7_vIeYupYJFIL7Rz_n4ZuFC9rAUmXqbIQyhF3vJwImUR2N0CcNO02GEbLE/s800/menu8.gif) 0 -64px; padding: 8px 0 0 25px; }

Dán vào HTML/Javacript
<div id="menu8"><ul><li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul></div>



Mẫu 14:

#menu8 ul { list-style: none; margin: 0; padding: 0; } #menu8 img { border: none; } #menu8 { width: 200px; margin: 10px; border-style: solid; border-color: #656556; border-size: 1px; border-width: 1px; } #menu8 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu8 li a:link, #menu8 li a:visited { color: #656556 ; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeHpSrcN7kIIgsXQqX4lN414ZMoJie9XDIrnSGKfYJ-_fs9tK-kgOIa3m4KoJMsL9CFfu74q6TK0ATkOvOqgBZ9Cp_phx4JqDkRwExGrzwdOxXxHfNZicoI7lLoEXKGm-n4GNltu-W55U/s800/menu8.gif) ; padding: 8px 0 0 20px; } #menu8 li a:hover { color: #474739; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeHpSrcN7kIIgsXQqX4lN414ZMoJie9XDIrnSGKfYJ-_fs9tK-kgOIa3m4KoJMsL9CFfu74q6TK0ATkOvOqgBZ9Cp_phx4JqDkRwExGrzwdOxXxHfNZicoI7lLoEXKGm-n4GNltu-W55U/s800/menu8.gif) 0 -32px; padding: 8px 0 0 20px; }

Dán vào HTML/Javacript
<div id="menu8"><ul><li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul></div>



Mẫu 15:

#menu9 body { font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; } #menu1 ul { list-style: none; margin: 0; padding: 0; } #menu1 img { border: none; } #menu1 { width: 200px; margin: 10px; border-style: solid solid none solid; border-color: #3D261D; border-size: 1px; border-width: 1px; } #menu1 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu1 li a:link, #menu1 li a:visited { color: #E4D6CD; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCA-JZ0d21nF7S4dnrjNoQnFKNHc0J07nrjuq089snhAtt_ov5W7SpWJa_8ovrmT4LNRg2J9Q0lYGZekPD0HINGTTlbQjhfADXOeVD5JK64z9NtUD7Su9xmsRVRrjK96Nc35kcE6IwwR0/s800/menu1.gif); padding: 8px 0 0 10px; } #menu1 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCA-JZ0d21nF7S4dnrjNoQnFKNHc0J07nrjuq089snhAtt_ov5W7SpWJa_8ovrmT4LNRg2J9Q0lYGZekPD0HINGTTlbQjhfADXOeVD5JK64z9NtUD7Su9xmsRVRrjK96Nc35kcE6IwwR0/s800/menu1.gif) 0 -32px; padding: 8px 0 0 10px; }

Dán vào HTML/Javacript
<div id="menu1"><ul><li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul></div>



Mẫu 16:

#navcontainer { background: #f0e7d7; width: 100%; margin: 0 auto; padding: 1em 0; font-family: georgia, serif; font-size: 13px; text-align: center; text-transform: lowercase; } ul#navlist { text-align: left; list-style: none; padding: 0; margin: 0 auto; width: 100%; } ul#navlist li { display: block; margin: 0; padding: 0; } ul#navlist li a { display: block; width: 100%; padding: 0.5em 0 0.5em 2em; border-width: 1px; border-color: #ffe #aaab9c #ccc #fff; border-style: solid; color: #777; text-decoration: none; background: #f7f2ea; } #navcontainer>ul#navlist li a { width: auto; } ul#navlist li#active a { background: #f0e7d7; color: #800000; } ul#navlist li a:hover, ul#navlist li#active a:hover { color: #800000; background: transparent; border-color: #aaab9c #fff #fff #ccc; }

Dán vào HTML/Javacript
<div id="navcontainer"><ul id="navlist"><li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul></div>



Mẫu 17:

#menu3 ul { list-style: none; margin: 0; padding: 0; } #menu3 img { border: none; } #menu3 { width: 200px; margin: 10px; border-style: solid solid none solid; border-color: #BCD2E6; border-size: 1px; border-width: 1px; } #menu3 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu3 li a:link, #menu3 li a:visited { color: #8BADCF; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggGh4jMDPWugc99uVSAERaJgTP8Po-mKAlk8hnaS94CXAb2GY41_GQZQUqh5zZiUJMPFf6FiEZjm66lwtf46UYoW4a8gVqFRnGyLBbZJsAUr-5uhcni0g__u_Ynop3ZO30J8Y6SS5h48s/s800/menu3.gif); padding: 8px 0 0 10px; } #menu3 li a:hover { color: #627EB7; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggGh4jMDPWugc99uVSAERaJgTP8Po-mKAlk8hnaS94CXAb2GY41_GQZQUqh5zZiUJMPFf6FiEZjm66lwtf46UYoW4a8gVqFRnGyLBbZJsAUr-5uhcni0g__u_Ynop3ZO30J8Y6SS5h48s/s800/menu3.gif) 0 -32px; padding: 8px 0 0 10px; }

Dán vào HTML/Javacript
<div id="menu3"><ul><li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul></div>



Mẫu 18:

#menu11 ul { list-style: none; margin: 0; padding: 0; } #menu11 img { border: none; } #menu11 { width: 200px; margin: 10px; border-style: solid solid none solid; border-color: #889944; border-size: 1px; border-width: 1px; } #menu11 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu11 li a:link, #menu11 li a:visited { color: #889944; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5CP0rUVSeq7_iPZbEzrLo4AeAu-j8CSMyqsQEYh9y2TqGbH-kgzrXHW7LIYJ3hEYcF08WkeEnQvyZXdv8HN-nYgYvzv6Er-32nlcqgcB5CPwcINUa54Q2ny9byO0eQUmC5AnzH7gDWmQ/s400/menu11.gif); padding: 8px 0 0 25px; } #menu11 li a:hover { color: #889944; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5CP0rUVSeq7_iPZbEzrLo4AeAu-j8CSMyqsQEYh9y2TqGbH-kgzrXHW7LIYJ3hEYcF08WkeEnQvyZXdv8HN-nYgYvzv6Er-32nlcqgcB5CPwcINUa54Q2ny9byO0eQUmC5AnzH7gDWmQ/s400/menu11.gif) 0 -32px; padding: 8px 0 0 27px; }


Dán vào HTML/Javacript
<div id="menu11"><ul><li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul></div>



Mẫu 19:

#button { width: 20em; border-right: 1px solid #000; padding: 0 0 1em 0; margin-bottom: 1em; font-family: Tahoma, Arial, sans-serif; /*'Trebuchet MS', 'Lucida Grande', Verdana, Arial, sans-serif;*/ font-size : 10px; background-color: #90bade; color: #333; } #button ul { list-style: none; margin: 0; padding: 0; border: none; } #button li { border-bottom: 1px solid #90bade; margin: 0; list-style: none; list-style-image: none; } #button li a { display: block; padding: 5px 5px 5px 0.5em; border-left: 10px solid #1958b7; border-right: 10px solid #508fc4; background-color: #2175bc; color: #fff; text-decoration: none; width: 100%; } html>body #button li a { width: auto; } #button li a:hover { border-left: 10px solid #1c64d1; border-right: 10px solid #5ba3e0; background-color: #2586d7; color: #fff; } #button li #active { border-left: 10px solid #1c64d1; border-right: 10px solid #5ba3e0; background-color: #2586d7; color: #fff; }<br />

Dán vào HTML/Javacript
<div id="button"><ul><li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul></div>



Mẫu 20:

#menu ul { list-style: none; margin: 0; padding: 0; } #menu img { border: none; } #menu { width: 200px; border-style: solid solid none solid; border-color: #94AA74; border-size: 1px; border-width: 1px; margin: 10px; } #menu li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu li a:link, #menu li a:visited { color: #5E7830; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiCl_BoIN2nVWYuRs24ba3a2goXnhagiaH6UE32VQS0lU7pz4SxBo7egSi1nImgc9BjKcpizg8XaNvFg3W8kSYwRq5stWPdT8nj-DB6yb6ScrZp8Ycq1BOvCsm0TclftVfX-5rCyhGdRE/s800/menu1.gif); padding: 8px 0 0 10px; } #menu li a:hover, #menu li #current { color: #26370A; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiCl_BoIN2nVWYuRs24ba3a2goXnhagiaH6UE32VQS0lU7pz4SxBo7egSi1nImgc9BjKcpizg8XaNvFg3W8kSYwRq5stWPdT8nj-DB6yb6ScrZp8Ycq1BOvCsm0TclftVfX-5rCyhGdRE/s800/menu1.gif) 0 -32px; padding: 8px 0 0 10px; } #menu li a:active { color: #26370A; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiCl_BoIN2nVWYuRs24ba3a2goXnhagiaH6UE32VQS0lU7pz4SxBo7egSi1nImgc9BjKcpizg8XaNvFg3W8kSYwRq5stWPdT8nj-DB6yb6ScrZp8Ycq1BOvCsm0TclftVfX-5rCyhGdRE/s800/menu1.gif) 0 -64px; padding: 8px 0 0 10px; }

Dán vào HTML/Javacript
<div id="menu"><ul><li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul></div>



Mẫu 21:

#menu2 ul { list-style: none; margin: 0; padding: 0; } #menu2 img { border: none; } #menu2 { width: 200px; margin: 10px; border-style: solid solid none solid; border-color: #D8D5D1; border-size: 1px; border-width: 1px; } #menu2 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu2 li a:link, #menu2 li a:visited { color: #3688BA; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjA6KfyLmToqvnXYpwjkvII1cqiCWZgeiNYBdLCcc60ptk3mbcw6lJ1DAqMcTUQI5qDOgX7aTadZFfJXKv7CzHFMVu2dpecbyFptc5Y0sMXIwzQmiIwbhjLFbjJYS3gq6p4hLUOmFld6x0/s800/menu2.gif); padding: 8px 0 0 30px; } #menu2 li a:hover { color: #3688BA; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjA6KfyLmToqvnXYpwjkvII1cqiCWZgeiNYBdLCcc60ptk3mbcw6lJ1DAqMcTUQI5qDOgX7aTadZFfJXKv7CzHFMVu2dpecbyFptc5Y0sMXIwzQmiIwbhjLFbjJYS3gq6p4hLUOmFld6x0/s800/menu2.gif) 0 -32px; padding: 8px 0 0 32px; }

Dán vào HTML/Javacript
<div id="menu2"><ul><li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul></div>



Mẫu 22:

#menu5 ul { list-style: none; margin: 0; padding: 0; } #menu5 img { border: none; } #menu5 { width: 200px; border-style: none solid none solid; border-color: #D0D0D0; border-width: 1px; margin: 10px; } #menu5 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu5 li a:link, #menu5 li a:visited { color: #777; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3azou0al-J1r1m4-K9ReZ38UiwLW-t7O5D9y8JIyYB3lWwjXC9_GZ0n-yv-6VHIQkkcIIhuwonWNUxm9od0v5jTBCUX_FE93iflwmWgBeXLO5cw8gQJHDZbYnSNSotsKJrTqtp-Cq6eI/s800/menu5.gif); padding: 8px 25px 0 10px; text-align: right; } #menu5 li a:hover, #menu5 li #current { color: #fff; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3azou0al-J1r1m4-K9ReZ38UiwLW-t7O5D9y8JIyYB3lWwjXC9_GZ0n-yv-6VHIQkkcIIhuwonWNUxm9od0v5jTBCUX_FE93iflwmWgBeXLO5cw8gQJHDZbYnSNSotsKJrTqtp-Cq6eI/s800/menu5.gif) 0 -32px; padding: 8px 25px 0 10px; text-align: right; } #menu5 li a:active { color: #fff; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3azou0al-J1r1m4-K9ReZ38UiwLW-t7O5D9y8JIyYB3lWwjXC9_GZ0n-yv-6VHIQkkcIIhuwonWNUxm9od0v5jTBCUX_FE93iflwmWgBeXLO5cw8gQJHDZbYnSNSotsKJrTqtp-Cq6eI/s800/menu5.gif) 0 -64px; padding: 8px 25px 0 10px; text-align: right; }

Dán vào HTML/Javacript
<div id="menu5"><ul><li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul></div>



Mẫu 23:

#menu5 ul { list-style: none; margin: 0; padding: 0; } #menu5 img { border: none; } #menu5 { width: 200px; margin: 10px; } #menu5 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu5 li a:link, #menu5 li a:visited { color: #FFF; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHQWFKTcnDo_QxBK3i9TdzbmOd23GElFhRnq4T9aMpsxC6I8CKnArDKUqCm8pw2uPj6fdj6C3GbQ2_9WJioHCF5wQEuM7l0PqJ7Ag4wfgLqX9NvFIeG7p7PtHfW5T-n1isUHGgTByOPqE/s800/menu5.gif); padding: 8px 0 0 10px; } #menu5 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHQWFKTcnDo_QxBK3i9TdzbmOd23GElFhRnq4T9aMpsxC6I8CKnArDKUqCm8pw2uPj6fdj6C3GbQ2_9WJioHCF5wQEuM7l0PqJ7Ag4wfgLqX9NvFIeG7p7PtHfW5T-n1isUHGgTByOPqE/s800/menu5.gif) 0 -32px; padding: 8px 0 0 10px; }


Dán vào HTML/Javacript
<div id="menu5"><ul><li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul></div>



Mẫu 24:

#menu4 ul { list-style: none; margin: 0; padding: 0; } #menu4 img { border: none; } #menu4 { width: 200px; margin: 10px; border-style: solid solid none solid; border-color: #000; border-size: 1px; border-width: 1px; } #menu4 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu4 li a:link, #menu4 li a:visited { color: #CCC; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjo6PaEo5MYcfmGydcVbfmGDMFTHcuZMD8VS0Jen_IayiSzmYQmH4UITx3_HO2J3tZ3mhMQVA0fxkX3RM3sZLsVyqGPVoHxfHsYqbQ7kpIKUJR2bf_iy5O2fHpV2abnIxVYaSFMFG8E5Sg/s800/menu4.gif); padding: 8px 0 0 10px; } #menu4 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjo6PaEo5MYcfmGydcVbfmGDMFTHcuZMD8VS0Jen_IayiSzmYQmH4UITx3_HO2J3tZ3mhMQVA0fxkX3RM3sZLsVyqGPVoHxfHsYqbQ7kpIKUJR2bf_iy5O2fHpV2abnIxVYaSFMFG8E5Sg/s800/menu4.gif) 0 -32px; padding: 8px 0 0 10px; }

Dán vào HTML/Javacript
<div id="menu4"><ul><li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul></div>



Mẫu 25:

#menu10 ul { list-style: none; margin: 0; padding: 0; } #menu10 img { border: none; } #menu10 { width: 200px; margin: 10px; } #menu10 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu10 li a:link, #menu10 li a:visited { color: #4D4D4D; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcj4xttJA89r32NUl5wEs-Ak1jvcqphKSbXfqjC-CU14ArMpqmha9LcQKyHXCbYKf6mJJXGsa43Ke2wmvFs2utmO2xyA1kgBgmIc2o7s_P4u5POHhNZ6PhAGRnkZHb4PnoCvhorFPn8Vs/s800/menu10.gif); padding: 8px 0 0 10px; } #menu10 li a:hover { color: #FF9834; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcj4xttJA89r32NUl5wEs-Ak1jvcqphKSbXfqjC-CU14ArMpqmha9LcQKyHXCbYKf6mJJXGsa43Ke2wmvFs2utmO2xyA1kgBgmIc2o7s_P4u5POHhNZ6PhAGRnkZHb4PnoCvhorFPn8Vs/s800/menu10.gif) 0 -32px; padding: 8px 0 0 10px; }

Dán vào HTML/Javacript
<div id="menu10"><ul><li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul></div>v style="text-align: justify;"><br /> <span style="font-size: large;"></span></div>



CHÚC CÁC BẠN CÓ MỘT MENU DỌC ĐẸP CHO BLOG

More about →