Tutorial Membuat Navbar bertanda Tangan di Footer Blog

Tutorial Membuat Navbar abertanda Tangan di Footer Blog

Navbar adalah kependekan dari Navigation Bar, yaitu suatu bar panjang berbentuk frame yang berisi berbagai menu navigasi yang memiliki fungsi-fungsi tertentu.

1. Jika sobat menginginkan dalam navbar bertanda Tangan di Footer Blog, 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 (tanda tangan saya agak mirip dengan yang punya mas anang) :

1. 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. 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://favatar.myfavatar.com/amen24.png
http://amen24.googlepages.com/TandaTangan_03.gif

2. 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;

}

1. 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://favatar.myfavatar.com/amen24.png"/>&#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>

Tadinya saya mau menerangkan tentang kode CSS yang saya pasang di atas, akan tetapi rasanya saya agak kurang enak badan jadi pinginnya singkat saja. sebagai catatan, kode yang saya cetak merah berarti harus di ganti dengan link atau tulisan yang sobat miliki.

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;




}

1. 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://favatar.myfavatar.com/amen24.png"/>&#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>

2. Klik tombol Simpan Perubahan Template
3. 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;

1. 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://favatar.myfavatar.com/amen24.png"/>&#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>

2. Klik tombol Simpan Template
3. Selesai.

Itu tadi langkah-langkah yang di lakukan untuk membuat navbar, untuk melihat contoh dari hasil pemasangan kode di atas, sobat bisa mengunjungi blog saya yang satunya yaitu di http://template unik.blogspot.com. Arahkan scroll bar ke bagian paling bawah blog, maka nanti sobat bisa melihat navbar yang mirip punya blogger.  Selamat mencoba. Semoga bermanfaat