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.

Komentar

Belantara Indonesia mengatakan…
langsung praktekan..kwkkwkkwkwkw...sip brad....thx u
Belantara Indonesia mengatakan…
baru sadar jika pemasangan ini bisa bikin kolom komen ku jadi rapi..hebat ah...
Ferdinand mengatakan…
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...
Unknown mengatakan…
previewnya donk :)
Pepito mengatakan…
ijin nyimak gan....
Rizky2009 mengatakan…
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
Unknown mengatakan…
keren sob
ntar tak coba...
makasih ya
Tip Trik Blogger mengatakan…
kunjungan pagi sobat..
Ferdinand mengatakan…
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....
Belantara Indonesia mengatakan…
lebar dan tinggi kolom ni bisa di ubah ga brad?...
Chugy mengatakan…
Belantara Indonesia : Untuk mengatur lebar dan tinggi bisa di rubah pada ukuran Paddingnya Brader...Silahkan di coba.
Belantara Indonesia mengatakan…
owh gtu..oke deh brad...makasih...
Belajar CorelDRAW mengatakan…
Bagaimana dengna pengaturan warnanya sob?
Chugy mengatakan…
Belajar CorelDRAW :: Ow iya lupa brader nanti saya coba Posting!!
om rame mengatakan…
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.
Belajar CorelDRAW mengatakan…
Keren Sob,akhirnya berhasil membuatnya tombol ini..Thank's sob..
Anton wijaya mengatakan…
Sobat tutorialnya saya copas, tengkiu petunjuknya.
mawardi mengatakan…
Wah pingin juga tuh biar bikinnya cob dulu ah
Unknown mengatakan…
Kalau yang model kaya di wordprees (model halaman 1,2,3,4 dst dalam kotak) caranya gimana ya?
Chugy mengatakan…
admin :: Kalau yang seperti itu namanya paginations atau page number, saya sudah memposting tutorialnya silahkan dicari di kotak pencarian dengan keyword page navigasi 123.

Postingan populer dari blog ini

Motion Tween dan Shape Tween

Mengenal Symbol dalam Animasi Flash

Membuat Bayangan Di Dalam Text