Cara Membuat Menu Di blog Seperti Google

168 views

alhadi.org – Cara Membuat Menu Di blog Seperti Google, Cara Membuat Menu Di blog Seperti Google

Cara Membuat Menu Di blog Seperti Google

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 
 

<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>
$('document').ready(function(){
$('.menu').fixedMenu();
});
script>

Kedua : Masukkan kode berikut tepat diatas  ]]>
 

.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'>
  <a href='http://plus.google.com' target='_blank'>+Youa>
  li>
        
      <li class='current'>
  <a href='http://www.google.co.in/' target='_blank'>Weba>
  li>
   <li class='single-link'>
  <a href='http://orkut.com' target='_blank'>Orkuta>
  li>
   <li class='single-link'>
  <a href='http://gmail.com' target='_blank'>Gmaila>
  li>
   <li class='single-link'>
  <a href='https://www.google.com/calendar' target='_blank'>Calendara>
  li>
   <li class='single-link'>
  <a href='https://docs.google.com' target='_blank'>Documentsa>
  li>
   <li class='single-link'>
  <a href='http://picasaweb.google.co.in/home' target='_blank'>Photosa>
  li>
   <li>
  <a href='#'>More<span class='arrow'/>a>
        
<ul>
   <li><a href='#'>Readera>li>
   <li><a href='#'>Sitesa>li>
   <li><a href='#'>Groupsa>li>
   <li><a href='http://www.youtube.com'>YouTubea>li>
   <li>
   <div class='mid-line'>
   div>
   li>
   <li><a href='#'>Imagesa>li>
   <li><a href='#'>Mapsa>li>
   <li><a href='http://translate.google.co.in/'>Translatea>li>
   <li><a href='http://books.google.co.in'>Booksa>li>
   <li><a href='http://scholar.google.co.in/'>Scholara>li>
   <li><a href='http://blogsearch.google.co.in'>Blogsa>li>
   <li>
   <div class='mid-line'>
   div>
   li>
   <li><a href='http://www.google.co.in/intl/en/options/'>even more >>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
Terima Kasih Atas kunjungan anda di halaman  Cara Membuat Menu Di blog Seperti Google, Jangan lupa untuk Membookmars Halaman ini jika  Cara Membuat Menu Di blog Seperti Google berguna untuk anda.

Leave a reply "Cara Membuat Menu Di blog Seperti Google"