Membuat Navbar Footer

Halo sobat-sobat blogger, apa kabar kalian??

Hari ini saya akan memberi tahu cara membuat navbar footer, seperti yang ada di blog saya.

Sobat mau tau kan cara nya??

langsung saja cara beri tahu cara nya, yaitu sebagai berikut:

• Langkah pertama adalah login dulu di Blogger
• Setelah itu sobat pilih Tab Rancangan > Lalu pilih Edit HTML.
• Untuk jaga-jaga, sobat Klik Download Template Lengkap, agar apabila terjadi sesuatu blog sobat bisa di kembalikan seperti semula.
  
• Jangan Lupa Expand Template Widget nya sobat centang dulu.
• Setelah itu sobat cari kode ]]></b:skin>
• Setelah itu sobat letakkan kode di bawah ini di atas kode ]]></b:skin>
  
  
  

  
  

  
  

  
  

  #navbar-footer p {
  float: left;
  margin: 0px;
  padding-top:4px;
  padding-left:10px;
  vertical-align: middle;
  line-height: 1.2;
  }
  #navbar-footer {
  align: center;
  position: fixed;
  border-top: 1px solid #ddd;
  border-bottom: 5px solid #ffffff;
  background-color: #ddd;
  width: 100%;
  left: 0px;
  text-align: left;
  color: #888;
  font-family: Verdana;
  font-size: 10px;
  z-index:10000;
  opacity: 0.9;
  filter: alpha(opacity: 90);
  bottom:0;
  }
  #footer-right {
  text-align:right;
  font-family:verdana;
  font-size:14px;
  font-color:#000000;
  padding-right:30px;
  }
  .rbbox{border: 1px solid #D8D8D8;padding: 5px;
  background-color: #E0F8E0;-moz-border-radius:5px; margin:5px;}
  .rbbox:hover{background-color: #EFFBEF;}
  

  
  
• Setelah itu letakkan kode di bawah ini di atas </body>
  
  
  

  
  

  
  

  
  

  <div id='navbar-footer'>
  <p>
  <table border='0' cellpadding='0' cellspacing='0' width='100%'>
  <tr>
  <td align='left' valign='middle'>&#169; 2010 | ^Mr.NoName^ &#9829; ^Mrs.NoName^<br/>
  Hosted by <a href='http://www.blogger.com' title='blogger'>Blogger</a><br/>
  Thanks For ^Mrs.NoName^.
  </td>
  <td align='right' valign='center'>
  <div align='right' id='footer-right'>
  <a href='Link yang di tuju'>Tentang Link tersebut</a>
  |<a href='Link yang di tuju'>Tentang Link tersebut</a>
  |<a href='Link yang di tuju'>Tentang Link tersebut</a>
  |<a href='Link yang di tuju'>Tentang Link tersebut</a>
  |<a href='Link yang di tuju'>Tentang Link tersebut</a></div>
  <td align='left' valign='middle' width='40'>
  <a href='javascript:scroll(11,12)' title='Back to Top'>
  <img height='50' src='http://www.iconspedia.com/dload.php?up_id=15097' style='margin-bottom: 3px;' width='50'/>
  </a>
  </td>
  </td>
  </tr>
  </table>
  </p>
  </div>
  

• Selesai sudah!. Kini sobat tinggal simpan template dan lihat hasilnya.

NB:
Warna Biru yang Pertama sobat ganti dengan alamat URL yang ingin di tuju.
Warna Biru yang Kedua sobat ganti dengan penjelasan URL yang di tuju tersebut.

Contoh :



Sekian terima kasih, mohon komentarnya ya sob..
Share juga ke teman-teman sobat yang lain ya..