Cara buat ikon/gambar untuk Label dan Link Sidebar di Blogger

Tweet

Dengan cara ini, Anda dapat membuat Blogger Link template XML (label dan semua link lainnya) tampak lebih bagus. Tergantung apa Anda suka atau tidak. Jadi, inilah yang harus Anda lakukan. Ini adalah contoh dan ingat, Anda dapat menambahkan gambar apapun yang Anda suka. Juga ambil satu ini, jika Anda suka...

Kami telah menambahkan panah hitam untuk label kami untuk membuat sedikit lebih beda. Pertama, Anda harus menyiapkan gambar (ikon, gambar). Pilih satu yang Anda suka, tetapi perlu diingat:


Buat gambar kecil dengan ukuran 15 x 15 (px). lebih kecil juga oke-oke saja dan simpan foto Anda sebagai format gambar ".png" saat mengedit di editor (sehingga mereka berbaur dengan latar belakang template)


Anda juga tidak harus menggunakan format ".png" jika latar belakang ikon(gambar) adalah sama dengan warna latar belakang template Anda dan upload gambar Anda ke layanan web host gratis (Photobucket, Picasa, TinyPic ...)

Ok. Sekarang kode. Back up template Anda.
Lalu pergi ke:  menu Template >> Procced >> EDIT HTML >> centang Expand Template Widget dan temukan kode berikut (tekan Ctrl + F) :

.sidebar ul {
list-style:none;
margin:0 0 0;
padding:0 0 0;
}
.sidebar li {
margin:0;
padding-top:0;
padding-$endSide:0;
padding-bottom:.25em;
padding-$startSide:15px;
text-indent:-15px;
line-height:1.5em;
}

Kode Script diatas tidak semua template sama. Jadikan gunakan kepintaran otak Anda untuk menemukan kode yang hampir sama/sama dengan kode diatas.

Dan ganti semua kode diatas dengan kode dibawah ini :

 .sidebar ul {list-style:none;
margin:0 0 0;
padding:10px 0 0;
}
.sidebar ul li {
background:url("http://i33.tinypic.com/332b6dt.jpg") no-repeat 2px .25em;
margin:0;
padding:0 0 3px 16px;
margin-bottom:2px;
text-indent:7px;
line-height:1.3em;
}

Pada warna kuning, Anda dapat mengganti URL dari gambar yang digunakan dalam tutorial ini. Hanya mengganti alamat URL yang berwarna kuning dengan URL gambar yang Anda upload.


Simpan Pengaturan. Dan itu saja.




CATATAN:

"text-indent: 7px;" - Anda dapat mengubah jarak antara teks dan ikon dengan ini (ubah 7px; ke yang lebih tinggi untuk meningkatkan jarak)
"line-height: 1.3em;" - mengubah ruang vertikal (tinggi baris) antara link
Anda dapat menambahkan beberapa batas (line) antara link individu (border-bottom: 1px solid $ bordercolor;)