Navigasi Next - Prev Button Keren dengan Left-Right Sliding Arrow Floating Blogger

SALAM SEJAHTERA !!!
Bertemu lagi pada kesempatan kali ini, sudah sekian lama tak blogging, dengan mengisi kekosongan saya mau share tentang bagaimana membuat navigasi tombol next-prev keren dengan left-right sliding pada blogger. Saya tertarik navigasi yang ada di blognya si Blog Funda yang memakai navigasi ini. Ini sangat keren dan mudah dinavigasi setiap pengguna. Untuk mengetahui tampilannya kira2 seperti ini:

Navigasi Next-Prev Button dengan left-right sliding arrow floating

Featurenya sbb: Floating Button , Fixed Position , sliding arrow {memakai kode css hover} , warna hitam , block , border kiri dan kanan.

Apa anda tertarik dipasang di blog anda?  Jika tertarik, silahkan ikuti beberapa langkah dibawah ini :

1.  Silahkan Login ke Blogger >> Template >> Backup Template anda
2. Pilih Edit HTML
3. Pilih dan centang  kotak  Expand the widget box
4. Dan sekarang cari  ]]></b:skin> dan pastekan kode dibawah ini diatasnya

.arrowLeft a {position: fixed;z-index: 100;left: -5px;top: 45%;padding: 25px 20px;-webkit-transition: .2s ease-in;-moz-transition: .2s ease-in;-o-transition: .2s ease-in;transition: .2s ease-in;}
.arrowLeft a:hover {left: 0;-webkit-transition: .2s ease-in;-moz-transition: .2s ease-in;-o-transition: .2s ease-in;transition: .2s ease-in;color: #fff;}
.arrowRight a {position: fixed;z-index: 100;right: -5px;top: 45%;padding: 25px 20px;-webkit-transition: .2s ease-in;-moz-transition: .2s ease-in;-o-transition: .2s ease-in;transition: .2s ease-in;}
.arrowRight a:hover {right: 0;-webkit-transition: .2s ease-in;-moz-transition: .2s ease-in;-o-transition: .2s ease-in;transition: .2s ease-in;color: #fff;}
.arrowNav a {background: #000000;color: #fff;text-decoration: none;font-size: 16px;}

5. Kemudian cari kode seperti dibawah ini

<b:includable id='nextprev'> <div class='blog-pager' id='blog-pager'> <b:if cond='data:newerPageUrl'> <span id='blog-pager-newer-link'> <!-- the newer post --> </span> </b:if> <b:if cond='data:olderPageUrl'> <span id='blog-pager-older-link'> <!-- the older post --> </span> </a></div> </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>

6. Lalu ganti kode diatas dengan kode dibawah ini

<b:includable id="nextprev">  <div class="blog-pager" id="blog-pager">
<div class="arrowNav">
<b:if cond="data:newerPageUrl">      <span id="blog-pager-newer-link">    <!-- DHI the newer post -->  </span></b:if>
<div class="arrowLeft">
<span id="blog-pager-newer-link"><a class="prev" expr:href="data:newerPageUrl" expr:id="data:widget.instanceId + &quot;_blog-pager-newer-link&quot;" expr:title="data:newerPageTitle" href="https://draft.blogger.com/null" id="nextLink">   <span class="arrow">   <span class="prevnext">←</span></span></a>  </span></div>
<b:if cond="data:olderPageUrl">      <span id="blog-pager-older-link">     <!-- DHI the older post -->  <div class="arrowRight">
<a class="next" expr:href="data:olderPageUrl" expr:id="data:widget.instanceId + &quot;_blog-pager-older-link&quot;" expr:title="data:olderPageTitle" href="https://draft.blogger.com/null" id="prevLink">   <span class="arrow">   <span class="prevnext">→</span>
  </span></a></div>
</span>     </b:if></div>
<a class="home-link" expr:href="data:blog.homepageUrl" href="https://draft.blogger.com/null"><data:homemsg></data:homemsg></a>    <b:if cond="data:mobileLinkUrl">      </b:if>
<div class="blog-mobile-link">
<a expr:href="data:mobileLinkUrl" href="https://draft.blogger.com/null"><data:mobilelinkmsg></data:mobilelinkmsg></a>      </div>
</div>
<div class="clear">
</div>
</b:includable>

Demikianlah langkah-langkah memasang Tombol navigasi Next-Prev keren dengan Left-Right Sliding Arrow Floating Blogger.
Semoga bermanfaat