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 →

TẠO HỘP DỊCH CÓ HÌNH CÁC LÁ CỜ CHO BLOGGER (Kiểu 1)

Trước đây tôi đã chia sẻ với các bảng cách tạo hộp dịch (Translator) trên Blog (Xem hướng dẫn TẠI ĐÂY).

Hôm nay, tôi chia sẻ thêm cho các bạn một tiện ích rất đẹp là gắn vào Blog một hộp dịch có các lá cờ các nước.

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 trong khung này vào và lưu lại là xong

<style type="text/css">.w2bgft{padding:5px;}.w2bgft input{padding:1px;margin-left:1px;border:1px solid #ccc;}.w2bgft input:hover{border:1px solid #ff0000;}</style><div class="w2bgft"><!--Google Flag Translator by way2blogging.org--><form action="http://www.google.com/translate"><script language="JavaScript">document.write ("<input name=u value="+location.href+" type=hidden>")</script><noscript><a href="http://www.way2blogging.org/">Way2blogging</a></noscript><input value="en" name="hl" type="hidden"/><input value="UTF8" name="ie" type="hidden"/><input value="" name="langpair" type="hidden"/><input onclick="this.form.langpair.value=this.value" title="English" value="auto|en" type="image" height="20" src="http://www.google.com/images/flags/uk_flag.gif" width="30" name="langpair"/><input onclick="this.form.langpair.value=this.value" title="Chinese Simplified" value="auto|zh-CN" type="image" height="20" src="http://www.google.com/images/flags/cn_flag.gif" width="30" name="langpair"/><input onclick="this.form.langpair.value=this.value" title="Greek" value="auto|el" type="image" height="20" src="http://www.google.com/images/flags/gr_flag.gif" width="30" name="langpair"/><input onclick="this.form.langpair.value=this.value" title="Hindu" value="auto|hi" type="image" height="20" src="http://www.google.com/images/flags/in_flag.gif" width="30" name="langpair2"/><input onclick="this.form.langpair.value=this.value" title="German" value="auto|de" type="image" height="20" src="http://www.google.com/images/flags/de_flag.gif" width="30" name="langpair"/><input onclick="this.form.langpair.value=this.value" title="Dutch" value="auto|nl" type="image" height="20" src="http://www.google.com/images/flags/nl_flag.gif" width="30" name="langpair2"/><input onclick="this.form.langpair.value=this.value" title="Russian" value="auto|ru" type="image" height="20" src="http://www.google.com/images/flags/ru_flag.gif" width="30" name="langpair2"/><input onclick="this.form.langpair.value=this.value" title="Bulgarian" value="auto|bg" type="image" height="20" src="http://www.google.com/images/flags/bg_flag.gif" width="30" name="langpair2"/><input onclick="this.form.langpair.value=this.value" title="Polish" value="auto|pl" type="image" height="20" src="http://www.google.com/images/flags/pl_flag.gif" width="30" name="langpair2"/><input onclick="this.form.langpair.value=this.value" title="Czech" value="auto|cs" type="image" height="20" src="http://www.google.com/images/flags/cz_flag.gif" width="30" name="langpair2"/><input onclick="this.form.langpair.value=this.value" title="Croatian" value="auto|hr" type="image" height="20" src="http://www.google.com/images/flags/hr_flag.gif" width="30" name="langpair2"/><input onclick="this.form.langpair.value=this.value" title="French" value="auto|fr" type="image" height="20" src="http://www.google.com/images/flags/fr_flag.gif" width="30" name="langpair"/><input onclick="this.form.langpair.value=this.value" title="Italian" value="auto|it" type="image" height="20" src="http://www.google.com/images/flags/it_flag.gif" width="30" name="langpair"/><input onclick="this.form.langpair.value=this.value" title="Portuguese" value="auto|pt" type="image" height="20" src="http://www.google.com/images/flags/pt_flag.gif" width="30" name="langpair"/><input onclick="this.form.langpair.value=this.value" title="Spanish" value="auto|es" type="image" height="20" src="http://www.google.com/images/flags/es_flag.gif" width="30" name="langpair"/><input onclick="this.form.langpair.value=this.value" title="Arabic" value="auto|ar" type="image" height="20" src="http://www.google.com/images/flags/sa_flag.gif" width="30" name="langpair2"/><input onclick="this.form.langpair.value=this.value" title="Japanese" value="auto|ja" type="image" height="20" src="http://www.google.com/images/flags/ja_flag.gif" width="30" name="langpair"/><input onclick="this.form.langpair.value=this.value" title="Korean" value="auto|ko" type="image" height="20" src="http://www.google.com/images/flags/kr_flag.gif" width="30" name="langpair"/><input onclick="this.form.langpair.value=this.value" title="Chinese (traditional)" value="auto|zh-TW" type="image" height="20" src="http://www.google.com/images/flags/tw_flag.gif" width="30" name="langpair2"/><input onclick="this.form.langpair.value=this.value" title="Danish" value="auto|da" type="image" height="20" src="http://www.google.com/images/flags/dk_flag.gif" width="30" name="langpair2"/><input onclick="this.form.langpair.value=this.value" title="Finnish" value="auto|fi" type="image" height="20" src="http://www.google.com/images/flags/fi_flag.gif" width="30" name="langpair2"/><input onclick="this.form.langpair.value=this.value" title="Norwegian" value="auto|no" type="image" height="20" src="http://www.google.com/images/flags/no_flag.gif" width="30" name="langpair2"/><input onclick="this.form.langpair.value=this.value" title="Swedish" value="auto|sv" type="image" height="20" src="http://www.google.com/images/flags/se_flag.gif" width="30" name="langpair2"/><input onclick="this.form.langpair.value=this.value" title="Catalan" value="auto|ca" type="image" height="20" src="http://www.google.com/images/flags/cl_flag.gif" width="30" name="langpair2"/><input onclick="this.form.langpair.value=this.value" title="Filipino" value="auto|tl" type="image" height="20" src="http://www.google.com/images/flags/ph_flag.gif" width="30" name="langpair2"/><input onclick="this.form.langpair.value=this.value" title="Hebrew" value="auto|iw" type="image" height="20" src="http://www.google.com/images/flags/il_flag.gif" width="30" name="langpair2"/><input onclick="this.form.langpair.value=this.value" title="Indonesian" value="auto|id" type="image" height="20" src="http://www.google.com/images/flags/id_flag.gif" width="30" name="langpair2"/><input onclick="this.form.langpair.value=this.value" title="Latvian" value="auto|lv" type="image" height="20" src="http://www.google.com/images/flags/lv_flag.gif" width="30" name="langpair2"/><input onclick="this.form.langpair.value=this.value" title="Lithuanian" value="auto|lt" type="image" height="20" src="http://www.google.com/images/flags/lt_flag.gif" width="30" name="langpair2"/><input onclick="this.form.langpair.value=this.value" title="Serbian" value="auto|sr" type="image" height="20" src="http://www.google.com/images/flags/rs_flag.gif" width="30" name="langpair2"/><input onclick="this.form.langpair.value=this.value" title="Slovak" value="auto|sk" type="image" height="20" src="http://www.google.com/images/flags/sk_flag.gif" width="30" name="langpair2"/><input onclick="this.form.langpair.value=this.value" title="Slovenian" value="auto|sl" type="image" height="20" src="http://www.google.com/images/flags/si_flag.gif" width="30" name="langpair2"/><input onclick="this.form.langpair.value=this.value" title="Ukrainian" value="auto|uk" type="image" height="20" src="http://www.google.com/images/flags/ua_flag.gif" width="30" name="langpair2"/><input onclick="this.form.langpair.value=this.value" title="Vietnamese" value="auto|vi" type="image" height="20" src="http://www.google.com/images/flags/vn_flag.gif" width="30" name="langpair2"/><span style="float:right;margin:3px 5px;font-size:10px;"></span></form></div>

More about →

TẠO LOGO HIỂN THỊ THEO THỜI GIAN ĐỊNH TRƯỚC

Để trao đổi liên kết với các blog khác và để không chiếm không gian của Blog, bạn có thể tạo các logo liên kết chạy ngang (xem hướng dẫn TẠI ĐÂY) hoặc thiết lập thời gian hiển thị logo do mình định trước bằng cách sau:

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

<div id="logoexc" align="center">Loading Logos...</div><script type="text/javascript"> var avx = new Array(); var avy = new Array(); avx[0]="http://dunghennessy.blogspot.com/"; avy[0]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghqY0sM2Dll2RSsP9b244CGEJzxivng1s4wuF2o-KESfyUTQdjCp090JUYlsfTAwtT-SqONM2W_Ekkj5WAVZVGUvghwD9dFDNiIF3msM8gdvhn1fO5KsBsQOspF_MKjGcW5O_Lw6PKrtSi/s1600/coollogo_com-3196211867.gif"; avx[1]="http://vudinhhao.blogspot.com/"; avy[1]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGbOSzRX3MgWCHeyk43-DOmiNnZCZEvIhD5EQpM-BpN3YTZ_7_B6qrgpWuv4P2-ohDn0jG7kUjQa8hIx2SZHtfjwU4It1uOkOVHh-DmmRVEbd18rkFtxKdNb5KszxGR8uBw5xjpc3CjlGr/s1600/Mau.jpg"; avx[2]="http://dungheineken.blogspot.com"; avy[2]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLREWJnTNH5zEx-KHgIcgJnaSPXPk41DZ-VPd14-ZfTZNMsSbcsN4z7V8nsFdkCCjZJ2za_zHp0yVBjhERh1jHy39EfZ7CkkfiWahTNr9hhydhRjy8aZ9o_OPhbgSwdjwAbNoT-iqJiFzW/s1600/coollogo_com-21114715.gif"; avx[3]="http://kimduccz.blogspot.com/"; avy[3]="http://cdn-img1.imagechef.com/w/110418/anmf286ea510734b0a6.gif"; avx[4]="http://www.docchieu.tk/"; avy[4]="https://lh5.googleusercontent.com/_GyL6s5zl6bA/Ta7mf3QvnnI/AAAAAAAAAE8/xWssT3dzyMo/docchieulogo.png"; avx[5]="http://dunghennessy.blogspot.com/"; avy[5]="http://69.42.73.15/netfu/tmp20020/coollogo_com-13776178.gif"; target = "_blank"; rnd = "x"; numlg = 2; // số logo hiển thị mỗi lần width = 200; // chiều rộng của logo height = 80; // chiều cao của logo border = 1; margin = 2; space = "<br/>"; intervan = 5; // thời gian thay đổi logo tính bằng giây (s) </script><br /> <script src="http://traidatmui-tips.googlecode.com/files/changed_logo.js" type="text/javascript"></script>

Bây giờ, bạn có thể thay thế các địa chỉ Blog và link ảnh mà bạn muốn liên kết ở các dòng:

avx[0]="http://www.dungheineken.blogspot.com/";
avy[0]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLREWJnTNH5zEx-KHgIcgJnaSPXPk41DZ-VPd14-ZfTZNMsSbcsN4z7V8nsFdkCCjZJ2za_zHp0yVBjhERh1jHy39EfZ7CkkfiWahTNr9hhydhRjy8aZ9o_OPhbgSwdjwAbNoT-iqJiFzW/s1600/coollogo_com-21114715.gif ";

Cho đến avx[5]

              avy[5]

Nếu muốn thêm liên kết thì bạn cứ copy 2 dòng trên và đổi số hiển thị với số thứ tự tiếp theo.

Ví dụ: ở code trên chỉ có 6 liên kết (tính cả số 0), bây giờ bạn muốn thêm 1 liên kết nữa thì copy 2 dòng trên và đổi thành avx[6] và avy[6] là xong.
Với code trên sẽ là như vầy:

Loading Logos...

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

More about →

TẠO MỤC CÁC BÀI CÙNG CHỦ ĐỀ CHO BLOGGER

Để cho bạn đọc dễ tìm kiếm các bài cùng chủ đề trên Blog, bạn có thể tạo mục "Các bài cùng chủ đề hoặc cùng nhãn" phía dưới các bài đăng.

Đầu tiên bạn đăng nhập VÀO ĐÂY, bạn nhập các thông tin cần thiết  mà trang Web yêu cầu và bấm vào GET WIDGET để thêm tiện ích.

Một trang hướng dẫn cài đặt Linkwithin hiện ra, bạn nhấn Install Widget.

Và nhấn Thêm tiện ích để gắn vào Blog và di chuyển tiện ích LinkWithin xuống phía dưới bài đăng.

Bây giờ bạn quay trở về blog sẽ thấy  mục "You may also like"  hiển thị phía dưới các bài đăng trên trang chủ .Bạn có thể thay đổi dòng chữ khác (ví dụ: "bạn có thể xem thêm" hoặc "bài cùng chủ đề" hay "bài cùng nhãn"...) bằng cách vào chỉnh sửa tiện ích LinkWithin 

Rồi dán đoạn code này vào phía trên code mặc định của LinkWithin

<script>linkwithin_text='Bạn cũng có thể xem thêm:'</script>

Với cách làm trên thì tiện ích LinkWithin sẽ hiển thị dưới các bài đăng trên trang chủ, nếu muốn tiện ích này không xuất hiện ở trang chủ chỉ xuất hiện ở mỗi bài đăng thì bạn cần làm thêm bước sau:

Đăng nhập vào Blog > Thiết kế > Chỉnh sửa tiện ích LinkWithin và thêm các đoạn code sau vào phía trên và phía dưới đoạn code mặc định của LinkWithin.

Thêm phía trên:

<b:if cond='data:blog.pageType == "item"'>

Thêm phía dưới:

</b:if>

Bạn xem hình sẽ rõ:

Sau khi thêm xong bạn copy toàn bộ code trong khung và xoá hẳn tiện ích này ra khỏi Blog của bạn.
Tiếp theo bạn vào chỉnh sửa HTML, đánh dấu chọn mở rộng tiện ích, bấm đồng thời hai phím Ctrl+F để mở khung tìm kiếm và gõ vào khung đoạn code sau: <div class='post-footer'> 
Và dán toàn bộ code mà bạn đã copy của tiện ích LinkWithin dán phía trên nó và Save lại là xong.

More about →