Simple sederhana back to top button - Sebuah widget 'back to top' yang patut ada pada blog anda sekiranya anda mempunyai artikel yang panjang untuk setiap artikel. Terlalu banyak widget dan mungkin juga halaman page yang banyak.
Button back to top sederhana ini akan membantu visitor anda kembali ke permukaan/ atas halaman blog anda setelah mereka habis membaca artikel yang anda kongsikan. Mudah dan simple, tak perlu nak scroll naik ke atas tapi hanya perlu menekan button istimewa ini sahaja.
Simple sederhana back to top button
- Pastikan dalam template blog anda sudah terpasang kode jQuery Library di bawah ini. Sekiranya belum ada, copy dan paste kode dibawah ini dan letakkannya di atas kode </head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
- Copy & paste kode di bawah ini di atas kode ]]></b:skin> atau </style>
/*Simple sederhana back to top button*/
#top{background-color:#444;margin:0;padding:10px;border-radius:2px;-moz-border-radius:2px;-webkit-border-radius:2px;position:fixed;bottom:10px;right:10px;cursor:pointer;display:none;}
#top:hover{background-color:#E73138}
- Copy & paste kode di bawah ini di atas kode </body>
<a href='#' id='top'><img alt='Back To Top' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjugh0G1Co-CEZmyonpeuIm9ogJUInDrpwscjl_8nmi4GDsfENxYUWFmQxSuQAtu7OINioZtM2yV9tk3oUldPW3KJRixi8gbmmD8MTGJk75MeZRHnrUm4cM0EfV2u2B0Aqvl13E0lxKZFuS/s1600/btp.png'/></a>
<script type='text/javascript'>
//<![CDATA[
//Scroll Top
(function(a){a(window).scroll(function(){if(a(this).scrollTop()>280){a("#top").removeAttr("href");a("#top").fadeIn()}else{a("#top").fadeOut()}});a(function(){a("#top").click(function(){a("html, body").animate({scrollTop:0},"slow");return false})})})(jQuery);
//]]>
</script>
- Save dan lihat hasilnya.. Ubah/ edit mengikut kesesuaian (tidak diterangkan di dalam artikel ini). Semoga bemanfaat... - Simple sederhana back to top button
No comments
Post a Comment