CSS Collor Style Menu Bar - Nungguin adzan maghrib yang masih lama mending kita berbagi bagaimana caranya membuat menu bar yang cukup atractive untuk diterapkan pada sebuah blog. ya daripada bengong terus ngayal yang gak jelas kan bisa ngurangin pahalanya puasa hehe. Menu yang [OBC] tawarkan kali ini cukup sederhana tapi masih tetep bisa jadi pilihan brada dalam membuat menu . Kalau menunya cocok silahkan brada ikuti cara pasangnya , tapi alangkah baiknya brada cek dulu demonya dibawah ini. 


Kustomisasi

  • Masuk Edit HTML
  • Cari kode </head>
  • Masukan kode dibawah ini tepat diatas sebelum 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/AVvXsEhqzjcpzus_EE93PDHC3SqrtBTWtLnf6edJ1E4MwI0nZgrDizRrxlFMUf8g7Ay2z2OrRbjU0N2lfhmXJI-iKVjASux9Yx6kf5E8glbEOQs_q4-v8rqWrW6Ay2YdXVcQE4qxbRbh3S9ZcHc/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>

Untuk menempatkan posisi menu sekarang cari kode <div id='content-wrapper'> dan tempatkan kode dibawah ini sebelum kode <div id='content-wrapper'> 
<div id='demo'>
<div id="example">
<a href="#" id="example_home">Home</a>
<a href="#" id="example_blog">Blog</a>
<a href="#" id="example_demo">Demo</a>
<a href="#" id="example_about">About</a>
<a href="#" id="example_services">Services</a>
<a href="http://www.s2free.org/" id="example_contact">Add This</a>
</div></div>

Brada juga bisa menempatkan menunya langsung pada Tata letak >> Add Gadget / HTML Javascript dan masukan kodenya lalu SAVE dan lihat hasilnya.

Selamat menjalankan ibadah puasa !!!

  
Tutorial