Friday, July 10, 2009

Tutorial Tukar Older Post Kepada Icon

Tutorial ini adalah untuk menukar perkataan Older Post pada bawah laman utama blog anda kepada icon agar kelihatan lebih menarik. Anda boleh meletakkan apa sahaja jenis icon pada bahagian ini. Berikut adalah contoh Older Post yang telah ditukar.

Sebelum
Selepas


Contoh Icon :











1. Login ke ID Blogger atau terus ke Dashboard

2. Pilih Layout dan terus ke menu tab Edit HTML

3. Carikan code seperti dibawah

<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'><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 + &quot;_blog-pager-older-link&quot;' 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>

4. Tukarkan tulisan merah di atas dengan code icon yang disediakan atau code yang anda upload. Setelah menukarkan code merah kepada link code icon, coding tersebut akan kelihatan seperti dibawah ini.

*Untuk mendapatkan icon seperti di atas cuma right click dan copy image location.

<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://sites.google.com/site/ssiwidget/Home/BackCustomOrange.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://sites.google.com/site/ssiwidget/Home/ForwardCustomOrange.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://sites.google.com/site/ssiwidget/Home/HomeCustomOrange.png'/></a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
</b:if>
</b:if>

5. Akhir sekali SAVE TEMPLATE dan anda boleh lihat hasilnya.

Selamat Mencuba!!!

4 comments:

lalink7 said...

nak try2...yeyeyeyeyeyyeyey..
thanks ady

kakyong said...

aiseh, dah salah letak komen..
sebenarnya ini yg telah berjaya dibuat.. :)

rina said...

takde dalam layout saya kode macam tu need help.

hana_tomei said...

xde pon code mcm tue lain jer...