Mengganti Judul Posting Dengan Gambar

Mengganti Judul Posting Dengan Gambar adalah sebuah trik supaya judul posting yang hanya berupa tulisan mempunyai variasi lain sehingga tidak monoton berupa tulisan saja yang terkadang bagi beberapa orang akan merasa jenuh atau bosan. Untuk menghilangkan rasa bosan dengan judul posting yang biasa-biasa saja kita bisa membuat variasi judul postingan. Kalau beberapa saat yang lalu saya telah membuat postingan tentang cara mengganti judul blog dengan judul posting yang ada di sini atau kalau anda lupa coba di buka kembali biar ingatannya segar lagi dan sekarang gantian topiknya yang saya buat berdasarkan hasil otak-atik kode template yaitu Untuk merubah judul postingan dengan image. Untuk membuatnya kita harus membuat gambarnya terlebih dulu dan meng-uploadnya pada tempat hosting gambar, tentang mengupload sebuah gambar juga pernah saya posting di sini. buat anda yang lupa silahkan buka kembali.
Suatu misal saya mempunyai alamat gambar seperti ini:

http://i46.tinypic.com/fe3qs1.jpg

Dan untuk membuat gambar bisa muncul pada blog, kita harus menambahkan kode:

<img scr="Url Gambar"/>

Dan setelah di tambahkan kode maka urlnya menjadi seperti ini:

<img src="http://i46.tinypic.com/fe3qs1.jpg"/>

Akan tetapi jika cuma code seperti itu, gambar yang di hasilkan adalah gambar aslinya yang seperti ini:



Sehingga tidak akan sesuai dengan letak dari judul postingan. Dan supaya gambar tersebut sesuai dengan letaknya maka kita harus menambahkan code-code yang lain Width, Height, dan Border.
Width dan Height tentunya anda sudah sudah sangat tahu fungsinya, dan code Border fungsinya adalah supaya gambar tidak di kelilingi oleh garis tepi, maka kita harus memakai angka 0 untuk menghilangkan garis tepi tersebut sehingga code gambarnya menjadi seperti ini:

<img src="http://i46.tinypic.com/fe3qs1.jpg" width="45 " hight="45 " border="0"/>

Setelah ditambah code maka gambarnya akan berubah menjadi seperti ini:



Sesuaikan dengan kebutuhan anda.
Langkah selanjutnya adalah menempatkan code tersebut pada template milik anda. Ini khusus untuk template baru, untuk template lama saya belum bisa karena dari awal pembuatan blog ini saya sudah memakai template baru.
1. Sekarang silahkan anda login dulu ke Blogger.com.
2. Klik menu Tata Letak.
3. Klik menu Edit Html.
4. Jangan lupa untuk mendownload template lengkap blog anda dan menyimpannya.
5. Centang kotak kecil disamping tulisan Expand Template Widget.
6. Lalu cari kode seperti ini:

<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>

Sudah ketemu kawan? Jika sudah taruh code gambar tadi sesudah code <a expr:href='data:post.url'> dan sebelum code <data:post.title/></a>
<b:else/>

Sehingga codenya menjadi seperti ini:

<a expr:href='data:post.url'><img src="http://i46.tinypic.com/fe3qs1.jpg" width="125" hight="25" border="0"></img><data:post.title/></a>
<b:else/>

Untuk melihat perubahannya klik tombol Preview dan bila sudah sesuai dengan yang anda inginkan klik tombol Simpan Template
Selesai dech ngetiknya, uuh capek banget sampe jari kesemutan.

Selamat Mencoba Dan Semoga Berhasil!

Tweet