Ngày Thứ Ba, 13 tháng 11, 2012 Blog của Báo Mới Hà Nội chia sẻ với bạn đọc bài viết Tạo menu lật dạng trượt giống Namkna Blog
Chúc bạn xem tin tức vui vẻ !!
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Á
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;}* 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.
#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/AVvXsEjdk-kGGWsLQa-0TTCwO2gD_Wvf8iQfZo2Wp3V81yv4zMQH4Vj0q8MuLiiEhhzcFo8LHl6TmBQldivew-qMBkfjvMFx1Tu417_Dtx79Cf7aBev3mtbyZxkxIeHeBl0VD_LK07Sl_ub8Va4/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/AVvXsEjdk-kGGWsLQa-0TTCwO2gD_Wvf8iQfZo2Wp3V81yv4zMQH4Vj0q8MuLiiEhhzcFo8LHl6TmBQldivew-qMBkfjvMFx1Tu417_Dtx79Cf7aBev3mtbyZxkxIeHeBl0VD_LK07Sl_ub8Va4/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>
* 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 !!!
Không có nhận xét nào:
Đăng nhận xét