Membuat Footer Navbar atau Navbar Bawah

Dalam dunia blogger, upaya mempercantik tampilan blog dan menambahnya dengan berbagai aksesoris bukanlah hal yang baru. Hal ini bertujuan agar pengunjng tidak merasa bosan dengan blog kita. Dan postingan kali ini saya mencoba berbagi tips-trik kepada sobat untuk membuat Footer Navbar atau Navbar Bawah. Navbar (navigation bar)tersebut senantiasa muncul pada bagian bawah blog kita, meskipun halaman tergulung (scrolled) ke atas maupun ke bawah. Ada dua macam cara buat navbar yang akan saya sharingkan kali ini, meski keduanya hampir sama, yakni miliknya Mas Anang dan Kang Rohman. Bagi sobat yang sudah paham, silahkan diabaikan saja, dan bagi yang belum paham, silahkan simak sampai selesai.

Untuk footer navbar di blog ini, saya memgambil miliknya Mas Anang, dengan warna yang transparan. Nah, untuk membuatnya berikut ini akan saya tunjukkan beberapa langkah-langkahnya. Pertama sekali tentunya anda harus login dulu ke akun Blogger anda. Buka Dasbor dan klik pada menu Layout dilanjutkan dengan menu Edit HTML dan beri tanda centang pada Expand Template Widget. Lalu pastekan kode CSS berikut ini persis sebelum tanda ]]></b:skin>:

#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 #ddd;
border-bottom: 10px solid #f5f5f5;
background-color: #f5f5f5;
width: 100%;
left: 0px;
text-align: left;
color: #888;
font-family: Verdana;
font-size: 11px;
z-index:10000;
opacity: 0.9;
filter: alpha(opacity: 90);
bottom:0;
}


Langkah selanjutnya, masukkan kode berikut persis sebelum </body>:

<div id="navbar-footer">
<p>
<img border="0" src="http://1.bp.blogspot.com/_KL7_V6HnzdI/RhrTtnaiJEI/AAAAAAAAASA/UinYkP1S3js/s400/anang.jpg"/>&#160;&#160;<a href="http://anangku.blogspot.com/index.html">Anang's Blog</a>&#160;&#169;&#160;2006-2008 <img border="0" src="http://4.bp.blogspot.com/_KL7_V6HnzdI/RhrNtXaiI1I/AAAAAAAAAQI/LrvOUJvlDKg/s400/signature.gif"/></p>
<p class="info">Powered by <a href="http://www.blogger.com">Blogger</a> | Created and Maintained by <a href="http://www.friendster.com/anangku" target="_blank">Anang</a><br/>Best viewed in Firefox 1.5+ at 1024x768 or higher resolution
<br/>
</p>
</div>

Ganti semua yang berhuruf tebal warna merah sesuai dengan keinginan sobat..Ya, Sesuai dengan blog dan identitas ... avatar, tandatangan, URL Blog/Friendster. Dan tentunya, sobat bisa memodofikasi warnanya dengan merubah kode html warna. Belum hafal? Silahkan klik di sini.



Navbar Bawah Kang Rohman

Untuk Versi kang Rohman, link yang dipasang di navbar lebih banyak daripada versi masa Anang. ini barangkali yang disebut Kang Rohman sebagai perbedaannya, selain pada kode-kode yang dipakai. Silahkan ikuti tutorial di bawah ini.



Untuk navbar bawah versi Kang Rohman ini akan dijelaskan agak terperinci. Silahkan ikuti sampai selesai jika sobat berminat. Untuk membuat gambar seperti itu, ada beberapa langkah yang harus sobat lakukan, di antaranya :

1. Jika sobat menginginkan dalam navbar tersebut terpampang foto atau logo ataupun tanda tangan seperti miliknya mas anang, maka buatlah terlebih dahulu foto/logo atau gambar berbentuk tanda tangan, tapi tentunya dalam ukuran yang kecil. Contoh seperti gambar berikut ini :






atau gambar tanda tangan seperti ini :






