Tạo Menu với hiệu ứng hình ảnh đẹp mắt Blogger/Website

Để Thêm  Menu với hiệu ứng hình ảnh đẹp mắt Blogger/Website
1. Đăng nhập vào tài khoản Blogger
2. Vào phần Mẫu (Template)
3. Chọn chỉnh sửa HTML (Edit HTML)
4. Chèn code bên dưới vào nơi cần hiển thị menu:

<style>
#fbt-nav {margin:0 auto;list-style: none;width: 965px;height: 86px;overflow-y: hidden;}
#fbt-nav li {float: left;}
#fbt-nav li a {display: block;color: white;width: 120px;height: 61px;margin-top: 24px;text-decoration: none;text-align: center;}
#fbt-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);}
#fbt-nav li a img {position: relative;top: 0;transition: top .5s ease;}
#fbt-nav li a:hover {cursor: pointer;}
#fbt-nav li a:hover img {top: -85px;}
#fbt-nav li a:hover .aname {top: 85px;}
#fbt-nav li:nth-child(1) a {background: #150517;border-radius: 5px 0 0 5px;}
#fbt-nav li:nth-child(2) a {background: #3E3535;}
#fbt-nav li:nth-child(3) a {background: #4A4344;}
#fbt-nav li:nth-child(4) a {background: #595454;}
#fbt-nav li:nth-child(5) a {background: #616D7E;}
#fbt-nav li:nth-child(6) a {background: #5E5A80;}
#fbt-nav li:nth-child(7) a {background: #2B60DE;}
#fbt-nav li:nth-child(8) a {background: #38ACEC;border-radius: 0 5px 5px 0;}
</style>

<div id="fbt-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>

Đối với website cũng tương tự các bạn chỉ cần đặt code trên vào nơi cần hiển thị

Demo đây Menu với hiệu ứng hình ảnh đẹp mắt Blogger/Website Anh Em nhé:

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

Nguồn : iChiaSe.Biz

Tag : HTML & CSS, Thủ Thuật Blogger