Cara membuat menubar di kaki blog

Oleh : Syafei
Indonesian Pos
 
Mungkin ini ada gunanya bagi sobat blogger pemula, tidak ada salahnya menghias/ menyunting blog sobat dengan membuat daftar menu di kaki blog. Banyak sekali situs dengan tutorial cara membuat menubar diatas header atau dibawah header, tapi kali ini menu bar dikaki blog.

Langsung saja berikut caranya;

• 1. Buat blog baru di blogger untuk contoh, antisipasi kalau blog sobat yang sudah jadi terganggu.

• 2. Klik menu Layout

• 3. Klik Tab Edit HTML

Untuk antisipasi jika terjadi kesalahan di Edit HTML, sobat backup dulu template sobat dengan cara mengklik Download Template Lengkap, jika sudah selesai lalu,

• 4. Centang Expand Template Widget agar kode dapat tampil seluruhnya.
• 5. Saya pesan, sobat harus hati-hati setiap melakukan copypaste, alangkah baiknya di set dulu sebelum sobat copypastekan : merubah warna, merubah font, merubah persen width.

• 7. Masukan kode dibawhan ini tepat dibawah kode <b:skin><![CDATA[

/*The top Menu*/
#top{
margin:auto;
padding: 0;
width: 100%;
background: #1E90FF;
border-bottom:1px solid #373127;
}
#top-wrap{
margin:auto;
padding: 0;
width: 900px;
background:#000000;
}
#navwrap {margin: 0px auto; width:560px; float:left;background:#080705;}
.topnav ul {list-style:none;margin:0;padding:0px; float:center;}
.topnav li {float:left;margin:0;text-align:center;}
.topnav li a {font-family: Arial; font-weight:bold; font-size:12px;display:block;padding:10px 10px;color:#fff;text-decoration:none; text-transform:uppercase;}
.topnav li a {background:none; }
.topnav li a:hover, li a:focus, li a:active {text-decoration:none; background:#000000; color:#000000;}
/*The top Menu*/
#med{
margin:auto;
padding: 0;
width: 100%;
background:#000000;
}
#med-wrap{
margin:auto;
padding: 0;
width: 900px;
}
.mednav ul {list-style:none;margin:0;padding:0px; float:center;}
.mednav li {float:left;margin:0;text-align:center;}
.mednav li a {font-family: Arial; font-weight:bold; font-size:11px;display:block;padding:10px 10px;color:#000000;text-decoration:none; text-transform:lowercase;}
.mednav li a {background:none; }
.mednav li a:hover, li a:focus, li a:active {text-decoration:underline; color:#000000;}
#navbar-iframe {
display: none !important;
}

6. width: 100%; adalah panjang tampilan di halaman blog sobat, dapat disesuaikan sesuai keiginan,

7. width: 900px; adalah panjang tampilan di halaman blog sobat, dapat disesuaikan sesuai keiginan,

8. font-size:11px; dan font-size:12px adalah ukuran font di daftar menu yang akan tampil nanti, dapat disesuaikan sesuai keiginan,

9. font-weight:bold; adalah huruf tebal yang akan tampil di daftar menu, silahkan ganti dengan normal kalau sobat tidak ingin huruf tebal.

10. #000000; adalah warna hitam, boleh sobat ganti dengan warna lain sesuai keinginan. Klik disini untuk pilih kode warna.

11. Lalu sobat  cari kode </body> gunakan ctrl + F untuk memudahkan pencarian.

12. Lalu sobat copypaste kode berikut tepat dibawah kode </body>

<div id='top'>
<div id='top-wrap'>
<div class='topnav'>
<ul id='topnav'>
<li><a href='http://www. http://pairssence.blogspot.com/'>Home</a></li>
<blink><li><a href='http://pairssence.blogspot.com' title='Local Ad Form'> Local Ad Form</a></li></blink>
<li><a href='http://pairssence.blogspot.com' title='Flixya News'> Flixya News</a></li>
<li><a href='http://pairssence.blogspot.com' title='Blog Tutorial'> Blog Tutorial</a></li>
<li><a href='http://pairssence.blogspot.com' title='Link Afiliates'> Link Afililiates</a></li>

<li><a href='http://pairssence.blogspot.com' title='Posting Indonesia'> Posting Indonesia</a></li>
<li><a href='http://pairssence.blogspot.com' title='Privacy Policy'> Privacy Policy</a> </li>
<li><a href='http://pairssence.blogspot.com' title='Contact Us'> Contact Us</a></li>      
</ul>
</div>
</div>
<div style='clear: both;'/>
</div>

URL yang berwarna biru silahkan ganti sesuai URL sobat. Kata-kata yang berwarna merah adalah menu yang akan tampil, silahkan ganti sesuai keinginan sobat.

Jangan di save dulu, klik pratinjau untuk melihat tampilan, kalau tampilan sudah pas menurut sobat silahkan save, kalau belum, silahkan ganti warna, ganti jenis font (ganti Arial dengan font yang sobat inginkan). Klik disini untuk melihat kode-kode warna HTML.

Selamat mencoba semoga berhasil.