Artikel Blogger

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

Home » Blogger » Cara Membuat Tombol Navigasi di Pojok Blog

Cara Membuat Tombol Navigasi di Pojok Blog

Oleh Unknown Pada Thursday, November 29, 201216 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


Judul : Cara Membuat Tombol Navigasi di Pojok Blog
Kategori :
Rating : 5.0
Penulis : Unknown

16 comments:

  1. KhewayzDecember 1, 2012 at 2:20 PM

    Wah info yang sangat menarik, bookmark dulu deh :)

    Salam Sehat Sesama Sensus Republik Blogger Nusantara (Khewayz).

    ReplyDelete
  2. Ramadhana KurniaDecember 1, 2012 at 6:36 PM

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

    ReplyDelete
  3. a-pg | aldo pusat gratisDecember 1, 2012 at 7:06 PM

    salam kenal gan

    ReplyDelete
  4. IanDecember 2, 2012 at 5:31 PM

    Masih bingung dengan yg namanya ngedit template

    ReplyDelete
    Replies
    1. UnknownDecember 3, 2012 at 8:13 PM

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

      Delete
  5. erikDecember 2, 2012 at 7:24 PM

    sederhana tapi cukup bermanfaat, nice post sob :D

    @http://komputer-fix.blogspot.com

    ReplyDelete
  6. UnknownDecember 3, 2012 at 10:30 PM

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

    ReplyDelete
  7. catatan manga | Read manga onlineDecember 11, 2012 at 4:30 AM

    MAkasih sudah mau berbagi
    salam anggota RBN (Faiz Dawami)

    ReplyDelete
  8. UnknownDecember 15, 2012 at 8:17 AM

    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
  9. Ninja BloggerDecember 29, 2012 at 11:49 PM

    Wah, keren gan navigasinya lengkap :D

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

    ReplyDelete
  10. Tips Trik SEO Blogger PemulaJanuary 4, 2013 at 7:50 PM

    makasih atas infonya..

    ReplyDelete
  11. Blog Everything SharingFebruary 4, 2013 at 5:44 AM

    di coba dulu gan ! makasih atas infonya !

    ReplyDelete
  12. Kang RidhwanMarch 4, 2013 at 6:47 AM

    Info yang bermanfaat sob :D

    Salam sukses dari saya :)

    ReplyDelete
  13. UnknownMarch 20, 2014 at 11:59 PM

    mantaps

    ReplyDelete
  14. mahadewa pulsaAugust 4, 2014 at 10:12 AM

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

    ReplyDelete
  15. fhhggtyjApril 5, 2019 at 3:08 PM

    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.

  • Pasang Iklan disini
  • Beriklan disini
  • Pasang Iklan disini
  • Pasang Iklan disini