Cara Membuat Menu Cantik dengan Gambar di Blogger

Banyak sekali template blog telah menyajikan gadget yang menarik , yang mungkin mengganggu beberapa " simpatisan baik " , seperti yang terjadi dengan sebuah posting dalam sebuah halaman yang luar biasa .

Untuk menemukan semua posting dengan menu , cukup tekan pada label cari. Tapi siapa yang menulis komentar tersebut dikenal oleh semua orang , karena semua orang  setelah kami menerima " cara " bagaimana melakukan pekerjaan dengan lebih baik .

Terima kasih banyak untuk mereka yang ingin "baik , yang terbaik . "Mari kita kembali ke topik kita maka satu sentuhan menu berwarna-warni menggunakan mouse sensitif .


Langsung saja yah !Menggunakannya sebagai gadget di bawah header atau rendah di bawah posting .  
Buka Blogger >>Template >>
Cari Kode  # outer - wrapper  


Silahkan copy kode dibawah ini. Dan letakkan kode ini di bawah  # outer - wrapper
Jika sudah di simpan templatenya.

<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>