Cara Membuat Tombol Navigasi Next-Prev di Blog Menggunakan Icon SVG

Pada kesempatan kali ini saya akan berbagi tutorial cara untuk membuat tombol navigasi halaman atau istilah lainnya blog pager, tombol next dan previous di blog.

Tombol next-prev ini sudah responsive akan menyesuaikan dengan segala ukuran layar, jadi tampilannya akan tetap keren meski di akses dengan ukuran layar yang berbeda.

Tombol nagivasi ini biasanya berbentuk angka, older link newer link, atau biasa juga next dan previous, hal ini tergantung keinginan sobat style yang mana yang akan sobat gunakan.

Tombol navigasi halaman ini berfungsi untuk menampilkan postingan lama pada blog sobat, atau bisa juga untuk menampilkan halaman terbaru pada blog sobat.


Tombol next-prev ini harus ada pada blog sobat agar pengunjung lebih mudah untuk menavigasi dan mencari postingan lama sobat.

Cara membuat tombol nex prev ini sangat mudah sob dan saya rasa bisa dilakukan oleh siapapun termasuk sobat sendiri.

Owh iya, tombol nagivasi halaman next-prev ini dibuat menggunakan icon SVG ya sob, jadi tidak akan membuat loading blog sobat menjadi lambat.

Seperti yang kita ketahui bahwa icon SVG ini sangat ringan saat dimuat, oleh karena itu saya mulai mengganti semua icon fontawesome menggunakan SVG ini agar loading blog lebih ngebut.

Nah, lalu bagaimana cara untuk membuat tombol navigasi next-prev di halaman depan blog menggunakan icon SVG?

Langsung simak tutorialnya dibawah ini:

Cara Mudah Membuat Tombol Navigasi Next-Prev Keren di Blog;

1. Hal pertama yang harus sobat lakukan sebelum memasang tombol navigasi halaman ini adalah membackup template sobat, agar jika ada kesalahan atau error bisa direstore.

2. Jika dalam template blog sobat sudah ada navigasi halaman atau tombol next-prev silahkan hapus terlebih dahulu agar tidak bentrok dengan yang baru.


Jika sudah sekarang lanjut ke tutorialnya.

3. Silahkan copy CSS dibawah dan paste di atas kode </head>

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<style type='text/css'>
/* Blog Pager */
#blog-pager a.home-link,#blog-pager a.blog-pager-newer-link,#blog-pager a.blog-pager-older-link,#blog-pager .blog-pager-newer-link,#blog-pager .blog-pager-older-link{
    border-radius:25px;
    background:#009688;
    font-size:18px;
    margin:7px 0!important;
    padding:0;
    color:#252e39;
    font-weight:normal;
    text-transform:uppercase;
    float:none;
    display:inline-block;
    overflow:hidden;
    height:45px;
    width:45px;
    line-height:45px;
    text-align:center;
    list-style:none;
    box-shadow:0 2px 3px rgba(0,0,0,0.06),0 2px 3px rgba(0,0,0,0.1)
}
#blog-pager .icons{
    width:22px;
    padding:11px 0
}
#blog-pager a .icons{
    fill:#fff!important
}
#blog-pager a.home-link{
    text-align:center;
    display:inline-block;
    float:none;
    margin:0 20px 7px 20px!important
}
#blog-pager .blog-pager-older-link, #blog-pager .blog-pager-newer-link{
    background:#009688;
    color:#fff;
    fill:#fff!important;
    box-shadow:0 2px 3px rgba(0,0,0,0.06),0 2px 3px rgba(0,0,0,0.1)
}
#blog-pager a:hover .icons{
    fill:#fff!important
}
#blog-pager a:hover.home-link,#blog-pager a:hover.blog-pager-newer-link,#blog-pager a:hover.blog-pager-older-link{
    background:#00897b;
    color:#222;
    box-shadow:0 10px 21px rgba(0,0,0,0.15), 0 6px 6px rgba(0,0,0,0.12)
}
#blog-pager,.blog-pager{
    position:relative;
    margin: 15px 0 0 40%;
}
@media screen and (max-width:880px){
    #blog-pager,.blog-pager {
        position: relative;
        bottom: 0;
        margin:15px 0 0 40%;
    }
}
@media screen and (max-width:768px){
    #blog-pager,.blog-pager {
        position: relative;
        bottom: 0;
        margin:15px 0 0 36%;
    }
}
@media screen and (max-width:667px){
    #blog-pager,.blog-pager {
        position: relative;
        bottom: 0;
        margin:15px 0 0 33%;
    }
}
@media screen and (max-width:480px){
    #blog-pager,.blog-pager {
        position: relative;
        bottom: 0;
        margin:15px 0 0 25%;
    }
    #blog-pager a.home-link, #blog-pager a.blog-pager-newer-link, #blog-pager a.blog-pager-older-link, #blog-pager .blog-pager-newer-link, #blog-pager .blog-pager-older-link{
        height:38px;
        width: 38px;
    }
    #blog-pager .icons{
        width:20px;
        padding:9px 0
    }
}
@media screen and (max-width:320px){
    #blog-pager,.blog-pager {
        position: relative;
        bottom: 0;
        margin:15px 0 0 20%;
    }
}
@media screen and (max-width:300px){
    #blog-pager,.blog-pager {
        position: relative;
        bottom: 0;
        margin:15px 0 0 22%;
    }
}
</style>
</b:if>
</b:if>

