Cara Pasang Menu Bar dan Sub Menu Bar di Blogspot
Mungkin sobat bertanya-tanya bagaimana cara penampilan blog agar dapat menarik dan tidak bosan untuk dipandang, dan berguna untuk mencari informasi berdasarkan katagori atau sub menu. Memberi sub menu juga semua artikel bisa ditampilkan dalam satu tatapan mata dengan teratur dan rapih sesuai dengan katagory nya.Jika berminat untuk merubahnya dan mencoba tampilan baru yang menarik berikut langkah-langkahnya. Selamat berekspersi!!!!!..
Langkah sebelum pemasanagan :
- Klik Desain
- Pilih Template pilih Edit HTML
- Pilih /Klik Expand Templete Widget
Carilah Scrift berikut : dengan menekan F3 untuk mempermudah pencarian
<div class='main-outer'>
kalau berbeda di template blog coba dengan scriftkkak
<div id='main-wrapper'> atau
<div id='main'>
<div id='main'>
Kalau sudah ketemu COPAS scrift dibawah ini persis diatas scrift yang tadi di cari.
<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>
<div id='cat-nav'>
<ul class='fl' id='secnav'>
<li><a href='#'>Beranda</a></li>
<li><a href='#'>Menu 1</a></li>
<li><a href='#'>Menu 2</a>
<ul id='sub-custom-nav'>
<li><a href='#'>Sub Menu2 a</a></li>
<li><a href='#'>Sub Menu2 b</a></li>
</ul>
</li>
<li><a href='#'>Menu3</a>
<ul id='sub-custom-nav'>
<li><a href='#'>Sub Menu3a</a></li>
<li><a href='#'>Sub Menu3b </a></li>
</ul>
</li>
<li><a href='#'>Menu4</a>
<ul id='sub-custom-nav'>
<li><a href='#'>Sub Menu4a</a></li>
<li><a href='#'>Sub Menu4b </a></li>
</ul>
</li>
<li><a href='#'>Menu5</a></li>
</ul>
</div>
Untuk keterangannya :
- Gantilah # yang warna BIRU dengan link/url Blog anda,link posting atau Label (Katagori) pada blog sobat.
- Gantilah Tulisan Warna Biru dengan Menu dan Sub menu yang sobat inginkan.
- Untuk merubah silahkan Lebar cari code :
#cat-nav {background:#156994;margin:0 15px;padding:0;height:35px;} ==> baris ke-3. Kemudian tambahkan kode (width:900px)sesuai keinginan anda) di antara { dan }, sehingga menjadi :
#cat-nav {background:#156994;width:900px;margin:015px;padding:0;height:35px} angka 900px hanya sebagai contoh silahkan rubah sesuka hati.
- Untuk mengatur tinggi menu silakan ganti angka 35 pada kode 35px di atas dengan tinggi yang sobat mau mau.
- Untuk tambah atau kurangi jumlah menu, silakan copas atau hapus Skrip dengan blok warna abu-abu (1 porsi menu) , jumlah sub-menunya bisa ditambah sesuai selera, misalnya submenu ..1, 2, 3, 4, dst.
- Setelah itu klik Pratinjau dulu untuk memastikan scrift sudah benar .
- Lalu simpanlah/save.
Contoh scrift blog http://alifvickry.blogspot.com secara sederhana.
Jika sobat masih merasa bingung cara pengisiannya bisa ikutin scrift dibawah ini
<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>
<div id='cat-nav'>
<ul class='fl' id='secnav'>
<li><a href='http://alifvickry.blogspot.com'>Beranda</a></li>
<li><a href='http://alifvickry.blogspot.com'>Site Map</a></li>
<li><a href='http://alifvickry.blogspot.com/search/label/Komputer'>Komputer</a>
<ul id='sub-custom-nav'>
<li><a href='http://alifvickry.blogspot.com/2014/12/partisi-harddisk-tanpa-menggunakan.html'>Partisi Harddisk Tanpa Software.</a></li>
<li><a href='http://alifvickry.blogspot.com/2014/12/mengaktifkan-kembali-task-manager-yang.html'>Task Manager Fix.</a></li>
</ul>
</li>
<li><a href='http://alifvickry.blogspot.com/search/label/Bisnis%20Online'>Bisnis Online</a>
<ul id='sub-custom-nav'>
<li><a href='http://alifvickry.blogspot.com/2014/12/cara-mendapatkan-dollar-dengan-aplikasi.html'>Tap Cash Rewards.</a></li>
<li><a href='#'>Sub Menu3b </a></li>
</ul>
</li>
<li><a href='http://alifvickry.blogspot.com/search/label/Software'>Software</a>
<ul id='sub-custom-nav'>
<li><a href='http://alifvickry.blogspot.com/2014/12/pickmeapp-cara-memindahkan-program.html'>PickMeApp</a></li>
<li><a href='#'>Sub Menu4b </a></li>
</ul>
</li>
<li><a href='http://alifvickry.blogspot.com/search/label/Tip dan Trik'>Tip dan Trik</a>
<ul id='sub-custom-nav'>
<li><a href='http://alifvickry.blogspot.com/2014/12/Cara-Pasang-Menu-Bar-dan-Sub-Menu.html'>Menu Bar dan Sub Menu</a></li>
<li><a href='#'>Sub Menu4b </a></li>
</ul>
</li>
Semoga Bermanfaat!!!!......
0 comments:
Post a Comment