Ubah Tulisan Newer Older Post Dengan Icon

Ingin mempercantik tampilan navigasi pager blogger? Secara default navigasi blogger terlihat sangat simple, hanya tampak tiga link utama untuk membuka page sebelum atau sesudah postingan yaitu newer post (posting baru), older post (posting lama), dan home untuk kembali ke menu utama blogger. 

Berikut tampilan defaultnya: 

Karena tampilan seperti itu terlihat sangat membosankn maka saya akan mencoba untuk menyulapnya menjadi:

View Live DemoKlik untuk melihat langsung animasi iconnya

Berikut tricks yang harus anda lakukan untuk menyulap pager blog anda agar terlihat lebih fantastis he he:
1. Login ke Blogger anda, klik Rancangan (Design) → Edit HTML, klik tulisan Download Template Lengkap (Download Full Template) karena hal ini dimaksudkan untuk mengurangi risiko gagal edit apabila terjadi kesalahan pada template, sehingga kita masih punya back up data untuk mengembalikannya seperti semula, kemudian beri tanda centang pada kotak di samping tulisan Expand Widget Templates, kemudian cari kode berikut:

Tips: untuk mempercepat pencarian kode, anda dapat gunakan tombol (Ctrl + F) atau (F3).

<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>

Perhatikan tulisan yang berwarna merah:

• <data:newerPageTitle/> Posting Baru (Newer Post)
• <data:olderPageTitle/> Posting Lama (Older Post)
• <data:homeMsg/> Beranda (Home)

Silakan anda ganti kode-kode tersebut dengan kode berikut, hanya kode yang berwarna merah saja anda gunakan:

• <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-59pkM7qJMl8yeRBDaOOW_9C7FvdYk31x5Q154TvPUmCRxOL2RsC4R_e1ZGVabaJyzxX-EqDmvDuPpvyPnalBXoBblRjaF1GzZD4Co115aSNzXhVX72UVqCAy55MvJGUhcHiBItx8ZJ8/"/>
• <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCZ51NxePCxGtluX7QKLwWSLz3VtZ1Kwngm0I2L4qDclwA5o22xDVYg32IE8btDIcP5EfoJbvd14NY4DlKCrYERFxKiveNrvOQcELK7hq-zxyatJtf2HKhtuQRzh-U1SoVHKapCsSiqvw/"/>
• <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjF9J4BUr5RNW0nOX2fEmY4rYPSEtrDl-J7Zog8jHL8SWSgOFfO5bau4Hy9eHwPln0ZbsL5V8ByxxbvXZEWtKPzQ88mrhDrXrQFgGv7KHgD4rzaiyleMgAIGjw8gsqYXOiopt1K5IreEow/"/>

2. Klik tombol simpan template (save template) jika sudah selesai utak atik template anda dan lihat hasilnya. Masalah gambar icon anda dapat berkreasi sendiri atau anda juga dapat mencarinya di situs yang menyediakan icon-icon menarik seperti di icon archive. 

3. Selamat mencoba.
This work is protected by Copyscape and licensed under a Creative Commons Attribution - Non Commercial - Share Alike 3.0 Unported License. Articles cannot be reproduced without permission from the author. For any reuse or distribution, you must make clear to others the license terms of this work. The best way to do this is with a link to this web page.