Home> Tutorial Blog > Membuat Navigasi Ala Google

Membuat Navigasi Ala Google

Siapa yang ga kenal Google?.. Google merupakan media sufing yang menampilkan berbagai macam info dari berita, video, musik dan trik serta tips, namun ada yang unik pada tampilan google, apa itu?... ya Sobat benar, menu navigasi google yang sederhana namun terlihat elegan (lihat gambar).



don't Ribet | Selalu Yang Dicari bagaimana caranya membuat Navigasi Ala Google :

Longin ke dasbor blog sobat


1. Pilih Rancangan --> Edit HTML
2. Cari kode ]]></b:skin>, selanjutnya copy paste kode di bawah ini tepat di atasnya.


/* Navigasi Ala Google
----------------------------------------------- */
.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;
}

3. Cari kode ]]></b:skin>, selanjutnya copy paste kode di bawah ini tepat di atasnya.

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

4. Cari kode <div id='outer-wrapper'>, selanjutnya copy paste kode di bawah ini tepat di bawahnya.


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

5. Simpan Template.

Selanjutnya link pada menu navigasi ala google dapat di ganti sesuai dengan ke inginan Sobat, misalnya http://translate.google.co.in ganti dengan http://dontribet.blogspot.com/search/label/TutorialBlog begitu juga dengan link yang lainnya.

Navagasi Ala Google  bersifat fixed meskipun kusor digerakkan ke atas atau ke bawah menu navigasi akan tetap berada pada di atas, jika Sobat mengingikan menu tersebut hilang saat kusor digerakkan ke bawah. Sobat tinggal hapus kode di bawah ini :

.menu{
position:fixed;
top:0;
left:0;
width:100%;
font:13px/27px Arial,sans-serif;
color:#3366cc;
height:30px;
background:#2D2D2D;
}

Jangan lupa di SAVE kembali.


Semoga Bermanfaat...
5 24

Tidak ada komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)
Copyright © 2015. Don't Ribet Allright reserved.