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 saya 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 Tata Letak 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEid4VYe2l-5EaDGaXen4ArQMPu54-nB_M-7byNWhMxkNoNU7UuB1SAYQdjmCgR71yQ-Q63tlDyFqOGGA6MqsTVoI3H0TJUnvnYkcE-D85rmTHE_qPOWOCJuumgqv3-_diF-mcm-k_7hb9qe/s320/date-24.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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEid4VYe2l-5EaDGaXen4ArQMPu54-nB_M-7byNWhMxkNoNU7UuB1SAYQdjmCgR71yQ-Q63tlDyFqOGGA6MqsTVoI3H0TJUnvnYkcE-D85rmTHE_qPOWOCJuumgqv3-_diF-mcm-k_7hb9qe/s320/date-24.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



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



Lalu Simpan template dan lihat hasilnya dan jika gambarnya tidak tepat atau kurang terlihat utak-atik saja paddingnya.




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



Selamat Mencoba












0 komentar:

Posting Komentar

newer post older post Home