2. jika foto/logo atau gambar tanda tangan sudah selesai di buat, maka langkah selanjut adalah meng upload foto tersebut ke hosting untuk menyimpan gambar, bisa ke blogger ataupun hosting lain, seperti Photobucket atau Yahoogeocities. Setelah di upload, catatlah alamat gambar tersebut untuk keperluan nanti di simpan di dalam navbar. Contoh alamat foto dan tanda tangan di atas seperti ini :



http://i290.photobucket.com/albums/ll256/angkatan2006/khusus/bahauddinicon2copy.jpg


http://amen24.googlepages.com/TandaTangan_03.gif



3. Langkah selanjutnya adalah memasukan kode CSS untuk navbar yang di buat, contoh kodenya seperti ini :





/* kode untuk navbar

--------------------------------------- */

#navbar-bawah img {

/* margin: 0px 0px -8px 0px; */

vertical-align: middle;

}




#navbar-bawah p.info {

float: right;

padding-right:40px;

line-height: 1.5;

height: 100%;

vertical-align: bottom;

}




#navbar-bawah p {

float: left;

margin: 0px;

padding-top:4px;

padding-left:40px;

line-height: 1.2;

vertical-align: bottom;

}




#navbar-bawah a {

color:#00CCFF;

text-decoration:none;

}

#navbar-bawah a:hover{

color: #00FFFF;

}

#navbar-bawah {

align: center;

position: fixed;

border-top: 1px solid #ddd;

border-bottom: 5px solid #003366;

background-color: #114477;

width: 100%;

left: 0px;

text-align: left;

color: #ffffff;

font-family: verdana;

font-size: 12px;

z-index:10000;

bottom:0;


}








4. Langkah berikutnya adalah memasukan kode navbar pada body template, contoh kodenya seperti ini :






<br/><br/>

<div id="navbar-bawah">

<p><img border="0" src="http://i290.photobucket.com/albums/ll256/angkatan2006/khusus/bahauddinicon2copy.jpg"/>&#160;&#160;&#160;

<a href="http://template-unik.blogspot.com"><b>Template Unik</b>

</a>&#160;&#160;&#169;&#160;2007&#160;|

Design by <a href="http://kolom-tutorial.blogspot.com" target="_blank">Rohman Abdul Manap</a>

&#160;&#160;&#160;<img border="0" src="http://amen24.googlepages.com/TandaTangan_03.gif"/></p>

<p class="info">Powered by <a href="http://www.blogger.com">Blogger</a> |

thanks to <a href="http://www.feedburner.com" target="_blank">Feed burner</a><br/>

Best viewed in Firefox 1.5+ at 1024x768 or higher resolution</p>

</div>



Sebagai catatan, kode yang dicetak merah berarti harus di ganti dengan link atau tulisan yang sobat miliki, yang sebelumnya sudah diupload.


Untuk cara pemasangan kode di atas, silahkan ikuti langkah berikut ini :


Untuk Template Klasik

1. Sign in di blogger




2. Klik menu Template




3. Klik menu Edit HTML




4. Copy seluruh kode template sobat, paste di notepad kemudian save di komputer sobat sebagai backup data




5. Copy paste kode berikut ! simpan antara kode <style type="text/css"> dan kode </style>.
   atau jika bingung, simpan saja persis di atas kode </style>





/* kode untuk navbar

--------------------------------------- */

#navbar-bawah img {

/* margin: 0px 0px -8px 0px; */

vertical-align: middle;

}




#navbar-bawah p.info {

float: right;

padding-right:40px;

line-height: 1.5;

height: 100%;

vertical-align: bottom;

}




#navbar-bawah p {

float: left;

margin: 0px;

padding-top:4px;

padding-left:40px;

line-height: 1.2;

vertical-align: bottom;

}




#navbar-bawah a {

color:#00CCFF;

text-decoration:none;

}

#navbar-bawah a:hover{

color: #00FFFF;

}

#navbar-bawah {

align: center;

position: fixed;

border-top: 1px solid #ddd;

border-bottom: 5px solid #003366;

background-color: #114477;

