Menambah Gambar Sebelum Judul Postingan

Banyak berbagai macam cara dilakukan para Blogger untuk membuat blog nya lebih bagus dan juga lebih menarik,salah satunya dengan menambahkan gambar atau image sebelum judul postingan (klik disini untuk melihat contihnya) supaya lebih berkesan artistic dan bagus dilihat oleh pengunjung,tapi bagaimana ya cara membuatnya

Tenang saja kali ini KK akan berbagi ilmu kepada para Sobat Blogger cara membuatnya, Ok kita langsung aja,silahkan Log in terlebih dahulu ke accunt blogger anda lalu masuk ke menu Layout kemudian masuk menu Edit HTML lalu…?

Lalu Cari Code CSS seperti dibawah ini yang mirip di blog Anda(karna masing-masing blog berbeda)

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

jika kodenya sudah ketemu, lalu tambahkan kode berikut

height:48px;
background:url(http://www.iconarchive.com/icons/rokey/eicodesign/folder-apple-with-file-32x32.png) no-repeat left center;

sehingga susunanya menjai seperti ini:

.post h3 {
margin:.5em 0;
padding: 33px 2px 2px 33px;
font-size:120%;
font-weight:bold;
font-style:italic;
line-height:1.3em;
color:#ccc;
height:48px;
background:url(http://www.iconarchive.com/icons/rokey/eicodesign/folder-apple-with-file-32x32.png) no-repeat left center;

Keterangan:

Padding : kesesuaian antara letak gambar dengan judul postingan (ubah paddingnya dan sesuaikan dengan judul postingan anda)

Background: alamat penyimpanan gambar ganti dengan url tempat penyimpanan gambarmu

Note:jika gambar terlihat tidak teratur susunanya dengan judul postingan otak-atik aja paddingnya sampai terlihat sempurna,tapi jika anda mengunakan gambar yang saya berikan paddingnya seperti ini 33px 2px 2px 33px;

Lalu simpan templatemu dan lihat hasilnya dan jika gambarnya tidak tepat atau kurang terlihat utak-atik aja paddingnya

Jika anda ingin mencari koleksi gambar yang lainya Anda Bisa Cari di www.iconarchive.com.

Gimana sampai sini udah cukup ngertikan,jika ada pertanyaan tulis saja di kotak komentar

Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di blogkomputers.blogspot.com

Artikel Terkait: