Create Newer & Older Post Blogger Motyar Style

Sambil mengenalkan blog master Syed Faizan owner dari my blogger lab artikel teranyar berbicara mengenai How To Create Floating Older and Newer Post Buttons in Blogger Membuat tombol post baru/lama dengan gaya melayang (float) Kalau mau yang seperti itu silahkan dibaca dan dipraktekan, Koben rasa penjelasan sudah cukup jelas walau dalam bahasa alien :D Biar ada warna baru, namun sudah cukup banyak diaplikasikan juga, gue akan coba share cara serupa tetapi dengan gaya create newer & older post blogger motyar style :))
Belum tahu bagaimana bentuk older/newer master Motyar! ya silahkan lihat dulu Motyar Blog

Selalu BackUp Full Template Sebelum Melakukan Edit Template Sekecil Apapun itu Bentuknya :)

Pada halaman Blogger Dashboard klik icon ▼ pilih opsi Template, Edit HTML, klik Proceed lakukan Expand Widget Templates
Letakan bumbu kode CSS tepat sebelum/diatas tag penutup </b:skin>

.prev-next {
 color: rgba(0, 0, 0, 0.5);
 background-color: transparent;
 border: none;
 top: 0;
 bottom: 0;
 font-size: 40px;
 padding: 0;
 position: fixed;
 margin: 0;
 max-width: 150px;
 min-width: 90px;
 z-index: 5;
}
.prev-next:hover{
 background-color: rgba(0, 0, 0, .06);
}
.sebelum {
 float: left;
 text-align: center;
 width: 9%;
 left: 0px;
 top: 0px;
 font-weight: bold;
 cursor: pointer;
}
.sesudah {
 float: right;
 text-align: center;
 width: 9%;
 right: 0px;
 top: 0px;
 font-weight: bold;
 cursor: pointer;
}

Kemudian cari kode <b:if cond='data:newerPageUrl'> Kalau tidak salah bakal ada 2 biji, yang pertama pilihnya. Soalnya yg kedua opsi mobile bos :)) Mau diganti kedua-duanya silahkan saja ;))

Tepat dibawah kode tersebut pasti akan tampak seonggoh code seperti ini <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>Fokuskan pada code berikut<data:newerPageTitle/> & <data:olderPageTitle/>Gantikan dengan kode<button class="sebelum prev-next">«</button> & <button class="sesudah prev-next">»</button>Final code look like this

    <b:if cond='data:newerPageUrl'>
      <span class='black' 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'><button class="sebelum prev-next">«</button></a>
      </span>
    </b:if>
    <b:if cond='data:olderPageUrl'>
      <span class='black' 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'><button class="sesudah prev-next">»</button></a>
      </span>
    </b:if>

Good luck :)
Happy coding \m/