Cara mudah membuat tombol button to top up dengan effect jquery | Science dan blogging Cara mudah membuat tombol button to top up dengan effect jquery | Science dan blogging Cara mudah membuat tombol button to top up dengan effect jquery | Science dan blogging Cara mudah membuat tombol button to top up dengan effect jquery ~ Science dan blogging

Cara mudah membuat tombol button to top up dengan effect jquery

Tombol back to top berfungsi untuk mengembalikan posisi dari bawah kembali lagi ke atas dalam sebuah website / blog. Sehingga memudahkan pengunjung suatu website / blog untuk kembali ke atas tanpa menggunakan scroll. Saya juga menerapkannya di blog karena simple, cantik dan keren. Lihat screen shot nya di bawah ini:



Langsung saja tanpa basa basi menuju TKP :)
1. Login ke blog kamu.
2. Pilih Tata Letak > Add Gadget > HTML/JavaScript > Copy kode di bawah ini.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script><script type='text/javascript'>$(function(){$(window).scroll(function(){if($(this).scrollTop()!=0){$("#noop-top").fadeIn()}else{$("#noop-top").fadeOut()}});$("#noop-top").click(function(){$("body,html").animate({scrollTop:0},800);return false})});</script><a id='noop-top' style='display: none; position: fixed; bottom: 1px; right:1%; cursor:pointer;font:12px arial;'><span>^</span></a><style type="text/css">#noop-top span{-moz-transition:all .3s ease-in 0s;-webkit-transition:all .3s;-o-transition:all .3s;background-color:#1e5799;background:-moz-linear-gradient(top,#1e5799 0,#2989d8 50%,#207cca 51%,#7db9e8 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#1e5799),color-stop(50%,#2989d8),color-stop(51%,#207cca),color-stop(100%,#7db9e8));background:-webkit-linear-gradient(top,#1e5799 0,#2989d8 50%,#207cca 51%,#7db9e8 100%);background:-o-linear-gradient(top,#1e5799 0,#2989d8 50%,#207cca 51%,#7db9e8 100%);background:-ms-linear-gradient(top,#1e5799 0,#2989d8 50%,#207cca 51%,#7db9e8 100%);background:linear-gradient(top,#1e5799 0,#2989d8 50%,#207cca 51%,#7db9e8 100%);border:3px solid #fff;border-radius:14px 14px 14px 14px;color:#fff;font:bold 56px cursive;height:50px;left:3px;display:block;text-align:center;text-shadow:1px 1px 0 #000;top:-56px;width:50px}#noop-top:hover span{box-shadow:0 0 49px #207cca;height:70px}#noop-top{color:#000;text-shadow:1px 1px 0 #fff;text-decoration:none}</style>

 3. Simpan dan lihat hasilnya.

Semoga bermanfa'at...
Anda menyukai postingan diatas? Silahkan di share.
Science dan blogging Post Author

Pengajar sekaligus pendidik di salah satu SMPN yang ada di daerah banten. seorang newbie blogger yang lagi belajar blogging. Strong will and effort adalah filosofi hidup saya agar supaya sukses dikemudian hari.

jalupangna Label: 21.39 27 komentar

27 komentar

  1. salam kenal...
    foolow blog ku donk gan...
    www.bmaster23.blogspot.com

    BalasHapus
    Balasan
    1. salam kenal kembali, udah saya follow blog anda. Ditunggu juga follow back nya ya? terima kasih atas komentar dan kunjungannya.

      Hapus
  2. Salam kenal Follow Blog Saya Pak..
    http://imronkreasi.blogspot.com

    BalasHapus
    Balasan
    1. Udah saya follow blog anda, follow back lagi ya? di tunggu. Trim's...

      Hapus
  3. makasih gan tutorialnya.
    kunjungi blog saya gan http://pulsappreload.blogspot.com

    BalasHapus
    Balasan
    1. Sama-sama mas, insya Allah segera meluncur ke TKP. :)

      Hapus
  4. ini keren banget gan , berguna udah ane terapin . follow blog ane juga ya gan
    copolatoss.blogspot.com ane udah follow blog ini sipp :)

    BalasHapus
    Balasan
    1. ok..mas, nanti saya folback, mhn maaf baru saya bls skg..

      Hapus
  5. halo pak guru masterr :))
    Salam kenal...
    Follow blog saya http://rasyidology.blogspot.com/

    BalasHapus
    Balasan
    1. salam kenal kembali, insya Allah saya follow..mhn maaf baru buka blog lagi, banyak kesibukan sehingga jarang update postingan.. :)

      Hapus
  6. mantap dah artikelnya
    http://acemaxs31.com/obat-herbal-gagal-jantung/

    BalasHapus
    Balasan
    1. thanks atas kunjungannya..mhn maaf baru bisa bls komentar anda skg..

      Hapus
  7. Mantaap gan artikelnya :)
    Ijin share http://pengobatanalamimustajab.com/pengobatan-herbal-gula-darah/

    BalasHapus
  8. keren artikelnya gan
    http://apotekacemaxs.com/pengobatan-tradisional-batu-ginjal/

    BalasHapus
  9. mantab artikelnya sob
    http://ramuantradisionalkita.com/

    BalasHapus
  10. Thanks gan infonya !
    http://kedaiacemaxs.com/obat-tradisional-untuk-radang-usus-besar/

    BalasHapus
    Balasan
    1. sama sama..salam sukses selalu buat anda..trims udah berkunjung

      Hapus
  11. wah keren artikelnya gan, sangat membantu
    http://apotekacemaxs.com/obat-tradisional-ginjal-bocor/

    BalasHapus
  12. Terimakasih gan infonya
    www.pubashop.cf

    BalasHapus
  13. Terima kasih banyak udah mau berkunjung ke blog saya, mhn maaf ya baru bisa bls skg..

    BalasHapus
  14. makasih atas kunjungannya sob....sukses juga buat anda

    BalasHapus

Back to Top