Modifikasi Dan Mengganti Tulisan Home, Newer Posts, dan Older Posts

Ide awalnya, tulisan ini muncul ketika saya sedang membaca-baca sebuah artikel di Adsense Blog. Pada bagian akhir postingan, tombol navigasi yang umum ada untuk sebuah blog seperti Home, Newer Posts dan Older Posts ini terlihat unik dan menarik.

Di halaman tersebut, tampak tombol rumah sebagai Home, tanda panah kiri untuk Newer posts, dan tanda panah kanan untuk Older Posts. Kira-kira seperti inilah penampakannya


Melihat tampilannya yang cukup unik dan berbeda, membuat saya tertarik untuk mengikuti tampilan tersebut. Namun sayangnya, sepertinya ikon yang digunakan tersebut menggunakan ikon yang ada di Font Awesome. Tentunya hal ini juga mewajibkan saya memasang script khusus untuk font awesome, sehingga hal ini urung saya lakukan.

Sekedar informasi, salah satu cara saya untuk mempercepat loading blog ini adalah dengan meminimalisir penggunaan gambar untuk ikon (kecuali untuk gambar dalam postingan) serta mengurangi penggunaan script dalam template, nah salah satu yang saya hindari berikutnya adalah script untuk font awesome ini.

Oleh karena itu saya mencari alternatif lainnya, dan sebagai gantinya, saya menggunakan Alt Code yang lebih ringan.

Menggunakan Alt Code

Alt code merupakan sebuah kode standard untuk menampilkan ikon ataupun simbol-simbol karakter spesial yang bisa kita temukan pada program MS Word, Excel, dll. Dan ini juga bisa diterapkan pada sebuah halaman web termasuk blog.

Disaat menggunakan tanda panah kanan dan kiri sebagai penganti Older Posts dan Newer Posts, saya melihat hasilnya kurang menarik jika menggunakan Alt Code, sehingga saya menggunakan variasi lain dari tanda panah tersebut.

Disini saya menggunakan segitiga kanan dan kiri sebagai pengganti Older Posts dan Newer Posts, sedangkan untuk tulisan Home, saya tidak menggantinya. Berikut adalah kode Alt yang saya gunakan untuk Older Posts dan Newer Posts

Untuk Newer Posts kodenya  ◄
Untuk Older Posts kodenya  ►

Untuk variasi kode dan bentuk lainnya, anda bisa mengunjungi situs Alt-Codes.net untuk mengetahui kode dan simbol yang akan digunakan.


Langkah-langkah memodifikasi tampilan Blog Pager

Seperti biasa, hal pertama yang perlu dilakukan untuk melakukan editing template adalah dengan masuk kedalam editor template blog anda yaitu Masuk ke dashboard Blogspot > Theme/ Tema > lalu klik edit HTML. Setelah masuk, lanjutkan caranya seperti dibawah berikut :

Langkah #1: Membuat rata kanan Home, Newer Posts, dan Older Posts

Untuk membuat posisinya berada di kanan, tambahkan CSS "float:right" untuk blog-pager tersebut dengan cara

• Cari kode ]]></b:skin>
• Tambahkan kode css dibawah berikut tepat diatas kode skin tadi

#blog-pager-newer-link, #blog-pager-newer-link, #blog-pager a {float:right;}

• Lalu simpan dan preview hasilnya.

Berikut contoh hasilnya :

Langkah #2 : Tukar posisi Newer Posts dan Older Posts

Setelah rata kanan dilakukan biasanya kode Older posts menjadi berada ditengah-tengah diantara Home dan Newer Posts. Oleh karena itu kita perlu menukar posisi antara Older Posts dengan Newer Posts, caranya :

1. Cari kode seperti dibawah berikut (gunakan Ctrl+F untuk memudahkan pencarian)

<div class='blog-pager' id='blog-pager'>

Didalam template, kode ini biasanya ada dua , pilih saja kode yang ke dua . Setelah ketemu, lalu perhatikan pada beberapa baris kode berikut


2. Temukan kode <b:if cond='data:olderPageUrl'> ....  hingga  kode penutup </b:if > nya
3. Cut / potong kode tersebut, dan pastekan tepat dibawah kode id='blog-pager'  agar posisinya pindah dan berubah, sehingga hasilnya tampak seperti gambar dibawah berikut


Tujuan dari langkah ini adalah agar posisinya link dan gambar sesuai dengan estetika yang diperlukan pada sebuah tampilan halaman.

Langkah ke #3 : Mengganti Tulisan Home, Newer Posts, dan Older Posts

Masih di tempat yang sama, untuk mengganti dan mengubah tulisan Home, Newer Posts, dan Older Posts , ikuti caranya seperti dibawah berikut :

Hapus dan ganti kode untuk Newer Posts dan Older Posts

1. <data:newerPageTitle/> adalah Newer Posts, hapus dan ganti dengan kode Alt yang sudah anda pilih untuk Newer Post sebelumnya, contoh menggunakan kode alt  &#9668;
2. <data:olderPageTitle/> adalah Older Posts, hapus dan ganti dengan kode Alt yang sudah anda pilih untuk Older Post sebelumnya, contoh menggunakan kode alt  &#9658; .
3. <data:homeMsg/> adalah Home/beranda, hapus dan ganti dengan kode Alt yang sudah anda pilih untuk Home sebelumnya atau gunakan kata lain sesuai keinginan.

Sehingga hasilnya seperti berikut


Tambahan :

Selain dengan tulisan / kode alt, anda juga bisa menggantinya dengan menggunakan gambar ikon, berikut caranya jika ingin mengganti dengan gambar (icon):

• Siapkan gambar ikon yang dibutuhkan seperti tanda panah kiri, tanda panah kanan, dan tanda home. Upload gambar di tempat anda bisa mengupload gambar untuk blog, lalu gunakan url nya. (Baca : Cara menampilkan gambar di blog )
• Untuk pengaplikasianya, masukkan script image source sebagai pengganti dari tulisan: <img src="url gambar icon"/>
  
  contoh:
  expr:title=’data:newerPageTitle’><img src="http://icons.iconarchive.com/icons/oxygen-icons.org/oxygen/32/Actions-go-next-view-icon.png"/></a>
  
  Lakukan cara yang sama untuk Older Post dan Home. Gunakan gambar-gambar yang sesuai dengan peruntukkannya

Setelah semua langkah anda lakukan dengan cermat dan seksama, maka anda bisa langsung melihat hasilnya seperti pada gambar di bawah ini yang memang saya gunakan juga pada template blog saat ini (12 Maret 2018).

Contoh hasil dari perubahan yang sudah dilakukan

Kesimpulan

Untuk membuat navigasi seperti ini sepertinya terlihat susah, tapi percayalah... jika anda sudah biasa dan bisa melakukannya maka lambat laun anda akan semakin lancar untuk melakukan modifikasi-modifikasi pada template blog anda.

Demikianlah cara untuk Modifikasi Dan Mengganti Tulisan Home, Newer Posts, dan Older Posts ini bisa saya sampaikan, semoga bisa bermanfaat