Cara Membuat Widget Back To Top Mouseover efek

Cara memasang widget back to top -  pada artikel kali ini saya akan membagikan tutorial tentang widget back to top dengan efek mouseover setelah saya selesai membuat pos dengan judul cara membuat auto read more dengan thumbnail, mungkin sobat sudah  tidak asing lagi dengan widget yang satu ini, dengan efek mouseover saat kursor diarahkan ke widget ini, mungkin sobat sering melihat widget ini di beberapa blog, dan juga di blog saya ada juga loh? liat aja dipojok kanan bawah, jika sobat suka menulis artikel sampe panjang kaya kereta wajib pake ini widget untuk mempermudah pengunjung kembali kejudul pos tanpa susah-susah scroling mouse, tinggal satu klik sudah langsung kembali kejudul pos.

ini dia tutorialnya

update:  ada yang baru loh. widget back to top dengan efek smooth 

Pengertian Efek mouseover

mouseover atau yang dalam css disebut hover css yaitu menampilakan 2 gambar, contoh gambar pertama adalah gambar yang berwarna merah dan ketika mouse diarahkan ke gambar (hover) akan berubah menjadi gambar kedua yang sudah ditentukan hover keduannya. untuk lebih mudahnya coba sobat arahkan kursor kegabar panah dibawah ini, dan lihat hasilnya

Fungsi dari widget back top

fungsi utama dari widget backtop ini adalah sama seperti namanya back to top yang dalam bahasa indonesia berarti kembali keatas, jadi widget ini berfungsi kembali keatas saat pengunjung sedang pada bagian bawah posting maupun footer blog dengan begini visitor tidak usah repot-repot lagi untuk scroll keatas karena dengan hanya menklik thumbnail back top dengan sesingkat-singkatnya visitor yang sedang ada pada bagian bawa post/footer kembali ke header blog.

Cara pemasangan

• login kebloger
• pilih tata letak atau layout
• pilih add widget >>html/java script
• copy paste script dibaw ini

<!--BACK-TO-TOP-STARTS-->
<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Back
 to Top"><img onmouseover="this.src='http://lh6.ggpht.com/_7wsQzULWIwo/SgXYIY37QsI/AAAAAAAABDY/IyDZK-CJzdA/Up1Blue%5B4%5D.png?imgmax=800'"
 src="http://lh6.ggpht.com/_7wsQzULWIwo/SgXYJAl0TcI/AAAAAAAABDc/_gSevr05V18/Up1Blue%5B9%5D.png?imgmax=800" onmouseout="this.src='http://lh6.ggpht.com/_7wsQzULWIwo/SgXYJAl0TcI/AAAAAAAABDc/_gSevr05V18/Up1Blue%5B9%5D.png?imgmax=800'"/></a>
<!--BACK-TO-TOP-STOPS-->

• simpan

dan silakan lihat blog sobat sudah terpasang widget back to top