Untuk template minima baru :
- Sign in
- Klik menu Layout
- Klik menu Edit HTML
- Klik tulisan Download
Template Lengkap, silahkan save dulu template sobat untuk backup data
- Klik kotak kecil di samping
tulisan Expand Template Widget
- Tunggu beberapa saat sampai
proses selesai
- Copy kode berikut lalu paste
pada style sheet css sobat, atau bila bingung simpan saja di atas kode
]]></b:skin>
/* Navigasi buat si juleha
----------------------------------------------- */
#juleha{
height:25px;
text-align: center;
}
#juleha a{
margin:0;
font-size:1.2em;
font-weight:bold;
letter-spacing:-1px;
background-color: #cccccc;
color: #000000;
padding-top:2px;
padding-bottom:2px;
padding-left:4px;
padding-right:4px;
}
#juleha a:hover{
text-decoration:none;
padding:34px 5px 41px 5px;
background-color: #0326FC;
background-repeat: repeat-x;
color:#A7FC03;
padding-top:2px;
padding-bottom:2px;
padding-left:4px;
padding-right:4px;
}
- Copy kode berikut lalu paste
pada kode template seperti di bawah ini, yang berwarna hitam adalah kode
asli dan warna merah adalah kode yang harus di tambahkan :
<div class='descriptionwrapper'>
<p class='description'><span><data:description/></span></p>
<div id="juleha">
<a href="#" target="_blank">Link 1</a>
<a href="#" target="_blank">Link 2</a>
<a href="#" target="_blank">Link 3</a>
<a href="#" target="_blank">Link 4</a>
<a href="#" target="_blank">Link 5</a>
</div>
</div>
</div>
</b:if>
</div>
</b:if>
- Klik tombol Pratinjau
untuk melihat perubahan
- Bila sudah OK, klik tombol SIMPAN
TEMPLATE
- Selesai.
Agar sobat lebih faham, saya akan sedikit memberi keterangan tentang kode-kode yang saya berikan, silahkan simak :
juleha{
height:25px;
text-align: center;
}
· #juleha hanyalah penamaan saja, bisa
di ganti dengan apa saja yang penting nyambung dengan kode yang di bawahnya,
mau ibro, samson, mau tukul juga boleh kalo sobat penggemarnya.
· height:25px; kode ini adalah sebagai
pengatur tingginya tombol navigasi, yang saya pakai adalah sebesar 25 pixel,
boleh di ganti nilainya dan sesuaikan dengan keinginan sobat.
· text-align: center; kode untuk
memposisikan tombol-tombol berada di tengah-tengah, jika ingin mepet di sebelah
kiri ganti kata Center dengan kata left, jika ingin mepet kanan,
ganti dengan right.
#juleha a{
margin:0;
font-size:1.2em;
font-weight:bold;
letter-spacing:-1px;
background-color: #cccccc;
color: #000000;
padding-top:2px;
padding-bottom:2px;
padding-left:4px;
padding-right:4px;
}
#juleha a{
margin:0;
font-size:1.2em;
font-weight:bold;
letter-spacing:-1px;
background-color: #cccccc;
color: #000000;
padding-top:2px;
padding-bottom:2px;
padding-left:4px;
padding-right:4px;
}
· #juleha a penamaan agar nyambung
dengan kode diatasnya, dan kode-kode di yang di tulis bawahnya adalah yang akan
muncul sebelum di sorot oleh mouse pengunjung blog.
· font-size:1.2em; ukuran huruf yang di
pake sebesar 1.2 . jika ingin lebih besar atau lebih kecil, silahkan ganti saja
nilainya.
· font-weight:bold; agar link yang di
tulis hurufnya di cetak tebal, jika tidak mau ganti saja tulisan bold
dengan tulisan normal.
· background-color: #cccccc; kode untuk
membuat warna latar belakang tombol. kode warna #cccccc adalah kode untuk
abu-abu, silahkan sobat ganti dengan warna yang sobat sukai.
· color: #000000; kode untuk warna huruf
link, #000000 adalah kode warna hitam, silahkan ganti dengan warna yang sobat
sukai.
#juleha a:hover{
text-decoration:none;
background-color: #0326FC;
background-repeat: repeat-x;
color:#A7FC03;
padding-top:2px;
padding-bottom:2px;
padding-left:4px;
padding-right:4px;
#juleha a:hover{
text-decoration:none;
background-color: #0326FC;
background-repeat: repeat-x;
color:#A7FC03;
padding-top:2px;
padding-bottom:2px;
padding-left:4px;
padding-right:4px;
· #juleha a:hover adalah kode yang di
harapkan ketika mouse menyorot pada kode tombol yang di definisakan oleh
kode-kode yang ada di kode #juleha a.
· background-color: #0326FC; kode untuk
membuat warna latar belakang tombol ketika mouse menyorot. kode warna #0326FC
adalah kode untuk biru, silahkan sobat ganti dengan warna yang sobat sukai.
· color:#A7FC03; kode untuk warna huruf
link ketika mouse menyorot, #A7FC03 adalah kode warna hijau terang, silahkan
ganti dengan warna yang sobat sukai.
<div id="juleha">
<a href="#" target="_blank">Link 1</a>
<a href="#" target="_blank">Link 2</a>
<a href="#" target="_blank">Link 3</a>
<a href="#" target="_blank">Link 4</a>
<a href="#" target="_blank">Link 5</a>
</div>
<div id="juleha">
<a href="#" target="_blank">Link 1</a>
<a href="#" target="_blank">Link 2</a>
<a href="#" target="_blank">Link 3</a>
<a href="#" target="_blank">Link 4</a>
<a href="#" target="_blank">Link 5</a>
</div>
· <div id="juleha"> kode
pembuka juleha. Apa-apa yang di simpan di bawah kode ini, mengacu kepada apa
yang di definisikan oleh kode juleha.
· <a href="#"
target="_blank">Link 1</a> kode untuk membuat link.
· href="#" ganti tanda pagar
(#) dengan URL atau link yang ingin sobat tuliskan. contoh : jika saya ingin
membuat link ke blog ini, maka tanda pagar tadi saya ganti dengan
http://kolom-tutorial.blogspot.com
· target"_blank" adalah kode
untuk memunculkan jendela baru ketika link di klik oleh pengunjung, bila tidak
ingin ada jendela baru, maka hilangkan kode ini.
· Link 1 ganti tulisan ini dengan
tulisan link yang sobat inginkan. contoh : untuk menuliskan blog ini saya ganti
dengan kata Kolom Tutorial
jadi kira-kira link yang tadi akan menjadi seperi ini :
<a href="http://kolom-tutorial.blogspot.com" target="_blank">Kolom Tutorial</a>
jadi kira-kira link yang tadi akan menjadi seperi ini :
<a href="http://kolom-tutorial.blogspot.com" target="_blank">Kolom Tutorial</a>
· </div> adalah kode penutup buat
kode si juleha.
Contoh link yang saya berikan diatas adalah sebanyak lima buah link, ini bisa sobat kurangi atau bisa juga di tambah, akan tetapi jika space yang tersedia penuh maka tombol akan secara otomatis berpindah ke bawah, oleh sebab itu sesuaikanlah dengan space yang ada.
Bagaimana sobat, bingung tidak? mudah-mudahan dapat di mengerti.
Contoh link yang saya berikan diatas adalah sebanyak lima buah link, ini bisa sobat kurangi atau bisa juga di tambah, akan tetapi jika space yang tersedia penuh maka tombol akan secara otomatis berpindah ke bawah, oleh sebab itu sesuaikanlah dengan space yang ada.
Bagaimana sobat, bingung tidak? mudah-mudahan dapat di mengerti.
0 komentar:
Posting Komentar