Mengganti Tulisan Newer Post, Home, dan Older Post Dengan Image

Mengganti Newer Post, Home, dan Older Post (Bagian Kedua). Tips ini merupakan pengembangan dari tips sebelumnya. Jika pada postingan yang lalu, telah Tips dan Trik Blog ketengahkan mengenai cara mengganti tulisan Newer / Older Post dan Home dengan teks atau tulisan yang kita kehendaki maka pada kesempatan kali ini Tips dan Trik Blog akan mencoba mengganti tulisan tersebut dengan menggunakan image atau gambar yang kita inginkan. Misalkan saja dengan tanda panah atau image yang lainnya. Dengan variasi tersebut dapat menjadikan blog kita menjadi lebih menarik daripada sebelumnya. Jika tertarik, silakan ikuti tipsnya berikut ini.

Langkah-langkahnya sebagai berikut.

Pertama, siapkan tiga buah image atau gambar (masing-masing untuk Newer Post, Home, dan Older Post) dan uploadlah image tersebut ke image hosting.

Kedua, seperti pada tips sebelumnya, temukan kode seperti di bawah ini. Bagi yang menggunakan Firefox, dapat menggunakan Ctrl + F untuk mempercepat 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>

Ketiga, silakan kita perhatikan teks yang berwarna merah di atas.
Silakan masing-masing ganti dengan alamat URL image yang telah kita upload sebelumnya.

Sehingga menjadi seperti di bawah ini.

<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'>URL_image_Newer</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'>URL_Image_Older</a>
</span>
</b:if>

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

</div>

Keterangan

Silakan ganti URL_Image_Newer, URL_Image_Older, dan URL_Image_Home dengan URL image yang telah kita siapkan sebelumnya.

Keempat, kemudian simpan template.

Kelima, selesai

Silakan lihat hasilnya dan selamat mencoba!!!

Silakan baca juga bagian pertama.
Description: Mengganti Tulisan Newer Post, Home, dan Older Post Dengan Image Rating: 4.5 Reviewer: Unknown - ItemReviewed: Mengganti Tulisan Newer Post, Home, dan Older Post Dengan Image