Cara Membuat Menu Bootstrap pada Blogspot

Cara Membuat Menu Bar di Blog - Tentu anda sudah mengenal dan mengetahui dengan istilah Menu / Menu Bar ? Menubar adalah sebuah kotak tab disertai dengan bingkai garis yang berisi daftar isi mengenai kategori, istilah, komponen, dll yang berisi navigasi link. Fungsi dari menu ini akan memudahkan pengunjung saat membaca sebuah artikel dan ingin mencari sesuatu yang lainnya yang diinformasikan oleh menu bar tersebut.

Manfaat penting dari memasang menu horizontall ( berbentuk memanjang ke samping ) adalah akan memberikan kemudahan dalam mengarahkan pembaca menuju halaman-halaman lain di blog yang kita buat mulai dari Halaman Utama ( Homepage ), Contact Us, Sitemap, Tentang Kami, Ketentuan dan lain sebagainya. Membuat menu sangatlah penting karena dijadikan sebagai navigasi penunjuk utama untuk mengarahkan link yang satu dengan link lainnya.

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.

Anda juga dapat mendownload source code dan contoh demonya pada link ini.

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{
    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 */

6. Langkah selanjutnya, carilah kode <div id="content-wrapper">
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.