Membuat Tombol Home Next Dan Previous Di Blog

Ternyata banyak juga sobat blogger yang ingin membuat Tombol Next, Home, dan Previous di blog dengan menggunakan gambar tanda panah dan rumah. Tapi, karena setiap template di blog itu berbeda-beda, jadi silahkan berharap kalau template yang kalian pakai bisa support untuk fitur yang satu ini. Hahaha.. saya hanya bercanda sedikit kok. Untuk mengetahui template kita mensupport fitur ini, kita dapat melihatnya dengan mata telanjang di blog kita. Biasanya sih, di bagian bawah artikel ada kata "Posting Baru", "Beranda", "Posting Lama". Kira-kira kurang lebihnya seperti itu. Karena saya sudah mencoba membuatnya beberapa kali juga, hasilnya gagal. Bukan karena saya ga bisa buat lho. Tapi karena banyak template dan tutorial yang diberikan di blog-blog lain itu berbeda beda.




Cukup teorinya, Let's get to work!


Gini caranya

1. Login ke blogger

2. Klik Tata letak > edit HTML

3. Untuk mengganti tulisan "next page /posting baru" dengan gambar..
    Cari : 
<b:if cond='data:newerPageUrl'>
      <span id='blog-pager-newer-link'>
      <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
atau fokuskan saja dengan kode: <data:newerpagetitle/>
Kemudian ganti kode <data:newerpagetitle/> dengan <img src="URL Gambar" alt="Next" />

4. Untuk mengganti tulisan "previous page /posting lama" dengan gambar,,
    Cari kode:  
<b:if cond='data:olderPageUrl'>
      <span id='blog-pager-older-link'>
      <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
 Atau fokuskan densaja dengan kode: <data:olderpagetitle/>
Kemudian ganti kode <data:olderpagetitle/> dengan <img src="URL Gambar" alt="Prev" />

5. Untuk mengganti tulisan "home" dengan gambar,,
    Cari  kode:
</b:if>

<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>

dan ganti kode <data:homemsg/> dengan <img src="URL Gambar" alt="home" />

6. Sekarang untuk dalang kerusuhannya. Kalau di atas tadi saya sebutkan code untuk tombol next seperti ini: <data:newerpagetitle/> Terkadang ada template blog yang menggunakan code seperti ini:
<data:newerpagetitle> itu satu contoh aja untuk tombol nextnya saja. Jadi, perbedaanya hanya pada simbol slash (/) pada akhir code. Jadi, intinya disini adalah, kalian harus menyesuaikan scriptnya dengan template kalian.




7. Jangan lupa mengganti kata URL Gambar, dengan URL gambar yang kamu inginkan. Contoh untuk tombol next saja ya, akan jadi seperti ini:
<b:if cond='data:newerPageUrl'>
      <span id='blog-pager-newer-link'>
      <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><img src="
http://i575.photobucket.com/albums/ss199/g14n_nakal/Button-Next-48x48.png
" alt="Next" /></a>

Gambarnya dapat dicari di web image hosting seperti photobucket, http://findicons.com/search/back-and-forward-button/1findicons.com dan lainnya. Jika kuat, boelh cari di mbah google kok. hehehehe

8. Langkah terakhir yang selalu mentukan. Simpan Templatenya dengan click tombol SAVE TEMPLATE.


Okay, tadi emang agak sedikit rumit karena saya tidak pandai merangkai kata. hahahaha. Kalau ada masalah, silahkan taruh di kotak komentar. Insya Allah akan saya buatkan tutorial khusus dengan menggunakan screenshot atau video fraps. [40% kemungkinan akan dibuatkan]



Selamat mencoba



Semoga berhasil ya!


Semoga bermanfaat