Active Blending Horizontal Menu

Beberapa waktu lalu saya pernah memposting beberapa cara membuat horizontal menu dengan berbagai tampilan. Namun semua itu lebih cocok untuk template yang berwarna putih cerah atau berwarna terang. Kali ini saya akan posting horizontal menu gelap dengan efek blending. Widget ini lebih cocok untuk template gelap, namun saya rasa juga bisa cocok dengan template berwarna gelap. Masalah selera kembali pada cocok atau tidak cocok menurut anda. Baiklah, sekarang mari kita bahas cara membuat active blending horizontal menu. Ikuti langkah berikut.

Log in ke blogger
Klik Template
Klik Edit HTML
Klik Lanjutkan
Selanjutnya masukkan kode berikut di atas kode </head>

<style>
*{padding:0; border:0; margin:0}
#default a,
#example a{display:block; width:90px; height:46px; margin-right:3px; float:left; background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgO_PFc6ssxKD3dfOBZFaN7PuK3UbN7xmTG_ZCGXeZvkzxcRZtFewABgS0xmLiqQncXV6n1-1MwpZ1iIpkMMqcOtIF1n8BWnMqtokBc81WM0IIPhkTwpHf4zcG_MuJBw8IAg3uRYtwvV04/s1600/nav-sprite.png); background-repeat:no-repeat; cursor:pointer; text-indent:-9999px}
#example_home{background-position:0 0}
#example_home:hover, #example_home.hover{background-position:0 -48px}
#example_blog{background-position:-90px 0}
#example_blog:hover, #example_blog.hover{background-position:-90px -48px}
#example_demo{background-position:-180px 0}
#example_demo:hover, #example_demo.hover{background-position:-180px -48px}
#example_about{background-position:-270px 0}
#example_about:hover, #example_about.hover{background-position:-270px -48px}
#example_services{background-position:-360px 0}
#example_services:hover, #example_services.hover{background-position:-360px -48px}
#example_contact{background-position:-450px 0}
#example_contact:hover, #example_contact.hover{background-position:-450px -48px}  
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js'/>
  <script src='jquery.blend.js'/>
  <script>
   $(document).ready(function(){
    $(&quot;#example a&quot;).blend();
    $(&quot;#example2 a&quot;).blend();
   });
  </script>

Selanjutnya Masukkan kode berikut setelah salah satu kode di bawah ini. Silahkan pilih satu yang sesuai dengan keinginan anda. Ingat, pilih salah satu saja.

• <div id='outer-wrapper'>
• <div id='content-wrapper'>
• <div id='main-wrapper'>

Berikut kode yang harus anda masukkan

<div id='demo'>
<div id="example">
<a href="masukkan link anda di sini" id="example_home">Home</a>
<a href="masukkan link anda di sini" id="example_blog">Blog</a>
<a href="masukkan link anda di sini" id="example_demo">Demo</a>
<a href="masukkan link anda di sini" id="example_about">About</a>
<a href="masukkan link anda di sini" id="example_services">Services</a>
<a href="http://blogonol.blogspot.com/" id="blogger tutorial">Get Blog Tutorial</a>
</div></div>

Selanjutnya ganti tilisan masukkan link anda di sini dengan alamat atau link anda
Klik Simpan Template dan lihat hasilnya
Selamat mencoba dan sukses selalu

"keep spirits and do the best"