Minggu, 04 November 2012

Membuat Menu Navigasi Horizontal Dibawah Footer

Menu Navigasi Horizontal pada umumnya terletak dibawah header blog seperti pada postingan saya sebelumnya tentang menu navigasi horiontal keren dengan sentuhan css, dan juga lihat bagaimana cara membuat membuat menu navigasi horozontal seperti daun, nah pada postingan kali ini penempatan menu navbar ini akan diletakkan tepat berada dibawah footer, lihat screenshotnya dibawah ini. Ok kita persingkat saja bagaimana untuk Membuat Menu Navigasi Horizontal Dibawah Footer.

Membuat Menu Navigasi Horizontal Dibawah Footer

Cara meletakkan menu navbar di bawah footer blog
1. Login ke Blogger.com
2. Pilih Template
3. Plih Edit HTML => lanjutkan
4. Backup dulu Template
5. Centang Expand Template Widget
6. Lalu Cari Kode ]]></b:skin> dan letakan kode berikut diatasnya

/* Menu Horizontal Bottom */
.menubottompic {background:#A00000 url(http://1.bp.blogspot.com/-mt2vYQ-thY8/UJcmk-egpoI/AAAAAAAAKww/WKG34SBpATQ/s1600/bawah-footer-1.jpg) repeat-x top left;width:100%;margin:0 auto;padding:0 auto;height:42px;}
.menubottom {width:950px;height:20px;margin:0 auto;padding:14px 0;}
.menubottom ul {margin: 0;padding-left:0px;color:#fff;text-transform:none;
list-style-type: none;font:normal 11px Arial,sans-serif;}
.menubottom li{display: inline; margin: 0;}
.menubottom li a{background:url(http://2.bp.blogspot.com/-gE6jy-tBM6I/UJcmu5lpZtI/AAAAAAAAKw8/Nc6KB76zgX4/s1600/bawah-footer-2.jpg) no-repeat center right;float: left;display: block;text-decoration:none;
padding:1px 8px;color:#eee;line-height: 1.2em;}
.menubottom li a:visited{color:#eee;}
.menubottom li a:hover {color:#000;text-decoration:none;}

7. Langkah Selanjutnya cari kode </body> dan letakan kode berikut diatasnya

<div class='menubottompic'>
<div class='menubottom'>
<ul>
<li><a href='/'>Home</a></li>
<li><a href='#'>About</a></li>
<li><a href='#'>Contact Us</a></li>
<li><a href='#'>Sitemap</a></li>
<li><a href='#'>Privacy Policy</a></li>
<li><a href='#'>Disclaimer</a></li>
<li><a href='#'>Email</a></li>
<li><a href='#'>Social Media</a></li>
<li><a href='#'>Software</a></li>
<li><a href='#'>Parse HTML</a></li>
<li><a href='#'>Pasang Iklan</a></li>
</ul>
</div>
<div style='clear:both;'/>
</div>

Keterangan :
1. Silahkan ubah tanda pagar ( # ) dengan Url tujuan
2. Ubah juga kode warna biru dengan judul yang akan anda masukkan.

Selamat mencoba dan semoga postingan mengenai cara membuat menu navigasi horizontal di bawah footer ini dapat bermanfaat bagi anda yang ingin menerapkan di blog anda.

1 komentar:

  1. Thank you for your information. Visit my blog at http://www.kiatkiat.com/

    BalasHapus