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
Daftar isi [ Lihat ]
SHARE
26 komentar
  1. Tampilan baru nih om blognya? 😁😁

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

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

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

      Hapus
  3. Btw..blog sampeyan koq gak dipasang 'about us', 'privacy policy", 'contact us', dsb kayaknya ya? Kenapa tuh..?
    Trims penjelasannya.

    BalasHapus
    Balasan
    1. Ada gan di bagian paling bawah sebelum attribution... btw agan pakai handset apa ya kok sampai ngga bisa kelihatan ?

      Maaf nanya nih, buat saya cek sekalian kalau kalau memang ngga muncul menu barnya..

      Hapus
  4. Paling bawah cuma ada DIY, tapi isinya daftar posting, gan?
    Ane buka di samsung android..

    BalasHapus
    Balasan
    1. Pakai browser apa gan kalo boleh tau.. soalnya sudah aya coba pakai google chrome dan mozilla firefox muncul aja sih menu about,contact,privasi dll..

      Hapus
    2. Chrome, gan. Emang suka lelet. Apa krn itu?
      Oh ya, gan.
      Tumbèn2 dadakan ini tadi ada problem satu widget rusak, gegara salah taruh, overlap.
      Udah coba hapus di edit tamplet HTML, ikuti tool agan, koq gak ilang juga?
      Mungkin ada cara lain?
      Thanks

      Hapus
    3. Bisa jadi ya gan, mudahan aja karena lelet.. widget yang mana ya gan yang mau dihilangkan ? Soalnya saya cek di blog agan yang doa-logika.blogspot semua widgetnya normal aja sih kelihatannya..

      Hapus
  5. Wdget histat. Sdh dihapus di HTML.
    Tapi di Tata Letak msh ada, dan dibuka isinya ..Error 004 (gak mau ilang jg...

    BalasHapus
    Balasan
    1. Coba di refresh dulu aja gan browsernya atau jika perlu coba di clear cookies..

      Hapus
    2. Bener gan..!! Di refresh di pc kayaknya udah pulih, nih..
      Thanks a lot ya, gan!
      See u again..

      Hapus
    3. Ok gan ... terima kasih juga kunjungannya sukses selalu ya.. :)

      Hapus
    4. Ok.., sama2.
      Boleh kunjung balik (muhibah) ke blog kita dong, ya?

      Hapus
    5. Siap gaan, tadi sudah meluncur cuma pakai komen google plus keknya trus cuma ngga saya cek sudah muncul apa belum komennya.. Sudah meluncur dan ninggalin jejak di di pompa air masuk angin ya :)

      Hapus
  6. Halo! Mas Teguh, selamat jumpa lagi.
    Boleh dong bagi ilmunya. Kita lagi kesulitan n penasaran, pengin mengubah font judul blog di mobil biar tampak lebih kecil, koq gagal melulu. Tolong kasih tahu, bagaimana caranya, mas? Di versi web sudah berhasil dieksekusi melalui menu 'Sesuaikan', tapi tidak berubah (juga) saat di buka di mobile.
    Makasih atas infonya.
    Salam

    BalasHapus
    Balasan
    1. Dicoba lewat menu inspeksi browser aja dulu mas. Dari situ nanti bisa di temukan kode cssnya.. baru deh di ubah.. sekalian sama css yg di @mediaquery mobilenya di samakan..

      Kebetulan saya 4 harian ni lg susah buka bkog soalnya lagi keluar kota mas..

      Hapus
    2. Tadi sempet saya liat, judul blognya mas Agama dan logika ni pakai gambar ya ? setau saya kalu gambar pengaturannya pakai persentase mas biar bisa mengikuti lebar layar, nanti dari media querynya di ubah persentase buat mobilenya sehingga bisa sesuai dengan ukuran yang diinginkan.

      Hapus
  7. Kok saya terapkan tidak berubah,

    BalasHapus
    Balasan
    1. Barangkali ada langkah yang terlewat gan, coba cek sekali lagi urutannya.

      Hapus
    2. Tetap gagal dan tak berubah sama sekali

      Hapus
    3. Agan pakai template apa?

      Hapus
  8. Terima kasih masukannya Bang.... saya coba praktikan

    BalasHapus