Ada kemungkinan bahwa navbar yang saya buat ini agak berbeda dengan miliknya mas anang, maklum lah lain orang lain ilmu, walaupun sebenarnya ilmu ini saya pelajari dari templatenya mas anang sendiri. Apa itu navbar? agar tidak bingung, coba alihkan pandangan sobat ke bagian paling atas blog ini ! di sana terlihat satu frame miliknya blogger untuk memudahkan kita sigin di blogger, nah seperti itulah navbar yang saya maksud.
Untuk membuat gambar seperti itu, ada beberapa langkah yang harus sobat lakukan, di antaranya :
- 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 :
- 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 :
- Langkah selanjutnya adalah memasukan kode CSS untuk navbar yang di buat, contoh kodenya seperti ini :
- Langkah berikutnya adalah memasukan kode navbar pada body template, contoh kodenya seperti ini :
atau gambar tanda tangan seperti ini (tanda tangan saya agak mirip dengan yang punya mas anang) :
http://favatar.myfavatar.com/amen24.png
http://amen24.googlepages.com/TandaTangan_03.gif
/* 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;
http://favatar.myfavatar.com/amen24.png"/>
http://template-unik.blogspot.com">Template Unik
© 2007 |
Design by http://kolom-tutorial.blogspot.com" target="_blank">Rohman Abdul Manap
http://amen24.googlepages.com/TandaTangan_03.gif"/>
Powered by Blogger |
thanks to Feed burner
Best viewed in Firefox 1.5+ at 1024x768 or higher resolution
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
- Sign in di blogger
- Klik menu Template
- Klik menu Edit HTML
- Copy seluruh kode template sobat, paste di notepad kemudian save di komputer sobat sebagai backup data
- Copy paste kode berikut ! simpan antara kode . atau jika bingung, simpan saja persis di atas kode
- Copy paste kode berikut persis di atas kode
/* 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;
0 komentar:
Speak up your mind
Tell us what you're thinking... !