Memasang Navbar Footer

Navbar Footer adalah tema kali ini, maksud dari tema di atas itu sama dengan Navbar yang di berikan blogger namun perbedaannya adalah penempatan, kalau navbar dari blogger posisinya tepat di atas sedangkan Navbar footer ini posisinya melayang seperti Float Image.

Dalam pemasangan Navbar Footer sangat mudah dan sangat simple, hanya memindahkan kode-kode yang nanti saya akan berikan dan sobat bisa memodifikasinya sesuai kreatifitas sobat sendiri.

Nah sekarang waktunya Memasang Navbar Footer, ikuti y langkah-langkah di bawah ini :

1. Seperti biasa sobat harus login ke blogger dengan Id dan password sobat sendiri
2. langsung saja kita menuju Tata letak ==>> Edit HTML
3. Setelah masuk ke Edit HTML Backup terlebih dahulu template sobat agar tidak terjadi hal yang tidak di inginkan, setelah itu sobat cari kode ]]></b:skin> lalu taruh kode CSS di bawah ini tepat di atasnya
   
   
   
   #navbar-footer p.info {
   float: right;
   padding-right:40px;
   line-height: 1.2;
   height: 100%;
   vertical-align: bottom;
   }
   
   #navbar-footer p {
   float: left;
   margin: 0px;
   padding-top:4px;
   padding-left:40px;
   vertical-align: bottom;
   line-height: 1.2;
   }
   
   #navbar-footer a {
   color: #333;
   }
   
   #navbar-footer {
   align: center;
   position: fixed;
   border-top: 1px solid #262626;
   background-color: #0068CF;
   width: 100%;
   left: 0px;
   text-align: left;
   color: #fff;
   font-family: Arial;
   font-size: 12px;
   z-index:10000;
   opacity: 0.9;
   filter: alpha(opacity: 90);
   bottom:0;}
   
   #navbar-footer{opacity:0.0;filter:alpha(Opacity=0)}
   #navbar-footer:hover{opacity:1.0;filter:alpha(Opacity=100, FinishedOpacity=100)}
   
   
   Pemberitahuan :
   
   • Diatas adalah Navbar Footer Auto hide, apabila sobat tidak ingin menjadi auto hide, sobat harus menghapus kode yang berwarna merah di atas
     
   
   
4. Setelah itu cari tag </body> dan letakkan kode di bawah ini tepat di bawahnya
   
   
   
   <div id="navbar-footer">
   <p>
   <img border="0" src="http://sites.google.com/site/oketrik/oketrik/take%28040%29.jpg?attredirects=0" width="30px" height="30"/><a href="http://oketrik.blogspot.com/index.html">oketrik Blog</a>10 Desember 2009</p>
   <p class="info">Powered by <a href="http://www.blogger.com">Blogger</a> | Kreasi by <a href="http://www.oketrik.blogspot.com" target="_blank">Oketrik</a><br/>Kumpulan Trik lengkap dan Informasi seputar dunia blog
   <br/>
   </p>
   </div>
   
   
   
   Pemberitahuan :
   
   • kode yang berwarna hijau bisa sobat ganti dengan keinginan sobat sendiri
     
   
   
5. Setelah selesai sekarang sobat bisa menympan dan lihat hasilnya

Mudah bukan Memasang Navbar Footer?? pastinya mudah , apabila sobat tahu sedikit saja tentang kode-kode di atas mungkin sobat bisa memodifikasinya dengan menambah hal-hal yang lebih menarik untuk di lihat.

Untuk Contoh dari trik diatas sobat bisa lihat di sini. Nah ada sedikit info lagi kalau sobat ingin Navbar ini terlihat transparent sobat tinggal tambahkan saja kode ini

#navbar-footer { opacity:0.2; filter:alpha(Opacity=0); }
#navbar-footer:hover { opacity:0.5; filter:alpha(Opacity=100, FinishedOpacity=50); }
di bawah kode bottom:0; }

Bagikan Artikel : Facebook Twitter Google+ Linkedin Technorati Digg