Membuat Widget Label Berborder Bawah
Posted by rike
on
0
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/AVvXsEi16pOHxlvVuXCOM8JU-XnaO5ycUZZrpbZj9NgkSdS7b76VfWK4eRnzcK6ujJaUmIelYWpB56huhdxgCCCJjFcTZ-ouvWTw726ZCT_yHPO6nzAG6slwhe8Rj201a6LZmTtjtFTGFPb31_8/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...
Tagged as: Trik Blogger
About the Author
Write admin description here..
Get Updates
Subscribe to our e-mail newsletter to receive updates.
Share This Post
Related posts
0 comments:
Post a Comment