Memasang JQuery Back to Top Scroll di Blogger
23.12
infotutorialaku
, Posted in
Banyak cara untuk memperindah blog anda, salah satunya menggunakan JQuery. dengan memasang back to top pada blog anda maka si pengunjung blog anda tidak perlu secara manual menggunakan scroll mouse untuk kembali ke atas halaman anda, cukup dengan mengklik "Back to Top" makan otomatis akan kembali keatas.
Pemasangan
1. Login ke blogger » layout / tata letak » edit HTML
2. Masukan script jQuery berikut diatas
</head>:3. Masukan script berikut dibawah script jQuery tadi:<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js' type='text/javascript'/>
4. Cari kode<!-- Back To Top --> <script src='http://riky-rizkiyana.googlecode.com/files/back-to-top.js' type='text/javascript'/> <script type='text/javascript'> jQuery.fn.topLink = function(settings) { settings = jQuery.extend({ min: 1, fadeSpeed: 200 }, settings); return this.each(function() { var el = $(this); el.hide(); $(window).scroll(function() { if($(window).scrollTop() >= settings.min) { el.fadeIn(settings.fadeSpeed); } else { el.fadeOut(settings.fadeSpeed); } }); }); }; $(document).ready(function() { $('#top-link').topLink({ min: 300, fadeSpeed: 500 }); $('#top-link').click(function(e) { e.preventDefault(); $.scrollTo(0,300); }); }); </script> <!-- End Back To Top -->
<body> dan rubah menjadi <body id='top'>5. Masukan CSS dibawah sebelum kode
]]></b:skin>:6. Masukkan kode HTML berikut sebelum#top-link {display:none;font-weight:bold;font-family:tahoma;font-size:10px;width:70px;background:#000;color:#fff;text-shadow:1px 1px 1px #666;font-size:11px;position:fixed;right:-20px;bottom:150px;padding:5px;-moz-transform: rotate(90deg);-webkit-transform: rotate(90deg);-webkit-border-radius: 4px;-moz-border-radius: 4px; border-radius: 4px;}
</body>:7. Simpan template dan lihat hasilnya.<a class="no-click no-print" href="#top" id="top-link" rel="nofollow" title="Back to Top Page">Back To Top</a>
terima kasih om udah mau share...
beginilah indahnya berbagi )