Tutorial meletak kan gambar di sebelah title entry

Dah lama tak buat tutorial kan. Hehe. Someone requested this so here we go.

1. Ok firstly, cari gambar yang you all nak letak sebelah title entry tu. Kalau tak tahu nak cari kat mana, I suggest cari kat http://www.glitter-graphics.com/.

2. If dah dapat gambar tu, copy image url, then simply masuk kan dalam code ini ;

<img src="CODE IMAGE ANDA" style="border-width: 0px;" />

3.  If gambar yang anda cari tu besar dan kelihatan pelik jika diletak kan di sebelah post, you guys boleh upload gamabr tersebut di http://tinypic.com/ , then just resize kan image dia. As usual, dapat kan url dan masuk kan dalam code num 2 tu.

4. Ok now, code kat step 2 tu, lets put it somewhere else first. Dalam notepad ke.

5. Now, go to Design > Edit HTML then click Expand Widget Templates.

6. Cari code di bawah ini ;

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

7. Ok, sila ambil perhatian ye, kalau anda nak gambar tu di bahagian atas title entry, copy and paste kan code di step 2 selepas code ini ;

<b:if cond='data:post.url'>

8. Gambar di sebelah kiri title entry, paste kan code di step 2 selepas code ini ;

<a expr:href='data:post.url'>

9. Gambar di sebelah kanan title entry, paste kan code di step 2 selepas code ini ;

<data:post.title/>

10. Lastly, gambar di sebelah bawah title entry, paste kan code di step 2 selepas code ini ;

</a>

11. Ok, anda pening ? Takpe, I ada example. Contoh kalau anda nak gambar berada di sebelah kiri title post, anda harus lakukan seperti ini ;

<b:if cond='data:post.url'>
<a expr:href='data:post.url'><img src="CODE IMAGE ANDA" style="border-width:0px"/><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>

12.  Oh ye, CODE IMAGE ANDA tu maksudnya, url image anda lah ye. Kang ada yang tak faham pulak. Hehe. Apa-apa hal, preview dulu and kalau jadi, just save !

Selamat mencuba.

P/S : Credit to http://www.blogbulk.com/