Modifikasi Dan Mengganti Tulisan Home, Newer Posts, dan Older Posts - Mengelola Blog

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

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

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 :
Contoh hasil rata kanan pada older posts




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

baris kode link home older post

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

ubah posisi kode

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

Hasil perubahan blog pager
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

4 comments:

  1. Tampilan baru nih om blognya? 😁😁

    ReplyDelete
    Replies
    1. Iya nih.. penyegaran biar ngga bosen liatnya.. yang kemarin sudah pakai selama 2 tahun .. :)

      Delete
  2. Caranya mudah sekali, yang penting tahu penempatan kode-kodenya. Saya paling suka jika untuk otak-atik kode html. Tapi kalau untuk home dan lainnya itu saya masih suka dengan bawaan blogspot, hanya saya tambahi bingkai saja.

    ReplyDelete
    Replies
    1. Betul itu mas. Asalkan tau posisi dan caranya maka akan lebih mudah untuk memodifikasinya :)

      Delete

Informasi:
Form komentar ini menggunakan moderasi, setiap komentar yang masuk akan melalui proses pemeriksaan sebelum ditampilkan dalam kolom komentar. Memasang link yang sifatnya promosi di dalam komentar tidak akan di tampilkan. Hanya komentar yang membangun dan sesuai topik artikel saja yang akan saya tampilkan. Mohon maaf atas ketidaknyamanannya.