Menambahkan Widget Back to top Efek Smoothing

 

Hay Sobat Ray Soft , Ini adalah Tutorial Lanjutan saya . yang sebelumnya saya share Tentang Membuat Widget Back To Top Keren | yang Belum Nyimak Postingan Saya Dulu , Ini Monggo Disimak dulu Membuat Widget Back To Top Keren . Widget Back to Top ini mungkin tidak asing lagi bagi kalian, karna sudah sangat banyak blog-blog yang membahas tutorial ini, baik yang sederhana hanya dengan membuat link anchor ka atas halaman (mengarahkan kehalaman atas blog) ada juga yang sudah menggunakan efek smooth scrolling (dengan jQuery) Dengan menggunakan script jQuery ini akan membuat Widget Back to Top diblog anda lebih bagus dan menarik. karna efek Smooth Scrolling yang ini berarti menggulung (bergulir) secara lembut/halus ke atas jika tombol diklik, tidak secara sekaligus.Jika penasaran , saya juga memakai widget ini kok di blog Kesayangan saya ini sob :) Oke Sob langsung aja Kita Lanjut ke Tutorialnya , Simak baik-baik ya sob Agar berhasil :)

1. Silahkan Sobat Login ke Blogger Dulu , Lalu Pilih DASHBOR .

2. Setelah itu , Lanjut pada Menu TATA LETAK , Lalu TAMBAH GADGET

3. Lalu Silahkan Sobat Pilih HTML/JAVA SCRIPT . Lalu Isikan Dengan Script Ini

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script> <style type="text/css"> #w2btoTop { display:none;text-decoration:none;position:fixed;bottom:10px;right:10px; overflow:hidden;width:51px;height:51px;border:none;text-indent:-999px; background:url(https://lh5.googleusercontent.com/-dbSPMPByXN8/UGhc5Bm0ihI/AAAAAAAAAc0/FgjSFgtTNa4/s102/way2blogging.org.ui.totop.png) no-repeat left top; } #w2btoTopHover { background:url(https://lh5.googleusercontent.com/-dbSPMPByXN8/UGhc5Bm0ihI/AAAAAAAAAc0/FgjSFgtTNa4/s102/way2blogging.org.ui.totop.png) no-repeat left -51px; width:51px;height:51px;display:block;overflow:hidden;float:left;opacity: 0;-moz-opacity: 0;filter:alpha(opacity=0); } #w2btoTop:active, #w2btoTop:focus { outline:none; } </style> <script src="http://gragasanit.googlecode.com/files/w2b_jquery.ui.totop.js" type="text/javascript"> </script> <script type="text/javascript"> $(document).ready(function(){ $().UItoTop({ easingType: 'easeOutCubic' }); }); </script>

 
4. Ganti Posisi Widget dengan Mengganti Tulisan Merah Sesuai Kehendak Sobat 

5. Lalu Save :) Dan Lihat Hasilnya , Oiya Sob Jika Template sobat Belum Terpasang jQuery , Tambahkan Kode berikut ini Tepat Diatas Kode </head>

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'/>

Selesai Sob , Huuft Semoga Bermanfaat yaa , Jika Kesulitan . Silahkan Komentar Atau Hubungi Saya di FB "www.facebook.com/reg.anonymouse" Good morning Soob :) Selamat Beraktivitas

INFO PENTING
Kabar Gembira Untuk Kita Semua !
ada game yang menghasilkan uang, dan jika kita meng-install aplikasi atau ngerjain task akan dibayar 0,1 - 1$ dan juga saat pertama kali mendaftar pakai coupon AE89874 langsung dapat 0,3$ Namun ini khusus bagi pengguna android.
Nama aplikasinya : WHAFF
Masukan coupon : AE89874 (langsung dapat 0,3$)
Downloadnya dimana : Google Playstore atau bisa langsung klik disini

Share :

Tweet

✚

Related Post