Wednesday, December 19, 2012

Tutorial Cara Membuat Tombol Navigasi di Pojok Blog

Tutorial Cara Membuat Tombol Navigasi di Pojok Blog
Cara Membuat Tombol Navigasi di Pojok Blog -  Mungkin masih banyak yang belum memahami maksud dari Judul Posting kali ini, maksudnya adalah sebuah tombol navigasi yang berisi tombol Back to Top, Go to Bottom, Next Post / Next page, Previous Post / Previous Page, untuk link yang dituju di atur otomatis, dan jika ingin melihat langsung ( live demo ) silahkan lihat di blog ini ( jika masih tersedia ) atau bisa melihat screenshot berikut.

Tutorial Cara Membuat Tombol Navigasi di Pojok Blog
 Jika tertarik ingin mencoba, silahkan baca tutorial berikut, dan jika tidak tertarik mencoba, dapat berkeliling di blog biasa ini.
langkah yang harus dilakukan adalah ( saya sarankan backup dulu template sobat, untuk mengurangi resiko kesalahan ) :
1. Masuk ke Template - Edit HTML
2. Centang Expand Template Widget
3. Cari kode <body>, pastekan kode berikut di bawah kode <body>
<a href='#top' style='display:scroll;position: fixed; bottom:45px;right:42px;' title='Ke Atas'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0AoLS7_sxmFSsvwN8iC-sswUcu3QsHd9YtM28g3dlCfGC_SZmyl0YT4iVL_As8MNa9X67EcKsAAmv0Etyj_hchcLCtNY_qKm9AWSmmu7r3_gBXmnok2m7XTC4jGlqT-4_SilDHEygcHM/s1600/up.png' width='43'/></a>
<a href='#footer' style='display:scroll;position: fixed; bottom:5px;right:42px;' title='Ke Bawah'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtzBQLnnqgYaDNhkBr8nWDDd8krEs56nNZpV6FRqWy2nrJokWN_wnoWcR4_RI5Dubkv9gCjMINVJ8kS3VEYIxVpTwr7yC_quAvgyiBXYbsGQvx790UsBq1E0qOGPVWVasLgeSk9bv19dA/s1600/down.png' width='43'/></a>

4. Cari kode berikut :
<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>
      </span>
    </b:if>

    <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>
      </span>
    </b:if>

5. Hapus dan Gantikan dengan kode berikut :

<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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhESgjEWosG5OqDH7JEgxf65sQlPgKdMPJlUWWwDUolJbi-ESwEpqm-UXY32_-w9DJk3SWaCl1ndxQ3d9cfvdjEJJLxz6JYBfBTBrSKYQ5RFam6YRdXsOZ3TB_MO6WnGuPTB4QjUFSaug4/s1600/left.png' width='43'/></a>
      </span>
    </b:if>

    <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'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizZdrWPUCBljXz5UPIeJ_e0yZ_AX2ARNU2d9QjY5oIFmvCb6oqOOQlLyZlcTcsFlrc_J76Zi-8MHNiaWMQ76WNf8V9jh27ltDMp9-opIYO9MQG8BEKDxVQhGJ7Hq0vABZ_n5aIP-CIaZs/s1600/right.png' width='43'/></a>
      </span>
    </b:if>
6. Terakhir, silahkan simpan template dan lihat hasilnya.
NB : gambar tombol bisa diganti sesuai dengan keinginan, cukup ganti tulisan yang berwarna merah, tetapi harus sesuai dengan arah navigasinya.

Tutorial dan ide Cara Membuat Tombol Navigasi di Pojok Blog asli buatan saya sendiri, tanpa meniru karya orang lain. jadi tolong hargai karya saya dengan mencantumkan link sumber jika ingin mencopy artikel ini.
Posted by at
Labels: