Kesempatan singkat ini Media Blogger akan memberikan pengarahan Cara Memasang Menu yang lebih cantik, keren, dinamis dan menarik. Salah satunya adalah Menu Dropdown mirip fasilitas Bootstrap. Berikut ini adalah contoh hasil dari menu tersebut.
Menubar ini juga bisa diisi bagian-bagian submenu lain yang dapat anda optimalkan. Jadi, ketika anda mengarahkan kursor di salah satu daftar menu tersebut, akan muncul submenu lainnya. Kesimpulannya, jadi misalkan sobat ingin memasang submenu dari sebuah link itu tinggal menambah sedikit kode yang akan dijelaskan dibawah. Oh iya, menubar di postingan ini tidak ada search box seperti digambar. Menubar ini sudah dibuat agar responsive terhadap penampakan di browser lainnya. Tetapi jika sobat ingin membuat menubar di blog dengan search box, silahkan kunjungi postingan disini. Sudah tau kan bagaimana tampilan menubar di blog itu? nah, cara membuat menubar di blog tidak sulit kok dan terbilang sederehana. Mau tau cara pembuatannya? Yuk, ikuti tutorial singkat panduan berikut :
1. Login pada blogger
2. masuk ke halaman Template
3. Edit HTML
4. Cari kode ]]></b:skin> (gunakan ctrl+f)
5. Pasang kode di bawah ini di atas kode ]]></b:skin>
#menu{6. Langkah selanjutnya, carilah kode <div id="content-wrapper">
width: 100%;
margin: 0;
padding: 10px 0 0 0;
list-style: none;
background: #111;
background: -moz-linear-gradient(#444, #111);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
background: -webkit-linear-gradient(#444, #111);
background: -o-linear-gradient(#444, #111);
background: -ms-linear-gradient(#444, #111);
background: linear-gradient(#444, #111);
-moz-border-radius: 50px;
border-radius: 50px;
-moz-box-shadow: 0 2px 1px #9c9c9c;
-webkit-box-shadow: 0 2px 1px #9c9c9c;
box-shadow: 0 2px 1px #9c9c9c;
}
#menu li{
float: left;
padding: 0 0 10px 0;
position: relative;
}
#menu a{
float: left;
height: 25px;
padding: 0 25px;
color: #999;
text-transform: uppercase;
font: bold 12px/25px Arial, Helvetica;
text-decoration: none;
text-shadow: 0 1px 0 #000;
}
#menu li:hover > a{
color: #fafafa;
}
*html #menu li a:hover{ /* IE6 */
color: #fafafa;
}
#menu li:hover > ul{
display: block;
}
/* Sub-menu */
#menu ul{
list-style: none;
margin: 0;
padding: 0;
display: none;
position: absolute;
top: 35px;
left: 0;
z-index: 99999;
background: #444;
background: -moz-linear-gradient(#444, #111);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
background: -webkit-linear-gradient(#444, #111);
background: -o-linear-gradient(#444, #111);
background: -ms-linear-gradient(#444, #111);
background: linear-gradient(#444, #111);
-moz-border-radius: 5px;
border-radius: 5px;
}
#menu ul li{
float: none;
margin: 0;
padding: 0;
display: block;
-moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
-webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
}
#menu ul li:last-child{
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
#menu ul a{
padding: 10px;
height: auto;
line-height: 1;
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}
*html #menu ul a{ /* IE6 */
height: 10px;
width: 150px;
}
*:first-child+html #menu ul a{ /* IE7 */
height: 10px;
width: 150px;
}
#menu ul a:hover{
background: #0186ba;
background: -moz-linear-gradient(#04acec, #0186ba);
background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
background: -webkit-linear-gradient(#04acec, #0186ba);
background: -o-linear-gradient(#04acec, #0186ba);
background: -ms-linear-gradient(#04acec, #0186ba);
background: linear-gradient(#04acec, #0186ba);
}
#menu ul li:first-child a{
-moz-border-radius: 5px 5px 0 0;
-webkit-border-radius: 5px 5px 0 0;
border-radius: 5px 5px 0 0;
}
#menu ul li:first-child a:after{
content: '';
position: absolute;
left: 30px;
top: -8px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 8px solid #444;
}
#menu ul li:first-child a:hover:after{
border-bottom-color: #04acec;
}
#menu ul li:last-child a{
-moz-border-radius: 0 0 5px 5px;
-webkit-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
}
/* Clear floated elements */
#menu:after{
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
* html #menu { zoom: 1; } /* IE6 */
*:first-child+html #menu { zoom: 1; } /* IE7 */
7. Pasang kode dibawah ini diatas kode yang berwarna merah tersebut :
<ul id="menu">
<li><a href="#">Home</a></li>
<li>
<a href="#">Categories</a>
<ul>
<li><a href="#">CSS</a></li>
<li><a href="#">Graphic design</a></li>
<li><a href="#">Development tools</a></li>
<li><a href="#">Web design</a></li>
</ul>
</li>
<li><a href="#">WorkShop</a></li>
<li><a href="#">About</a></li>
<li><a href="http://impoint.blogspot.com">Search Engine Optimization</a></li>
</ul>
8. Bagi kamu yang tidak menemukan kode di tahap ke 6, bisa mencari kode <div id='header....>
Anda dapat menaruh kodee no. 7 pada bagian div lainnya contohnya header-wrapper dll itu tergantung dari nama ID yang digunakan pada template kalian. Biasanya sang creator template memberi nama yang sama.
Letakkan kode no. 7 di bawah <div id='header> atau <div id='header-wrapper'> atau diatas kode <div id='main
Simpan template dan lihat hasilnya.
Untuk membuat submenu (menu dropdown) anda peerlu menambahkan kode <ul> sebelum diakhiri penutup </li> dari menu utama. Contohnya pada script nomor 7, saya beri warna biru.
Pada umumnya setiap menu itu dibentuk atas perintah kode <li><a href.......>Nama Menu</a></li>
Jadi, untuk memasukkan submenu dibutuhkan script bagian <ul> dan penutup </ul>
Sedangkan untuk memasukkan link, silahkan ganti tanda pagar diatas dengan url link yang anda tujukan.
Ketelitian dan kecermatan dalam memasang menu bar akan membuat menu anda terpasang rapih dan teratur. Anda dapat mengubah sereta mencocokkan warna, style , text ( bentuk huruf ), ukuran pada template blog dan sebagainya. Semoga panduan dan tutorial singkat mengenai cara membuat menu dropdown bootstrap pada blogspot ini dapat bermanfaat banyak bagi semua orang.
Toggleable, contextual menu for displaying lists of links. Made interactive with the dropdown JavaScript plugin.
