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, yuuk mari kita praktek kan:
Langsung saja, berikut langkah-langkah cara membuatnya :
Pertama : Sobat masukkan kode dibawah ini, tepat diatas </head>
<script>
$('document').ready(function(){
$('.menu').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 -->
</li>
<!-- Using class="current" for the link of the current page -->
<li class='current'>
</li>
<li class='single-link'><!-- Using class="single-link" for links with no dropdown -->
</li>
<li class='single-link'><!-- Using class="single-link" for links with no dropdown -->
</li>
<li class='single-link'><!-- Using class="single-link" for links with no dropdown -->
</li>
<li class='single-link'><!-- Using class="single-link" for links with no dropdown -->
</li>
<li class='single-link'><!-- Using class="single-link" for links with no dropdown -->
</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>
<div class='mid-line'>
</div>
</li>
<li><a href='#'>Images</a></li>
<li><a href='#'>Maps</a></li>
<li>
<div class='mid-line'>
</div>
</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.
--> Untuk merubah jenis hurup yang di gunakan
--> Untuk merubah ukuran hurup (heading)
--> Untuk Menebalkan hurup
--> Untuk memiringkan hurup
--> Untuk merubah warna hurup
--> Untuk membuat link
--> Untuk membuat artikel menjadi rata kiri
--> Untuk membuat tulisan menjadi di tengah
--> Untuk membuat artikel menjadi rata kanan
--> Untuk membuat artikel menjadi rata kiri dan rata kanan
--> Untuk membuat sub bahasan oleh angka
--> Untuk membuat sub bahasan oleh bullet
--> Untuk mengecek spelling
--> Untuk memasukan gambar(upload gambar)
--> Untuk membuat artikel dalam kode HTML
--> Untuk membuat artikel dalam mode Compose (biasa)
--> Untuk me review (melihat) artikel
Template adalah desain-desain halaman web ataupun blog beserta seluruh komponennya (misal : gambar, stylesheet, dsb) baik berupa file statis maupun file dinamis yang berupa program atau aplikasi yang berjalan sebagai aplikasi web.
