Menyisipkan Gambar Sebelum Judul Artikel

Jika kamu ingin tampilan Blog kamu lebih meriah atau ekspresif, kamu bisa aja menyisipkan sebuah gambar atau icon kecil di setipa judul artikel kamu. Mau tau caranya: :)

• Login ke account Blogger
• Pilih Layout --> edit HTML
• Cari kode script dibawah ini atau yang mirip dengannya

.post h3 {
margin:.5em 0;
padding:30px 0px 0px 45px;
font-size:120%;
font-weight:bold;
font-style:italic;
line-height:1.3em;
color:#333;
}

Kalau tidak ada cari yang seperti ini:

.post-title {
margin:.5em 0;
padding:30px 0px 0px 45px;
font-size:120%;
font-weight:bold;
font-style:italic;
line-height:1.3em;
color:#333;
}

• Hapus kode padding:30px 0px 0px 45px; ganti dengan yang dibawah ini:

padding:48px 0px 0px 45px;
height:48px;
background:url(http://www.iconarchive.com/icons/mayosoft/aero-vista/TextoPlano-48x48.png) no-repeat left center;

kamu bisa ganti kode yang berwarna biru dengan lokasi gambar kamu dan jika jarak gambar dengan judul bertumpuk/ tabrakan kamu bisa edit kode padding, sampai ketemu hasil yang terbaik.

Seluruh kode diatas akan tampak seperti dibawah ini

.post h3 {
margin:.5em 0;
padding:48px 0px 0px 45px;
height:48px;
background:url(http://www.iconarchive.com/icons/mayosoft/aero-vista/TextoPlano-48x48.png) no-repeat left center;
font-size:120%;
font-weight:bold;
font-style:italic;
line-height:1.3em;
color:#333;
}

• Simpan

beberapa alternatif pengganti gambar:

http://www.iconarchive.com/icons/icons-land/vista-style-emoticons/Cool-48x48.png

http://www.iconarchive.com/icons/icons-land/vista-style-emoticons/Cool-48x48.png

http://www.iconarchive.com/icons/fasticon/avartar-girls/girl-5-48x48.png

http://www.iconarchive.com/icons/fasticon/avartar-girls/girl-9-48x48.png

http://www.iconarchive.com/icons/icons-land/vista-style-emoticons/Adore-48x48.png

http://www.iconarchive.com/icons/icons-land/vista-style-emoticons/Laugh-48x48.png

Related Posts