Cara Mengganti Older Post & Newer Post dengan Link Judul

Apa yang Anda pahami dari judul diatas? Untuk lebih jelasnya Perhatikan gambar berikut!

Mengganti Next-Prev Navigasi Dengan Judul Post | Tutorial Blog

Saya yakin pembaca sudah mengerti, ok kita langsung saja cari tahu bagaimana cara Mengganti Next-Prev Navigasi Dengan Judul Post, yang pada dasarnya hanya dengan tiga langkah :
  1. Menambahkan Kode jQuery
    Hal ini tidak perlu dilakukan, apabila dalam template Anda sudah ada kode jQuery, Ok, kita cek dulu :
    1. Login ke blogger, pilih Template, kemudian pilih Edit HTML,
    2. Cari kode berikut ini dibawah kode ]]></b:skin> atau setelah kode </head>; ingat supaya cepat didapat pakai bantuan CTRL+F!


    3. Ket : Jika belum ada, Copy kode tersebut di atas ! kemudian paste dibawah kode ]]></b:skin> atau setelah kode </head>
    4. Save template Anda
  2. Menambahkan Kode di Widget HTML/JavaScript
    Setelah menyelesaikan langkan kedua diatas selanjutnya :
    1. klik "Kembali/Back" lalu pilih Tata Letak/Page Element, klik Tambahkan Gadget dan pilih HTML/Javascript, lalu copy paste kode dibawah ini pada area konten.


    2. Klik Simpan/Save lalu buka blog Anda dan lihat perubahan yang terjadi pada navigasi pager blog Anda di bawah kolom komentar.
  3. Kostumisasi
    Sebenarnya dengan dua langkah diatas tujuan sudah tercapai tapi untuk kostumisasi atau penyesuaian dengan blog Anda, silahkan edit kembali gadget HTML/Javascript tempat Anda meletakkan kode di atas lalu ganti beberapa kode tersebut sesuai selera, diantaranya :
    • font-size:12px (untuk merubah ukuran huruf, ganti 12px sesuai keinginan)
    • width:200px (lebar dari judul yang ditampilkan, ganti 200px sesuai keinginan)
    • font-family:Arial, sans-serif (ganti sesuka anda, misal : Georgia, Trebuchet MS, Verdana, dll)
    • .text("<< " + newerLinkTitle); (untuk merubah simbol newer ganti "<<" sesuka anda,
      misal :
      • Kode : \U25C0 Simbol : ◀
      • Kode : \U2190 Simbol : ←
      • Kode : \U21A9 Simbol : ↩
      • Kode : \U219A Simbol : ↚
      • Kode : \U219C Simbol : ↜
      • Kode : \U219E Simbol : ↞
      • Kode Simbol lainnya bisa cek disini
    • .text(olderLinkTitle + " >>"); (untuk merubah simbol older ganti ">>" sesuka anda,
      misal :
      • Kode : \U25B6 Simbol : ▶
      • Kode : \U2192 Simbol : →
      • Kode : \U21AA Simbol : ↪
      • Kode : \U219B Simbol : ↛
      • Kode : \U219D Simbol : ↝
      • Kode : \U21A0 Simbol : ↠
      • Kode Simbol lainnya bisa dilihat disini!



Sumber :

2 komentar

kalau saya sudah ada dari bawaan template nya jadi tinggal pakai hihi

keren gan, kelihatannya sama dengan tutor2 yang lain, sudah di uji and berhasil. makasih untuk share ilmunya. Ditunggu kunjungan baliknya ya..

"Maka berbicaralah kamu berdua (Musa & Harun Alaihimassalam) kepadanya (Fir'aun) dengan kata-kata yang LEMAH LEMBUT, mudah-mudahan ia ingat atau takut" [TQS. Thoha (20):44]