Cara Mengganti Older/Newer Post-Home Blogger dengan Teks/Gambar Icon

 

Cara Mengganti Older/Newer Post-Home Blogger dengan Teks/Gambar Icon

Jika kita melihat dan mengamati tulisan older post, newer post, dan home dalam tampilan template Blogger/Blogspot, tampak kurang menarik, terkesan jadul, dan tidak profesional, bukan? Sebagai alat navigasi, tentunya anda perlu memperhatikan tampilannya agar lebih menarik pengunjung untuk meng-klik-nya.

Anda dapat dengan mudah mengubahnya menjadi tulisan lain atau gambar (icon) dengan cara sebagai berikut:

1. Masuk ke dashboard > design/rancangan > edit HTML, klik "Expand Widget Templates".

2. Cari kode yang berwarna merah sebagai berikut:

Wujud barisnya biasanya seperti ini, kopi kode yang berwarna merah dan masukkan ke kotak pencarian browser (Ctrl+F).

expr:title=’data:newerPageTitle’><data:newerPageTitle/></a>
expr:title=’data:olderPageTitle’><data:olderPageTitle/></a>
<a class=’home-link’ expr:href=’data:blog.homepageUrl’><data:homeMsg/></a>
<a class=’home-link’ expr:href=’data:blog.homepageUrl’><data:homeMsg/></a>

(yang terakhir adalah Home/Beranda, biasanya ada dua, jadi cari satu lagi).

3. Perhatikan poin-poin berikut:

a. Jika ingin mengganti dengan tulisan lain:

<data:newerPageTitle/> adalah newer post, hapus dan ganti dengan "Previous" atau kata-kata sejenisnya yang diinginkan.

<data:olderPageTitle/> adalah older post, hapus dan ganti dengan "Next" atau kata-kata sejenisnya yang diinginkan.

<data:homeMsg/>adalah home/beranda (biasanya ada dua, jadi jika ingin mengganti, maka ganti keduanya), biarkan begitu saja atau ganti dengan "Home" atau kata-kata sejenisnya yang diinginkan.

Contoh:

expr:title=’data:newerPageTitle’>Next</a>
expr:title=’data:olderPageTitle’>Previous</a>
<a class=’home-link’ expr:href=’data:blog.homepageUrl’>Home</a>
<a class=’home-link’ expr:href=’data:blog.homepageUrl’>Home</a>

b. Jika ingin mengganti dengan gambar (icon):
Masukkan script image source sebagai pengganti dari tulisan: <img src="url gambar icon"/>
contoh:

expr:title=’data:newerPageTitle’><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLsxfLYADdfsz0vs49sv1W01S4qdqc5W187gFffr7ld9mVOOOTwuHi3LEcIDPLemfDnJAuOOMU-Jy_az5kbS1M-jLeKrcpe2cvXI6TemMLxNp0opk9L9GHs0a2TyvdQg0x4OKqzVR0PKuw/s1600/next.png"/></a>
dan seterusnya......

Anda dapat menggunakan gambar berikut, seperti yang dipakai blog ini, namun upload dan host sendiri ya. Klik kanan di atas gambar dan klik "save image as", atau bisa cari di internet. Lalu upload gambar dan ambil direct link-nya, masukkan seperti contoh diatas.

4. Langkah terakhir, preview terlebih dahulu, atau langsung save.