◄ Min  Size Fonts: + | - | ± Color: Max ►

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 :)
Newer-Older-Post-Blogger-Motyar-StylePada 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/
Loading...
XCreate Newer & Older Post Blogger Motyar Style
Create Newer and Older Post Button Blogger Motyar Style so unique and full stylish
Subscribe my posts Register For Free!

6 comments

[?] g+ convert

DO NOT EVEN TRY ADD LINK [-X
You can use some HTML tags, such as
<b> - <i> - <a> - http://...jpg/gif/png/bmp - http://youtu.be/...


MISC

Resources

WANT BE HERE!!! CONTACT ME :P

FACEBOOK PAGE