width: 100%;

left: 0px;

text-align: left;

color: #ffffff;

font-family: verdana;

font-size: 12px;

z-index:10000;

bottom:0;


}










6. Copy paste kode berikut persis di atas kode </body> (ganti yang tercetak merah dengan milik sobat) :






<br/><br/>

<div id="navbar-bawah">

<p><img border="0" src="http://i290.photobucket.com/albums/ll256/angkatan2006/khusus/pujangg.jpg"/>&#160;&#160;&#160;

<a href="http://arsipmakalah.blogspot.com"><b>Arsip Makalah Blog's</b>

</a>&#160;&#160;&#169;&#160;2007&#160;|

Design by <a href="http://bahauddin-amyasi.blogspot.com" target="_blank">Bahauddin Amyasi</a>

&#160;&#160;&#160;<img border="0" src="http://i290.photobucket.com/albums/ll256/angkatan2006/khusus/iconplato.jpg"/></p>

<p class="info">Powered by <a href="http://www.blogger.com">Blogger</a> |

thanks to <a href="http://www.feedburner.com" target="_blank">Feed burner</a><br/>

Best viewed in Firefox 1.5+ at 1024x768 or higher resolution</p>

</div>







7. Klik tombol Simpan Perubahan Template




8. Selesai.

Untuk Template baru (new blogger template)

1. Sign in di blogger




2. Klik menu layout




3. Klik menu Edit HTML




4. Klik tulisan Download Full Template, lalu save data tersebut. Ini untuk berjaga-jaga apabila terjadi kesalahan dalam mengedit kode template




5. Copy paste kode berikut ! simpan di atas kode ]]></b:skin>





/* kode untuk navbar

--------------------------------------- */

#navbar-bawah img {

/* margin: 0px 0px -8px 0px; */

vertical-align: middle;

}




#navbar-bawah p.info {

float: right;

padding-right:40px;

line-height: 1.5;

height: 100%;

vertical-align: bottom;

}




#navbar-bawah p {

float: left;

margin: 0px;

padding-top:4px;

padding-left:40px;

line-height: 1.2;

vertical-align: bottom;

}




#navbar-bawah a {

color:#00CCFF;

text-decoration:none;

}

#navbar-bawah a:hover{

color: #00FFFF;

}

#navbar-bawah {

align: center;

position: fixed;

border-top: 1px solid #ddd;

border-bottom: 5px solid #003366;

background-color: #114477;

width: 100%;

left: 0px;

text-align: left;

color: #ffffff;

font-family: verdana;

font-size: 12px;

z-index:10000;

bottom:0;










6. Copy paste kode berikut persis di atas kode </body> (ganti yang tercetak merah dengan milik sobat) :






<br/><br/>

<div id="navbar-bawah">

<p><img border="0" src="http://i290.photobucket.com/albums/ll256/angkatan2006/khusus/pujangg.jpg"/>&#160;&#160;&#160;

<a href="http://arsipmakalah.blogspot.com"><b>Arsip Makalah Blog's</b>

</a>&#160;&#160;&#169;&#160;2007&#160;|

Design by <a href="http://bahauddin-amyasi.blogspot.com" target="_blank">Bahauddin Amyasi</a>

&#160;&#160;&#160;<img border="0" src="http://i290.photobucket.com/albums/ll256/angkatan2006/khusus/iconplato.jpg"/></p>

<p class="info">Powered by <a href="http://www.blogger.com">Blogger</a> |

thanks to <a href="http://www.feedburner.com" target="_blank">Feed burner</a><br/>

Best viewed in Firefox 1.5+ at 1024x768 or higher resolution</p>

</div>





<

7. Klik tombol Simpan Template




8. Selesai.

Itu tadi langkah-langkah yang di lakukan untuk membuat navbar, untuk melihat contoh dari hasil pemasangan kode di atas, sobat bisa mengunjungi blog HMJ PBA di sini !atau Blog Aggkatan 2006 di sini !


Selamat mencoba !
Thank's to Mas Anang dan Kang Rohman.