Sulit juga bikin judul yang mengena dengan isi postingan, pokoknya seperti itulah. Agar tidak membayangkan yang lain, seperti apa rupanya langsung lihat contoh di sidebar kanan widget blog OB. Nah, di sana tempat lahir beta... Ups!?? Maksudnya kamu lihat label yang ada tambahan icon di depan label (panah biru) dan bergaris putus-putus di bawahnya. Dan ini juga sekaligus jawaban atas pertanyaan Caplin_Banjar dalam komentarnya di posting "Trik Memasang Fungsi Scroll".
Dengan tidak panjang lebar langsung kita kupas trik blogger untuk membuat label tersebut :
- Login ke account blogger kamu.
- Pilih Tata Letak --> Edit HTML.
Tips : Sebelum melakukan edit template, sebaiknya simpan dulu template kamu yang ada dengan meng-klik tulisan Download Template Lengkap. Kemudian simpan dalam harddisk atau media penyimpanan lainnya, sehingga jika terjadi hal-hal yang tidak diinginkan kamu sudah memiliki back-up untuk mengembalikannya seperti semula.
- Cari kode berikut diantara <head> ... </head>:
.sidebar li {
margin:0;
padding:0 0 .25em 17px;
line-height:1.2em;
}
atau kode-kode yang sejenis dalam template blog kamu.
Tips : Kalau susah mencarinya, coba tekan tombol F3 di keyboard. Maka akan muncul menu toolbar pencarian di bawah browser (Firefox), sehingga kamu tinggal memasukkan kata yang ingin dicari.
- Tambahkan kode yang berwarna hijau berikut, di bawah kode di atas
background:url("http://Alamat_Penyimpanan_Image_Kamu") no-repeat 0px .20em;
border-bottom:1px dotted #000000;
Artinya : Kamu mengganti icon daftar urutan dengan image di alamat penyimpanan file image kamu (ex : https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMC4r3vVTVCG2HUl5GNVOiyvt6zEwRPND_i7myDRl3samyHiuoQWotNtitdH1-FVa6UDZGud4jnme5GBImitJFYWE1ciRnWSt4O-ijCBNfd1PxVfuRl1qQHFyFiCl9VrYRJ0jvXaG7j0c/s144/Arrobblue.png) dan menambah border (warna hitam) di bawah item daftar urutan label dengan garis putus-putus.
- Sehingga full kodenya adalah
background:url("http://Alamat_Penyimpanan_Image_Kamu") no-repeat 0px .20em;
border-bottom:1px dotted #000000;
margin:0;
padding:0 0 .25em 17px;
line-height:1.2em;
}
- Jangan lupa disimpan
Mudah bukan, selamat membuat widget label berborder bawah...
wah... keren, mmm aku juga pengen coba ah...
BalasHapusmakasih ya buat artikelnya,, bagus.. bagus banget, jdi pnasaran ni, ntar kalo berhasil aku kabarin ya....
ee.. lupa pas aku mau edit, tnyata udah ada he he he...
BalasHapustpi itu udah bawaan templatenya kali ya...
thanks..
Mantap Mas OB ,, Hmm kalo label yang berbentuk submenu bisa.. sewaktu di klik bisa keluar sub menunya..
BalasHapusklo misalnya garis bawah nya didalam tab view gimana, soale sudah aq coba cara diatas gak berhasil
BalasHapussalam kenal, blognya bagus n saya bisa belajar banyak...
BalasHapusbuat border widget gimana y?
BalasHapusto myspaceblog: untuk membuat border di widget sidebar khusus blog http://myspacenote.blogspot.com/, silakan cari kode
BalasHapus.sidebar .widget {
..... }
Tambahkan kode "border: 1px solid #000000;" (tanpa tanda petik dua dan ganti kode warna [#000000] sesuai blog kamu) diantara kurung kurawal .sidebar .widget
baik ilmunya mas, untuk tambah2 ilmuku yang masih kurang . trim's
BalasHapuswah.,mantav gan tutorial'y,thanks yah gan... ;)
BalasHapuskeren bro tutorialnya..sipp..praktek langwsung ahh..:)
BalasHapussalam kenal dan sukses selalu
BalasHapusoke punya gan boleh di cobain labelnya
BalasHapusTrima kasih bnyak...
BalasHapuswah ini baru keren bisa langsung di praktekkan
BalasHapusterima kasih gan
Thank's.....
BalasHapusmakasih infonya om
BalasHapussukSes slalu mari belanja sayur mayur di pasar induk kramat jati
BalasHapustrik yang sangat bermanfaat
BalasHapusmantab om....dicoba...
BalasHapus