Cara memasang Menu Bar blogspot lengkap untuk pemula

Home » tutorial desain blog » Cara memasang Menu Bar blogspot lengkap untuk pemula

Cara memasang Menu Bar blogspot lengkap untuk pemula

Posted by Di Seputar Kita on Sabtu, 08 November 2014 Label: tutorial desain blog

Pada kesempatan kali ini saya akan berbagi cara untuk membuat menu bar dan sub menubar di blogspot secara lengkap untuk para pemula yang ingin belajar memodifikasi tampilan blog.

Oke langsung saja ini dia langkah-langkahnya

1. Masuk ke dashboard blogger

2. Pilih Template ==> Edit HTML

3. Cari kode <div class='main-outer'>

Untuk memudakkan untuk mencari kode tersebut caranya klik sembarang di dalam kotak yang berisi kode html, lalu tekan tombol Ctrl+F untuk pencarian, lalu pastekan kode diatas dan tekan enter.

4. Setelah ketemu, copy dan pastekan kode dibawah ini TEPAT DIATAS <div class='main-outer'>

<style>

/* -- Menu Horizontal + Sub Menu-- */

#cat-nav {background:#156994;margin:0 15px;padding:0;height:35px;}

#cat-nav a { color:#eee; text-decoration:none; text-shadow: #033148 0px 1px 0px;border-right:1px solid #156994;}

#cat-nav a:hover { color:#fff; }

#cat-nav li:hover { background:#000; }

#cat-nav a span { font-family:Verdana, Geneva, sans-serif; font-size:11px; font-style:normal; font-weight:400; color:#fff; text-shadow:none;}

#cat-nav .nav-description { display:block; }

#cat-nav a:hover span { color:#fff; }

#secnav, #secnav ul { position:relative; z-index:100; margin:0; padding:0; list-style:none; line-height:1; background:#0d5e88; }

#secnav a { font-family:Georgia, "Times New Roman", Times, serif; font-style:italic; font-weight:700; font-size:14px; display:block; z-index:100; padding:0 15px; line-height:35px; text-decoration:none;}

#secnav li { float:left; width: auto; height:35px;}

#secnav li ul { position: absolute; left: -999em; width: 200px; top:35px}

#secnav li ul li { height:30px; border-top:1px solid #fff; }

#secnav li ul li a { font-family:Verdana, Geneva, sans-serif; width:180px; line-height:30px; padding:0 10px; font-size:11px; font-style:normal; font-weight:400; color:#eee; }

#secnav li ul ul { margin: -30px 0 0 180px; }

#secnav li:hover ul ul, #secnav li:hover ul ul ul, #secnav li.sfhover ul ul, #secnav li.sfhover ul ul ul { left:-999em; }

#secnav li:hover ul, #secnav li li:hover ul, #secnav li li li:hover ul, #secnav li.sfhover ul, #secnav li li.sfhover ul, #secnav li li li.sfhover ul { left: auto; }

#secnav li:hover,#secnav li.hover { position:static; }

#cat-nav #secnav {width:100%;margin:0 auto;}

</style>

<li><a href='#'>Beranda</a></li>

</ul>

</li>

</ul>

</li>

</ul>

</li>

</ul>

</div>

5. Pilih Pratintau Template untuk melihat hasilnya, jika anda suka pilih simpan

PENJELSAN

1. Cara memasukkan alamat URL:

Ganti tanda # (warna biru) dengan link/url yang anda inginkan. Bisa jadi link posting atau label (katagori) yang ada pada blog anda.

2.Cara menuliskan judul menu atau judul postingan:

Ganti Tulisan warna biru dengan nama menu dan nama sub menu yang anda inginkan.

3.Untuk tambah atau kurangi jumlah menu

silakan copas atau hapus Skrip dengan blok warna hijau (1 porsi menu) , jumlah sub-menunya bisa ditambah sesuai selera, misalnya submenu ..c, d, e, f, dst.

Jika masih ada yang masih bingung, tanyakan dikomentar