Cukup banyak blog yang memperlihatkan bar navigasi di bagian bawah blognya, seperti halnya bar navigasi chatting di facebook dan berbagai jejaring sosial lainnya. Kali ini saya mencoba berbagi bagaimana cara membuat bar navigasi (navbar) di blogger, ini dilakukan secara manual atau dengan kata lain Anda perlu merubah beberapa kode CSS dan html di templat Anda.
Namun sebelumnya saya berterimakasih banyak kepada blog mas Anangku yang menginspirasi saya untuk melanjutkan ilmunya yang sedikit saya modifikasi, maaf ya mas Anang :D, langsung ke TeKaPe.
Hal pertama yang harus dilakukan tentunya adalah membuka halaman edit HTML, karena kita menggunakan metode manual makanya perlu dikerjakan secara manual, hehee...
Kemudian cari kode ]]></b:skin>, kemudian tulis kode dibawah ini tepat diatas kode ]]></b:skin>.
#navbariebawah p.riemo{float:right;height:100%;line-height:1.2;padding-right:40px;vertical-align:bottom}#navbariebawah p{float:left;line-height:1.2;margin:0;padding-left:40px;padding-top:4px;vertical-align:bottom}#navbariebawah a{color:#333}#navbariebawah{align:center;background-color:#f5f5f5;border-bottom:10px solid #f5f5f5;border-top:1px solid #ddd;bottom:0;color:#888;filter:alpha(opacity:90);font-family:Verdana;font-size:11px;left:0;opacity:0.9;position:fixed;text-align:left;width:100%;z-index:10000}
Kemudian, masukkan kode dibawah ini tepat sebelum kode </body> (biasanya berada di bagian bawah kode html) :
<div id="navbariebawah"><p>
Tulis kode html yang ingin Anda taruh di bagian kiri
</p>
<p class="riemo">
Tulis kode html yang ingin Anda taruh di bagian kanan
</p></div>
Contoh penggunaan bar navigasi ini dapat dilihat seperti di blog ini. Nah, bila sudah selesai silakan simpan dan lihat hasilnya. Semoga sukses ya...
Hal pertama yang harus dilakukan tentunya adalah membuka halaman edit HTML, karena kita menggunakan metode manual makanya perlu dikerjakan secara manual, hehee...
Kemudian cari kode ]]></b:skin>, kemudian tulis kode dibawah ini tepat diatas kode ]]></b:skin>.
#navbariebawah p.riemo{float:right;height:100%;line-height:1.2;padding-right:40px;vertical-align:bottom}#navbariebawah p{float:left;line-height:1.2;margin:0;padding-left:40px;padding-top:4px;vertical-align:bottom}#navbariebawah a{color:#333}#navbariebawah{align:center;background-color:#f5f5f5;border-bottom:10px solid #f5f5f5;border-top:1px solid #ddd;bottom:0;color:#888;filter:alpha(opacity:90);font-family:Verdana;font-size:11px;left:0;opacity:0.9;position:fixed;text-align:left;width:100%;z-index:10000}
Kemudian, masukkan kode dibawah ini tepat sebelum kode </body> (biasanya berada di bagian bawah kode html) :
<div id="navbariebawah"><p>
Tulis kode html yang ingin Anda taruh di bagian kiri
</p>
<p class="riemo">
Tulis kode html yang ingin Anda taruh di bagian kanan
</p></div>
Contoh penggunaan bar navigasi ini dapat dilihat seperti di blog ini. Nah, bila sudah selesai silakan simpan dan lihat hasilnya. Semoga sukses ya...
