•  
  • TopBlogIndonesia.com   Alexa Certified Traffic Ranking for https://aguswijayaonline.wordpress.com/   bannerwpndonesiablack   blogerindonesia

  • Masukkan alamat email sobat untuk mengikuti blog ini, thanks ya..

    Bergabunglah dengan 365 pengikut lainnya

  • Spam Diblokir

Cara Membuat Button Return to Top/Kembali ke Atas di WordPress

Widget berjenis tombol ini adalah salah satu widget yang populer di wordpress. Selain fungsional, widget ini juga tidak berat dan mudah dalam pemasangannya. Berikut contoh dari button ini

1. Login ke wordpress anda, setelah login ke wordpress, buka Tampilan > Widget

agus wijaya online

2. Seret widget TEXT ke sidebar

agus wijaya online.

3. Letakkan script di bawah ini, di widget anda :

 

1.

<div style="display:scroll;position:fixed;bottom:10px;right:10px;">
<a href='#' title='Kembali Keatas'><img src='https://aguswijayaonline.files.wordpress.com/2013/03/agus-wijaya-online6.png' /></a>
</a></div>

Dan hasilnya akan terlihat seperti dibawah ini :

agus wijaya online

 

2.

<div style="display:scroll;position:fixed;bottom:10px;right:10px;">
<a href='#' title='Kembali Keatas'><img src='https://aguswijayaonline.files.wordpress.com/2013/03/arrow_up2.png' /></a>
</a></div>

Dan hasilnya akan terlihat seperti dibawah ini :

arrow_up

 

3.

<div style="display:scroll;position:fixed;bottom:10px;right:10px;">
<a href='#' title='Kembali Keatas'><img src='https://aguswijayaonline.files.wordpress.com/2013/03/arrow_up3.png' /></a>
</a></div>

Dan hasilnya akan terlihat seperti dibawah ini :

arrow_up

 

4.

<div style="display:scroll;position:fixed;bottom:10px;right:10px;">
<a href='#' title='Kembali Keatas'><img src='https://aguswijayaonline.files.wordpress.com/2013/03/sign_up1.png' /></a>
</a></div>

Dan hasilnya akan terlihat seperti dibawah ini :

sign_up

 

5.

<div style="display:scroll;position:fixed;bottom:10px;right:10px;">
<a href='#' title='Kembali Keatas'><img src='https://aguswijayaonline.files.wordpress.com/2013/03/arrow_up1.png' /></a>
</a></div>

Dan hasilnya akan terlihat seperti dibawah ini :

arrow_up

 

6.

<div style="display:scroll;position:fixed;bottom:10px;right:10px;">
<a href='#' title='Kembali Keatas'><img src='https://aguswijayaonline.files.wordpress.com/2013/03/recyclebin_up1.png' /></a>
</a></div>

Dan hasilnya akan terlihat seperti dibawah ini :

recyclebin_up

 

7.

<div style="display:scroll;position:fixed;bottom:10px;right:10px;">
<a href='#' title='Kembali Keatas'><img src='https://aguswijayaonline.files.wordpress.com/2013/03/arrow_cycle.png' /></a>
</a></div>

Dan hasilnya akan terlihat seperti dibawah ini :

arrow_cycle

 

8.

<div style="display:scroll;position:fixed;bottom:10px;right:10px;">
<a href='#' title='Kembali Keatas'><img src='https://aguswijayaonline.files.wordpress.com/2013/03/arrow_up13.png' /></a>
</a></div>

Dan hasilnya akan terlihat seperti dibawah ini :

arrow_up(1)

 

9.

<div style="display:scroll;position:fixed;bottom:10px;right:10px;">
<a href='#' title='Kembali Keatas'><img src='https://aguswijayaonline.files.wordpress.com/2013/03/arrow_top.png' /></a>
</a></div>

Dan hasilnya akan terlihat seperti dibawah ini :

arrow_top

 

10.

<div style="display:scroll;position:fixed;bottom:10px;right:10px;">
<a href='#' title='Kembali Keatas'><img src='https://aguswijayaonline.files.wordpress.com/2013/03/up.png' /></a>
</a></div>

Dan hasilnya akan terlihat seperti dibawah ini :

up

 

11.

<div style="display:scroll;position:fixed;bottom:10px;right:10px;">
<a href='#' title='Kembali Keatas'><img src='https://aguswijayaonline.files.wordpress.com/2013/03/arrow_up12.png' /></a>
</a></div>

Dan hasilnya akan terlihat seperti dibawah ini :

arrow_up(1)

 

Setelah kode tersebut diletakkan di widget, selanjutnya save..
semoga bermanfaat..

Iklan

5 Tanggapan

  1. kalau 2 arah gimana scripnya gan…..misal ke kembali ke atas dan bisa kembali ke bawah….

  2. Makasih gan…ini juga udah ane coba di blog ane yg baru mulai dikerjakan…hehe tapi maaf gan alamat iconnya ane ganti dengan punya ane sendiri…

    Kalau ada kesempatan silahkan lihat hasilnya di http://dhypha.wordpress.com/

    #SalamBlogger

  3. Ga apa-apa kok gan, ga masalah..
    Selera kan beda-beda.. 🙂
    Salam Kreativitas..

  4. gan, kok gambarnya tidak bisa muncul? 😦 mohon bantuannya

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: