Kumpulan Artikel seorang Blogger yang menyangkut Tips Trik Blogging, Internet, Komputer, Download, Anime, Berita

Cara Membuat Tombol Navigasi di Pojok Blog

Oleh Unknown Pada Thursday, November 29, 201217 comments
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 kanan bawah blog ini ( jika masih tersedia ) atau bisa melihat screenshot berikut.

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/AVvXsEh0OYQTH2umFoQk-PJ3h3LbM_KaolLefAR1eqj0dIKa7DhfQ5Vbu6e1ryFYRjxW6eAtOrd1w6TjcVYUS7uhZGfTZylWf5Rpn9qmCB_2uxm1nh2zaUV1vuptUWtmG26-E5XZ-Z9aogSdX0A/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/AVvXsEg4A5ZdMM1XPfLXsrHlWIKABjl7KP0cFTACmUEeFeJ5bx5ajWHaPXRDo2CqR-MWL4Du_n19QZOD9OwGBsc3uGIguoaD5MQlKhSUTGzZLr6eNLVXAemKqF2ExI87WKYKaABg7Al6Zo7Eb6A/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/AVvXsEitkcTdExhC0mhyphenhyphen-N9ph7fZa5Xr-dD5GiJT3fKU3Amoznxl0Z2W5fZ7Yt72Al1pKwF4rFzCOPw6DmvrsS-kTZFpuJlJ7Af4HeRZAkSo7SOvaWdNmDaf9LjY2WO5cZfCwJaSFMncfqMn0x0/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/AVvXsEhU0yBNSfj7wKKldKtMotgsVPCzIB4Df9VIXgmMfsfXWvFofGplAsZzCWVtvVNKqcF9Bc47j2witkrjGeL9yqrT7jjsGYO8O3z6BSFTEWCE1CK6YREcnvO4htmUbjTlTc1zgWig2vhyphenhyphenN-M/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. http://artikelbloggers.blogspot.com/2012/11/cara-membuat-tombol-navigasi-di-pojok-blog.html

17 comments:

  1. Wah info yang sangat menarik, bookmark dulu deh :)

    Salam Sehat Sesama Sensus Republik Blogger Nusantara (Khewayz).

    ReplyDelete
  2. Salam sukses sesama anggota grup REPUBLIK BLOGGER NUSANTARA (Ramadhana Kurnia)
    Jangan lupa comment back nya :)

    ReplyDelete
  3. Masih bingung dengan yg namanya ngedit template

    ReplyDelete
    Replies
    1. jika langkah2 yg diberikan diikuti dengan benar, pasti berhasil gan...

      Delete
  4. wah, cocok sekali jika diterapkan pada blog2 yang memiliki tampilan besar.. :)

    ReplyDelete
  5. MAkasih sudah mau berbagi
    salam anggota RBN (Faiz Dawami)

    ReplyDelete
  6. bagus sob artikelnya :D

    #Koment balik ya di Pasang Iklan Murah Hanya 5000/bulan

    Salam Silaturahmi Sesama Anggota Grup Republik Blogger Nusantara (Acep Derby Yudha Anggara)

    ReplyDelete
  7. Wah, keren gan navigasinya lengkap :D

    Selamat Tahun Baru 2013, Salam Sejahtera, Salam Sehat Selalu dari Member Republik Blogger Nusantara (Wawan Setyadi)

    ReplyDelete
  8. Info yang bermanfaat sob :D

    Salam sukses dari saya :)

    ReplyDelete
  9. udah ga ada boss demo nya . kunbal ya www.mahadewapulsa.com

    ReplyDelete
  10. This comment has been removed by the author.

    ReplyDelete

Dimohon agar jangan Memakai ID anonymous dan Name/URL, agar orang lain dapat mengenal komentator dan tidak terjadi penggunan nama orang lain tanpa izin pemilik nama.