CSS Animated Menu đẹp mắt cho Blogger/Blogspot

Bài viết này mình sẽ chia sẻ tới các bạn cách tạo một thanh menu chuyên nghiệp dạng động (animated) cho Blogger. Các bạn có thể xem LIVE DEMO và xem các bước thực hiện thủ thuật dưới đây:

Bước 1: Tại trang quản trị blog, các bạn vào Bố cục, tạo một tiện ích HTML/JavaScript.

Bước 2: Paste đoạn code sau vào phần nội dung:

<!--CSS Animated Menu :: kjmagic.blogspot.com-->
<style type="text/css">
#kjmagic-nav {margin:0 auto;list-style: none;width: 965px;height: 86px;overflow-y: hidden;}
#kjmagic-nav li {float: left;}
#kjmagic-nav li a {display: block;color: white;width: 120px;height: 61px;margin-top: 24px;text-decoration: none;text-align: center;}
#kjmagic-nav li a span.aname {font: bold 17px/61px "Arial";color: #fff;text-transform: uppercase;cursor: pointer;position: relative;top: 0;transition: top .5s ease;text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);}
#kjmagic-nav li a img {position: relative;top: 0;transition: top .5s ease;}
#kjmagic-nav li a:hover {cursor: pointer;}
#kjmagic-nav li a:hover img {top: -85px;}
#kjmagic-nav li a:hover .aname {top: 85px;}
#kjmagic-nav li:nth-child(1) a {background: #150517;border-radius: 5px 0 0 5px;}
#kjmagic-nav li:nth-child(2) a {background: #3E3535;}
#kjmagic-nav li:nth-child(3) a {background: #4A4344;}
#kjmagic-nav li:nth-child(4) a {background: #595454;}
#kjmagic-nav li:nth-child(5) a {background: #616D7E;}
#kjmagic-nav li:nth-child(6) a {background: #5E5A80;}
#kjmagic-nav li:nth-child(7) a {background: #2B60DE;}
#kjmagic-nav li:nth-child(8) a {background: #38ACEC;border-radius: 0 5px 5px 0;} 
/* CSS Animated Menu :: kjmagic.blogspot.com */
</style> 
<div id="kjmagic-nav">
<li> <a href="/"><span class="aname">Homepage</span> <img src="http://icons.iconarchive.com/icons/oxygen-icons.org/oxygen/48/Places-user-home-icon.png" /> </a> </li>
<li> <a href="#"> <span class="aname">Archive</span> <img src="http://icons.iconarchive.com/icons/kearone/comicons/48/zip-software-icon.png" /> </a> </li>
<li> <a href="#"> <span class="aname">About me</span> <img src="http://icons.iconarchive.com/icons/aha-soft/standard-portfolio/48/About-icon.png" /> </a> </li>
<li> <a href="#"> <span class="aname">Our Blog</span> <img src="http://icons.iconarchive.com/icons/scoyo/badge/48/My-Blog-icon.png" /> </a> </li>
<li> <a href="#"><span class="aname">Science</span> <img src="http://icons.iconarchive.com/icons/iconshock/real-vista-education/48/technology-icon.png" /> </a> </li>
<li> <a href="#"><span class="aname"> Sports  </span> <img src="http://icons.iconarchive.com/icons/itzikgur/my-seven/48/Games-Soccer-icon.png" /> </a> </li>
<li> <a href="#"><span class="aname">Photos</span> <img src="http://icons.iconarchive.com/icons/apathae/satellite/48/2-Pictures-icon.png" /> </a> </li>
<li> <a href="#"> <span class="aname">Contact</span> <img src="http://icons.iconarchive.com/icons/deleket/soft-scraps/48/Email-Download-icon.png" /> </a> </li>
</div>
<!--/CSS Animated Menu :: kjmagic.blogspot.com-->

* Trong đó:
- Những chỗ màu đỏ là link của bạn.
- Những chỗ in nghiêng là tên link tương ứng.
- Những dòng in đậm là link ảnh, các bạn có thể sửa thành link ảnh của mình.

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