Membuat Widget Label Berborder Bawah

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 : http://lh3.ggpht.com/_w3vbLlHM5kg/SbaWQmXKL8I/AAAAAAAAAEc/W7TmnpAs0x4/s144/Arrobblue.png) dan menambah border (warna hitam) di bawah item daftar urutan label dengan garis putus-putus.
  • Sehingga full kodenya adalah
.sidebar li {
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
Posting yang berkaitan : Trik Blogger | Menghilangkan Angka Jumlah Label

Mudah bukan, selamat membuat widget label berborder bawah...

20 komentar untuk “Membuat Widget Label Berborder Bawah”

  1. wah... keren, mmm aku juga pengen coba ah...
    makasih ya buat artikelnya,, bagus.. bagus banget, jdi pnasaran ni, ntar kalo berhasil aku kabarin ya....

    BalasHapus
  2. ee.. lupa pas aku mau edit, tnyata udah ada he he he...
    tpi itu udah bawaan templatenya kali ya...
    thanks..

    BalasHapus
  3. Mantap Mas OB ,, Hmm kalo label yang berbentuk submenu bisa.. sewaktu di klik bisa keluar sub menunya..

    BalasHapus
  4. klo misalnya garis bawah nya didalam tab view gimana, soale sudah aq coba cara diatas gak berhasil

    BalasHapus
  5. salam kenal, blognya bagus n saya bisa belajar banyak...

    BalasHapus
  6. buat border widget gimana y?

    BalasHapus
  7. to myspaceblog: untuk membuat border di widget sidebar khusus blog http://myspacenote.blogspot.com/, silakan cari kode
    .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

    BalasHapus
  8. baik ilmunya mas, untuk tambah2 ilmuku yang masih kurang . trim's

    BalasHapus
  9. wah.,mantav gan tutorial'y,thanks yah gan... ;)

    BalasHapus
  10. keren bro tutorialnya..sipp..praktek langwsung ahh..:)

    BalasHapus
  11. oke punya gan boleh di cobain labelnya

    BalasHapus
  12. wah ini baru keren bisa langsung di praktekkan
    terima kasih gan

    BalasHapus
  13. sukSes slalu mari belanja sayur mayur di pasar induk kramat jati

    BalasHapus