Cara Menambahkan Icon Atau Image Disamping Title Sidebar 0

Saat ini saya ingin berbagi tentang bagaimana Cara Menambahkan Icon atau Gambar tepat di samping title sidebar .Seperti gambar dibawah ini.

Ada empat langkah yang harus kita lakukan untuk membuatnya :

Cari Icon(gambar) yang kamu suka.
Upload Icon (gambar)kesebuah web hosting.
Buat Css untuk header sidebar (title).
Edit Css Header sidebar (title).

Pengaplikasian langkah diatas :

1. Cari icon atau gambar yang anda inginkan buat icon/gambar menjadi kecil kira-kira 25x25 px

2. Setelah anda melakukan langkah pertama kemudian upload gambar tersebut ke sebuah webhosting misalnya photobucket.com untuk mendapatkan direct link dari gambar yang telah anda pilih .

3. Pada langkah ketiga ini anda login ke blogger kemudian pilih layout >>> Edit HTML centang kotak kecil di sebelah Expand Widget Templete dan kemudian upload templete untuk membackup templete anda agar tidak hilang jika terjadi sesuatau langkah selanjutnya copy paste code css dibawah ini tepat diatas code

]]></b:skin>

.sidebar h2 {
background:url(URL icon/gambar);
background-repeat: no-repeat;
background-position:left center;
height:25px;
margin:0;
padding:10px 3px 0 30px;
line-height:1.5em;
text-transform:uppercase;
letter-spacing:.2em;
}

4. Dan sebagai langkah terakhir anda tinggal edit code css diatas sesuai dengan yang anda inginkan

I . Ganti

URL icon/gambar

dengan direct link icon/gambar yang telah anda buat

II . Menyesuaikan tinggi icon/gambar ,jika tinggi icon atau gambar anda 40px maka garisnya akan menjadi 40px.

III . Pading dengan pading ini anda bisa menyesuaikan title



jika anda menambahkan padding atas menjadi 20px ini akan menjadikan title turun kebawah.dan jika anda mengurangi padding sebelah kiri menjadi 20px ini akan menjadikan title tertarik kesebelah kiri.

IV . Dan untuk

text-transform:uppercase;

anda bisa menyesuaikan dengan lowercase

V . Sedangkan untuk

letter-spacing:.2em;

anda bisa mengeditnya sesuai dengan yang anda inginkan dan ini akan merubah spasi pada title
Dan selesai....