Membuat Judul Posting Bergambar

Jika anda jenuh dengan tampilan judul posting standar atau mungkin menginginkan tampilan yang inovatif dari judul posting blog anda, tidak ada salahnya mencoba tips yang satu ini. Terima kasih pada Annie, (penyaji bloggeruniversity) yang telah memberikan inspirasi ini posting ini pada saya.

Sebelum anda mencoba tips berikut, lakukan dulu 'backup' template anda agar jika terjadi kesalahan atau jika hasilnya kurang memuaskan bagi anda, kita bisa dengan mudah mengembalikan template pada kondisi semula.

Silakan simak penjelasan berikut ini, anda harus menempatkan bagian .post h3 pada CSS Style Sheet anda. Jika anda belum mengetahui tentang CSS style sheet, temukan kode ini pada editor HTML template anda.

# Classic Blogger : Diantara tag <style> dan </style>.
# Beta Blogger : Diantara <b:skin><![CDATA[/* dan ]]></b:skin>

Lalu, copy-kan kode berikut ini pada editor HTML template anda diantara CSS style sheet tersebut.

.post h3 {
background:url(GAMBAR POSTING ANDA) no-repeat;
padding: 20px;
margin: 20px;
margin-top:.25em;
margin-left: 0px;
margin-bottom: 20px;
border-top:1px dashed #42c4de;
border-bottom: 1px dashed #42c4de;
padding:10 0 4px;
font: normal normal 100% Georgia, Times, serif;
font-size:240%;
font-weight:bold;
line-height:1.4em;
color: #49331c;
text-transform:uppercase;
text-align: center;
}

Itu adalah kode yang harus anda tambahkan pada bagian .post h3

Hasil yang akan tampil pada tiap blog akan berbeda - beda, saya sarankan anda tetap membuat ukuran kecil dengan dimensi 20 - 30px persegi. Untuk itu, silakan anda atur sendiri ukuran yang ingin anda gunakan.

Jika anda ingin menampilkan alternatif tampilan untuk 'border' posting, silakan masukkan pilihan di bawah ini untuk menggantikan dashed.

1. dotted
2. solid
3. double
4. groove
5. ridge
6. inset
7. outset

Simpan pekerjaan anda, selamat!! Sekarang anda telah memiliki gambar imut di judul posting anda.

---

Artikel Terkait Lainnya