Advertise

Membuat Buttom Next Page,Home,Back Page dengan CSS3

Postingan ini saya coba menjawab pertanyaan [Rizky2009] yang menanyakan cara membuat navigasi Next Page - Home - Back Page dengan menggunakan Button CSS3, untuk contohnya bisa lihat ilustrasi gambar dibawah, atau link next page di bagian bawah.

next page buttom css3 style

Langsung pada cara membuat Button Next Page - Home - Back Page Dengan CSS3.

Pertama pastikan anda sudah memasang Button CSS3 pada template anda agar button bisa diterapkan, Untuk lebih jelasnya baca postingan sebelumnya yaitu :

"Membuat Tombol Dengan CSS3 - Buttom CSS3 Style"

Sekarang masuk pada Edit HTML > Expand Template Widget
Cari kode seperti dibawah ini

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='yes'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'>
<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;' expr:title='data:newerPageTitle'>&#8592; Back Page</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'>Next Page &#8594;</a>
</span>
</b:if>

<a class='home-link' expr:href='data:blog.homepageUrl'>Home Page</a>

</div>

Untuk lebih cepat gunakan [Ctrl + F] untuk menemukan kode diatas.
Setelah itu hapus kode diatas dan ganti dengan kode di bawah ini :

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='yes'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'>
<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<p><a class='buttom' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'>&#8592; Back Page</a></p>
</span>
</b:if>

<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<p><a class='buttom' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'>Next Page &#8594;</a></p>
</span>
</b:if>

<p><a class='buttom' expr:href='data:blog.homepageUrl'>Home Page</a></p>

</div>

Pratinjau terlebih dahulu, kalau sudah cocock bisa langsung disimpan.
selamat mencoba.

20 komentar:

  1. langsung praktekan..kwkkwkkwkwkw...sip brad....thx u

    BalasHapus
  2. baru sadar jika pemasangan ini bisa bikin kolom komen ku jadi rapi..hebat ah...

    BalasHapus
  3. Wah bentuknya kaya yg di blog ini ya Sob... mantabz... aku juga mau ikutan ah klo yg ini hha.. thnx 4 share SOb... semangat n happy blogging...

    BalasHapus
  4. makasih bnget sob dah dipenuhin request saya, saya save dulu kalau saya dah punya banyak waktu luang akan saya coba, sekali lagi terima kasih bgt sob

    BalasHapus
  5. keren sob
    ntar tak coba...
    makasih ya

    BalasHapus
  6. Pagi Sob.. kaya biasa aku nongkrong dlu sebelum aktivitas hhe... klo gtu aku nitip Request juga ya Sob... aku pesen share button ala CSS3 nya hhe.... klo bisa yg tanpa JQUERY wkwkw....

    Semangat n happy blogging Sob....

    BalasHapus
  7. lebar dan tinggi kolom ni bisa di ubah ga brad?...

    BalasHapus
  8. Belantara Indonesia : Untuk mengatur lebar dan tinggi bisa di rubah pada ukuran Paddingnya Brader...Silahkan di coba.

    BalasHapus
  9. owh gtu..oke deh brad...makasih...

    BalasHapus
  10. Bagaimana dengna pengaturan warnanya sob?

    BalasHapus
  11. Belajar CorelDRAW :: Ow iya lupa brader nanti saya coba Posting!!

    BalasHapus
  12. patut di coba nih, tampiLannya Lebih keren ada kotaknya enggak cuma tuLisan doang. simpen duLu ah, besok maLem Langsung praktek. semoga berhasiL, mohon doa restunya Mbah.

    BalasHapus
  13. Keren Sob,akhirnya berhasil membuatnya tombol ini..Thank's sob..

    BalasHapus
  14. Sobat tutorialnya saya copas, tengkiu petunjuknya.

    BalasHapus
  15. Wah pingin juga tuh biar bikinnya cob dulu ah

    BalasHapus
  16. Kalau yang model kaya di wordprees (model halaman 1,2,3,4 dst dalam kotak) caranya gimana ya?

    BalasHapus
  17. admin :: Kalau yang seperti itu namanya paginations atau page number, saya sudah memposting tutorialnya silahkan dicari di kotak pencarian dengan keyword page navigasi 123.

    BalasHapus