Sunday, January 8, 2012

Membuat Footer Navbar pada Blog

Membuat Footer, Membuat Navbar, Footer navbar, Footer Blogspot,Navbar Blogspot

Selama ini, yang kita tahu bahwa Navbar adalah bagian dari blog yang posisi atau letaknya berada pada bagian header atau atas dari suatu blog. Yang akan Rinjani Lovers suguhkan hari ini berbeda dengan Navbar yang terdapat pada blog yang lain. Dimana letak bedanya? Nabar ini berada pada bagian Footer blog bukan pada bagian Header blog. Pasti sobat blogger bingung. Nah... Untuk menghilangkan kebingungan itu, Silahkan sobat blogger langsung memperaktekkan tutorial yang akan diberikan kali ini.

Cara membuat Footer Navbar sebagai berikut:
  • Silahkan sobat blogger login di http://www.blogger.com/
  • Di bagian Dasboard sobat klik Layout
  • Klik Edit HTML (Back up terlebih dahulu template sobat)
  • Kasih tanda centang pada Expand Widget Template
  • Cari kode ]]></b:skin> dan paste kode berikut di atas kode ]]></b:skin>

#navbar-footer a {
color: #000;
font-weight:bold;
}

#navbar-footer {
align: center;
position: fixed;
border-top: 1px solid #ddd;
border-bottom: 10px solid #f5f5f5;
background-color: #fff;
width: 100%;
left: 0px;
text-align: left;
color: #000;
font-family: Verdana;
font-size: 11px;
z-index:10000;
opacity: 0.9;
filter: alpha(opacity: 90);
bottom:0;
}
  • Kalau sobat sudah melakukan langkah di atas, Cari kode </body> dan letakkan kode berikut setelah kode </body>

<div id='navbar-footer'>
<p align='center'>
<a href='http://rinjanilovers.blogspot.com/'>Rinjani Lovers</a> © Januari 2012<br/>Template Designed by <a href='http://bloggertutorialblog.blogspot.com/profile/01236849813705405028' target='new'>Muhammad Septi Rosidi</a> | on <a href='http://www.blogger.com/' target='new'>Blogger Templates</a></p>
</div>

  • Lakukan Preview sebelum sobat klik save

Tambahan:
Tulisan yang berwarna Orange yang terdapat pada kode kedua, silahkan sobat blogger sesuaikan sendiri.

Hasilnya akan terlihat seperi gabar  di bawah ini

Dapatkan Artikel terbaru Rinjani Lovers secara gratis! Untuk itu, masukkan Email anda pada kolom di bawah ini. Setiap artikel yang kami publikasikan, akan langsung kami kirim ke Email anda

Delivered by FeedBurner

Baca Artikel menarik lainnya di bawah ini...



3 comments:

  1. tutorialnya mantep banget. langsung paktek...

    ReplyDelete
  2. sangat menarik ulasannya bro dan salam kenal dari mico, dan juga kalau ada teman2 yg suka download film box office gratis silakan kunjungi situsnya gue ok, makasi untuk adminnya juga. thanks

    ReplyDelete

home

Copyright © 2012 Tutorial Blogspot | Design by X-Template