Tạo menu lật dạng trượt giống Namkna Blog

Mong muốn đem lại sự mới mẽ và nhiều hứng thú hơn khi thiết kế blogspot. Hôm nay, Tanchau123 sẽ tiếp tục share cho các bạn nào có nhu cầu dùng "menu lật dạng trượt giống Namkna Blog". Mong là sẽ nhận được nhiều ý kiến phản hồi. Thủ thuật lần này cũng kết hợp sử dụng CSS và HTML nên tốc độ load rất nhanh cũng như hiển thị tốt trên Google, Firefox, I.E...

LIVE DEMO XEM BÊN DƯỚI NHÁ

• Hài Xuân 2012
• Hài Châu Tinh Trì
• Hài Chọn Lọc
• Phim Hành Động
• Phim Bộ 2011
• Phim Hoạt Hình
• Thư Giãn Cuối Tuần
• Quà Tặng Cuộc Sống
• Khoảnh Khắc Kỳ Diệu
• Clip Hài Hay
• Nhạc Dace Nonstop
• Thám tử lừng danh Conan
• Game Flast
• Học Tập
• Truyện Cổ Tích
• Thủ Thuật World-PPT
• Yahoo Messenger

BẮT ĐẦU THỦ THUẬT:
1. Đăng nhập Blogger.
2. Vào Bố cục  => Thêm tiện ích => HTML/Javascript.
3. Copy và paste toàn bộ code sau vào.

<style>#menulaber ul { list-style: none; margin: 0; padding: 0;}
#menulaber img {border: none; } #menulaber { width: 240px; margin: 10px; }
#menulaber 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; }
#menulaber li a:link, #menulaber li a:visited {  color: #666; display: block; background:  url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGYQoO44727pjnDix5vOBzHpp8f8ggz6PgwlZ-p7PG7-942Jcg4OFBIRrjdj8KnAZaQDQ3MM80DX5Cc2C9u3wAmMxOGIrV028N65H_Jpqm6Qh9Slb0sF4mp2gHY-pjokcae25R-NIiIag/s1600/menu-home-namkna-ngoctra.png);  padding: 10px 0 0 35px; }
#menulaber li a:hover { color: #000; background:   url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGYQoO44727pjnDix5vOBzHpp8f8ggz6PgwlZ-p7PG7-942Jcg4OFBIRrjdj8KnAZaQDQ3MM80DX5Cc2C9u3wAmMxOGIrV028N65H_Jpqm6Qh9Slb0sF4mp2gHY-pjokcae25R-NIiIag/s1600/menu-home-namkna-ngoctra.png)  0 -32px; padding: 10px 0 0 35px; }
</style>
<div id="menulaber">
 <ul>
<li><a href="/2011/12/tuyen-tap-hai-xuan-2012.html">Hài Xuân 2012</a></li>
<li><a href="/2011/01/hai-chau-tinh-tri-cuc-hay.html">Hài Châu Tinh Trì</a></li>
<li><a href="/2011/03/phim-hai-chon-loc.html">Hài Chọn Lọc</a></li>
<li><a href="/2011/02/phim-hanh-ong-tuyen-chon.html">Phim Hành Động</a></li>
<li><a href="/2011/03/phim-bo.html">Phim Bộ 2011</a></li>
<li><a href="/2011/02/phim-hoat-hinh.html">Phim Hoạt Hình</a></li>
<li><a href="/2011/02/thu-gian-cuoi-tuan-full.html">Thư Giãn Cuối Tuần</a></li>
<li><a href="/2011/02/qua-tang-cuoc-song_7172.html">Quà Tặng Cuộc Sống</a></li>
<li><a href="/2011/12/khoanh-khac-ky-dieu-tuyen-tap.html">Khoảnh Khắc Kỳ Diệu</a></li>
<li><a href="/2011/01/clip-funny.html">Clip Hài Hay</a></li>
<li><a href="/2011/03/nhac-nhap.html">Nhạc Dace Nonstop</a></li>
<li><a href="/2011/07/tham-tu-lung-danh-conan-full-tron-bo.html">Thám tử lừng danh Conan</a></li>
<li><a href="/2011/03/game-vui-flast.html">Game Flast</a></li>
<li><a href="/search/label/Study">Học Tập</a></li>
<li><a href="/search/label/TruyenCoTich">Truyện Cổ Tích</a></li>
<li><a href="/search/label/World-PPT">Thủ Thuật World-PPT</a></li>
<li><a href="/search/label/Yahoo">Yahoo Messenger</a></li></ul></div>

* Chỉnh sữa các tiêu đề và link liên kết đến tiêu đề lại sao cho phù hợp với nhu cầu của bạn.
* Nếu không muốn hiển thị logo của Namkna  thì bỏ background position 0 -32px trong đoạn code trên.
4. Lưu lại và xem kết quả nhé.
Chúc các bạn thành công !!!