4. langkah selanjutnya silahkan copy kode dibawah ini diatas kode

<b:includable id='post' var='post'>

<b:includable id='nextprev'>
  <div class='blog-pager' id='blog-pager'>
    <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;' title='Halaman Selanjutnya'><svg class='icons icon-LEFT' viewBox='0 0 24 24'><path d='M20,11V13H8L13.5,18.5L12.08,19.92L4.16,12L12.08,4.08L13.5,5.5L8,11H20Z'/></svg></a>
      </span>
<b:else/>
      <span class='blog-pager-newer-link' title='Sudah di Halaman Terbaru'><svg class='icons icon-MAP' viewBox='0 0 24 24'><path d='M12,6.5A2.5,2.5 0 0,1 14.5,9A2.5,2.5 0 0,1 12,11.5A2.5,2.5 0 0,1 9.5,9A2.5,2.5 0 0,1 12,6.5M12,2A7,7 0 0,1 19,9C19,14.25 12,22 12,22C12,22 5,14.25 5,9A7,7 0 0,1 12,2M12,4A5,5 0 0,0 7,9C7,10 7,12 12,18.71C17,12 17,10 17,9A5,5 0 0,0 12,4Z'/></svg></span>
    </b:if>
   <a class='home-link' expr:href='data:blog.homepageUrl' title='Beranda'><svg class='icons icon-HOME' viewBox='0 0 24 24'><path d='M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z'/></svg></a>
    <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;' title='Halaman Sebelumnya'><svg class='icons icon-RIGHT' viewBox='0 0 24 24'><path d='M4,11V13H16L10.5,18.5L11.92,19.92L19.84,12L11.92,4.08L10.5,5.5L16,11H4Z'/></svg></a>
      </span>
<b:else/>
      <span class='blog-pager-older-link' title='Sudah di Halaman Terakhir'><svg class='icons icon-MAP' viewBox='0 0 24 24'><path d='M12,6.5A2.5,2.5 0 0,1 14.5,9A2.5,2.5 0 0,1 12,11.5A2.5,2.5 0 0,1 9.5,9A2.5,2.5 0 0,1 12,6.5M12,2A7,7 0 0,1 19,9C19,14.25 12,22 12,22C12,22 5,14.25 5,9A7,7 0 0,1 12,2M12,4A5,5 0 0,0 7,9C7,10 7,12 12,18.71C17,12 17,10 17,9A5,5 0 0,0 12,4Z'/></svg></span>
    </b:if>

    <b:if cond='data:mobileLinkUrl'>
      <div class='blog-mobile-link'>
        <a expr:href='data:mobileLinkUrl'><data:mobileLinkMsg/></a>
      </div>
    </b:if>

  </div>
   <div class='clear'/>
</b:includable>

5. sekarang tinggal memasang code untuk memanggil tombol navigasi atau blog pager diatas, caranya silahkan simpan kode dibawah ini dibawah kode  </article>

<b:if cond='data:blog.pageType != &quot;item&quot;'>
  <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
  <b:include name='nextprev'/>
</b:if></b:if>

6. Kemudian save template sobat dan lihat hasilnya.



Nah, itu dia sob cara mudah untuk membuat tombol newer dan tombol older di blog dengan menggunakan icon svg.


Demikian tutorial Cara Membuat Tombol Navigasi Next-Prev di Blog dengan Icon SVG yang dapat saya bagikan semoga bermanfaat.

Jika ada yang masih tidak paham bisa tanyakan di kolom komentar nanti saya bantu.