Keluarga Besar SMPN 196 Jakarta mengucapkan Selamat Hari Guru Nasional 2012 dan HUT PGRI ke 67 Tahun 2012

Rabu, 16 September 2009

Menambah Gambar Sebelum Judul Posting

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 Cari Code CSS seperti dibawah ini yang mirip di blog Anda (karena 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.

0 komentar:

Posting Komentar