postingan terbaru

Loading

Minggu, 06 November 2011

Cara Buat Scroll Back To Top atau Kembali ke Atas

Scroll ini atau tombol ini berfungsi untuk mengembalikan posisi halaman web atau blog dari bawah keatas back to top dengan cepat, fasilitas ini sangat berguna bagi pengunjung untuk kembali keposisi atas blog, setelah atau mungkin membaca artikel yang panjang sampai tidak terasa mentok kebawah, bila telah lelah rasanya malas kita untuk menggunakan scroll mousenya. biar cepat tinggal klik langsung meluncur keatas seperti tombol back to top yang ada di pojok kanan bawah blog ini silahkan coba dan lihat reaksinya ! untuk rekan blogger yang tertarik monggo ikuti aturannya seperti di bawah ini :


1. Login ke blogger dengan ID anda.
2. Klik Rancangan.
3. Dan KLik tab Edit HTML.
4. Seperti biasa alangkah baiknya setiap edit Html, Download dulu Template Lengkap (back-up Template) agar template aman, bila terjadi kesalahan.
5. Cari kode yang sama atau mirip dengan kode berikut :
]]></b:skin>

6. Sisipkan kode dibawah ini sebelum atau diatas kode ]]></b:skin>  

/* to top */<br /> #toTop<br /> {<br /> width:60px;<br /> border-style:solid;<br /> border-color:rgb(225, 225, 225);<br /> text-align: center;padding:5px;position:fixed;bottom:10px;right:10px;<br /> cursor:pointer;color:#666;text-decoration:none;<br /> background: -moz-linear-gradient(center left, #c4d69f 0%,#ffffff 100%);<br /> background: -webkit-gradient(linear, left bottom, right bottom, color-stop(0, #c4d69f),color-stop(1, #ffffff));<br /> }<br />

Lalu cari kode lagi yang sama atau mirip dengan kode berikut :
</body>

8. Sisipkan kode dibawah ini sebelum atau diatas kode </body>

<a href="#" id="toTop"><img src="https://lh5.googleusercontent.com/-x9WGN4iLTIQ/TbB0RW2bnjI/AAAAAAAAAno/q43cMdMAUxI/s104/back%2Bto%2Btop.jpg" width="50" height="40" /></a><br /> <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script><br /> <script type='text/javascript'> /*----------------------- * jQuery Plugin: Scroll to Top * by Craig Wilson, Ph.Creative (http://www.ph-creative.com) * Bring to you by Zen from http://zenplate.blogspot.com * Copyright (c) 2009 Ph.Creative Ltd. * Description: Adds an unobtrusive "Scroll to Top" link to your page with smooth scrolling. * For usage instructions and version updates to go http://blog.ph-creative.com/post/jquery-plugin-scroll-to-top.aspx * Do not delete these infomation * Version: 1.0, 12/03/2009 -----------------------*/  $(function(){$.fn.scrollToTop=function(){$(this).hide().removeAttr("href");if($(window).scrollTop()!="0"){$(this).fadeIn("slow")}var scrollDiv=$(this);$(window).scroll(function(){if($(window).scrollTop()=="0"){$(scrollDiv).fadeOut("slow")}else{$(scrollDiv).fadeIn("slow")}});$(this).click(function(){$("html, body").animate({scrollTop:0},"slow")})}});  $(function() { $("#toTop").scrollToTop(); }); </script><br />

9.   Simpan Template 

10. Monggo lihat hasilnya dan selamat mencoba !

Artikel Yang Berhubungan



0 komentar:

Poskan Komentar

Buat sobat blogger anda tulis komentar disini,angdidi tulis komentar disana tapi yang sopan ya!!!angdidi yakin anda adalah blogger yang baik matur kesuwun...