Tukar Older Post, Home, Newer Post kepada Imej/ Icon

Assalamualaikum, sudah lama tak buat tutorial kan. Kali nie, request dari adik Lieyan Chantek. Sorry, agak lama baru nak buat tutorial ni. Nasib baik request tutorial yang senang je. Hanya ubah-ubah kod sikit. Sedikit nasihat, kalau nak cantikkan blog jangan takut untuk bermain dengan kod-kod anda. Saya juga bermula dari zero seperti kamu, kamu dan kamu yang sedang makan di tepi tu. Hei, tak puasa ke?

Kadang-kadang kita tak boleh harap kan orang lain sangat. Kita sendiri kena usaha tau. Kalau kamu hanya harap kan pertolongan orang, susah nak maju. Ketahui la bahawa template blog kita tak sama seratus peratus, so, jangan la cepat melatah bila tak jumpa kod-kod yang diperlu kan. Try n error saja. Yang penting back up dahulu template kamu tu. Haih membebel plak tengah hari buta begini.

Ok, ok, nie soalan adik Lieyan Chantek,

Tulisan2 dibawah ini boleh diubah kepada imej / icon yang menarik kamu tau?

Ok, macam biasa,

Dashboard / Layout / Edit HTML / Download Full Template
(penting sebagai backup!)

Sila tick Expand Widget Templates
Cari code dibawah ni (Tekan Ctrl + f untuk memudahkan pencarian)

<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
</span>
</b:if>

<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
</span>
</b:if>

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
</b:if>
</b:if>

</div>

Tulisan yang berwarna + bold tu tukar dengan kod di bawah

<img src="Image URL" />

Begini contohnya,

<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><img src='http://img507.imageshack.us/img507/4343/leftq.png'/></a>
</span>
</b:if>

<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><img src='http://img94.imageshack.us/img94/3545/rightyx.png'/></a>
</span>
</b:if>

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'><img src='http://img535.imageshack.us/img535/606/homeb.png'/></a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link' expr:href='data:blog.homepageUrl'><img src='http://img535.imageshack.us/img535/606/homeb.png'/></a>
</b:if>
</b:if>

</div>

Hasil adalah seperti di bawah,

Oh, icon menarik boleh cari di SINI. Tak tau cara nak guna icon tu? Rujuk SINI. Selamat Mencuba :)

---

Dah habis baca ke? Jemput tinggalkan komen ◕‿◕

---