›

Cara Membuat Menu Di blog Seperti Google

Written By Saturday, December 22, 2012 Edit

Satu lagi nih sob koleksi cara membuat menu di blogspot. Kalau sebelumnya saya posting Cara Membuat Menu D tree Seperti Folder Windows, kali ini saya akan share Cara Membuat Menu Di blog Seperti Google. Menu yang satu ini tampilanya 90% mirip seperti menu mbah google, dan yang kerenya lagi sudah dilengkapi dengan efek fixed scroll.

Untuk membuat menu navigasi ala google ini, ada tiga script yang harus sobat masukan kedalam template blogger, diantaranya adalah kode Java script, kode CSS Dan kode html sebagai kontentnya. Untuk lebih jelasnya, silahkan sobat lihat live demonya : DEMO

Langsung saja, berikut langkah-langkah cara membuatnya :

Pertama : Sobat masukkan kode dibawah ini, tepat diatas </head>
 
<script src='http://cing-ss.googlecode.com/files/jquery-1.4.2.min.js' type='text/javascript'/>
<script src='http://cing-ss.googlecode.com/files/jquery.google_menu.js' type='text/javascript'/>
<script>
$(&#39;document&#39;).ready(function(){
$(&#39;.menu&#39;).fixedMenu();
});
</script>


Kedua : Masukkan kode berikut tepat diatas  ]]></b:skin>
 
.menu{
position:fixed;
top:0;
left:0;
width:100%;
font:13px/27px Arial,sans-serif;
color:#3366cc;
height:30px;
background:#2D2D2D;
}
.menu a:hover{
background-color:#676767;
color:#CCCCCC;
}
.menu a{
text-decoration:none;
padding:6px 8px 7px;
color:#CCCCCC;
outline:none;
}
.menu ul{
list-style:none;
margin:0;
padding:0 0 0 10px;
}
.menu ul li{
padding:0;
float:left;
}
.menu ul li ul li{
padding:0;
float:none;
margin:0 0 0 0px;
width:100%;
}
.menu ul li ul{
position:absolute;
border:1px solid #C3D1EC;
-webkit-box-shadow:0 1px 5px #CCCCCC;
-moz-box-shadow:0 1px 5px #CCCCCC;
box-shadow:0 1px 5px #CCCCCC;
margin-top:-1px;
display:none;
padding:0px 16px 0px 0;
}
.active ul{
display:block !important;
}
.single ul{
display:block !important;
}
.active a{
background-color:white;
border:1px solid #C3D1EC;
border-bottom:0;
-webkit-box-shadow:0 -1px 5px #CCCCCC;
-moz-box-shadow:0 -1px 5px #CCCCCC;
box-shadow:0 -1px 5px #CCCCCC;
display:block;
height:29px;
padding:0 8px 0 8px;
position:relative;
z-index:1;
color:#3366CC;
}
.current a{
background-color:#2D2D2D;
border-top:2px solid #DD4B39;/*garis warna merah diatas*/
border-bottom:0;
display:block;
height:25px;
padding:0 8px 0 8px;
position:relative;
z-index:1;
color:#FFFFFF;
font-weight:bold;
}
.active a:hover{
background-color:white;
color:#3366CC;
}
.active ul a:hover{
background-color:#e4ebf8;
}
.active ul a{
border:0 !important;
-webkit-box-shadow:0 0 0 #CCCCCC;
-moz-box-shadow:0 0 0 #CCCCCC;
box-shadow:0 0 0 #CCCCCC;
border:0;
width:100%;
}
.arrow{
border-color:#C0C0C0 transparent white;
border-style:solid dashed dashed;
margin-left:5px;
position:relative;
top:10px;
}
.mid-line{
background-color:#FFF;
border-top:1px solid #e5e5e5;
font-size:0;
}


Ketiga : Masukkan kode berikut dibawah  Tag pembukaan kode outer-wrapper 
 
<div class='menu'>
 <ul>
   <li class='single-link'><!-- Using class="single-link" for links with no dropdown -->
  <a href='http://plus.google.com' target='_blank'>+You</a>
  </li>
        <!-- Using class="current" for the link of the current page -->
      <li class='current'>
  <a href='http://www.google.co.in/' target='_blank'>Web</a>
  </li>
   <li class='single-link'><!-- Using class="single-link" for links with no dropdown -->
  <a href='http://orkut.com' target='_blank'>Orkut</a>
  </li>
   <li class='single-link'><!-- Using class="single-link" for links with no dropdown -->
  <a href='http://gmail.com' target='_blank'>Gmail</a>
  </li>
   <li class='single-link'><!-- Using class="single-link" for links with no dropdown -->
  <a href='https://www.google.com/calendar' target='_blank'>Calendar</a>
  </li>
   <li class='single-link'><!-- Using class="single-link" for links with no dropdown -->
  <a href='https://docs.google.com' target='_blank'>Documents</a>
  </li>
   <li class='single-link'><!-- Using class="single-link" for links with no dropdown -->
  <a href='http://picasaweb.google.co.in/home' target='_blank'>Photos</a>
  </li>
   <li>
  <a href='#'>More<span class='arrow'/></a>
        <!-- Drop Down menu Items -->
<ul>
   <li><a href='#'>Reader</a></li>
   <li><a href='#'>Sites</a></li>
   <li><a href='#'>Groups</a></li>
   <li><a href='http://www.youtube.com'>YouTube</a></li>
   <li>
   <div class='mid-line'>
   </div>
   </li>
   <li><a href='#'>Images</a></li>
   <li><a href='#'>Maps</a></li>
   <li><a href='http://translate.google.co.in/'>Translate</a></li>
   <li><a href='http://books.google.co.in'>Books</a></li>
   <li><a href='http://scholar.google.co.in/'>Scholar</a></li>
   <li><a href='http://blogsearch.google.co.in'>Blogs</a></li>
   <li>
   <div class='mid-line'>
   </div>
   </li>
   <li><a href='http://www.google.co.in/intl/en/options/'>even more &gt;&gt;</a></li>
   <li>
   <div class='mid-line'>
   </div>
   </li>
  </ul>
  </li>
 </ul>
</div>

Note : Silahkan sobat ganti setiap link yang ada dengan link pada blog sobat sendiri.

Cukup sekian artikel Cara Membuat Menu Di blog Seperti Google.

Semoga bermanfaat.

Source code : loefa-cebook.blogspot.com

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel