Facebook

Senin, 13 Juni 2011

Membuat Scroll Back to Top,Skip to Content dan Bottom Jquery

send email
print this page

Udah tidak usah pake basa-basi nih saya akan kasih tutorialnya tentang
 Membuat Scroll Back to Top,Skip to Content dan Bottom Jquery
Ikuti langkah dibawah ini dengan benar.
Pertama
  • Login Blogger, Rancangan ,Edit HTML
  • Cari kode </head> ,kalo sudah dapat taruh kode di bawah ini diatas kode </head>



<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/> <!-- jika di template anda sudah terdapat script jQuery 1.3.2, maka anda tidak perlu lagi menambahkan kode ini -->
<script type='text/javascript'>
$(function(){
$('a[href*=#main], a[href*=#], a[href*=#bottom]').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
&& location.hostname == this.hostname) {
var $target = $(this.hash);
$target = $target.length && $target || $('[name=' + this.hash.slice(1) +']');
if ($target.length) {
var targetOffset = $target.offset().top;
$('html,body').animate({scrollTop: targetOffset}, 2000);
return false;
}
}
});
});
</script>
  • kalo sudah cari kode </body> ,lalu taruh kode di bawah ini di atas kode </body>







<a href='#' title='go to top' style='position: fixed; right: 0; bottom: 15px; outline: medium none;'>
<img src='http://th613.photobucket.com/albums/tt211/iscanderro/th_up_arrow.png'/>
</a></div>
<div id='gotop'>
Yang di atas untuk back to top.anda bisa memodifikasi gambarnya... atau bisa juga di taruh di atas footer column seperti punya saya. atau terserah anda.
  • truss ini untuk scroll skip to content, klik tambah gadget lalu letakkan kode di bawah ini di mana saja, terserah anda. 


<div id='gotop'>
<a href='#main' title='go to content' style='padding:0'>
Skip to Content
</a></div>
Anda bisa memodifikasi kode skip to content di atas, atau anda ingin menambahkan gambar?? anda hanya perlu menambahkan kode "<img src='url image anda'/>" atau mengganti tulisan "Skip to Content", dan anda juga bisa menaruhnya di header blog anda.
  • nah ini untuk scroll skip to bottom, cari kode< /body> lalu taruh kode di bawah ini di atas kode </body>



<div id='gotop'>
<a href='#bottom' title='go to bottom' style='position: fixed; right: 25px; bottom: 15px; outline: medium none;'>
<img src='http://i1082.photobucket.com/albums/j379/thescape1/th_up_arrow.png'/>
</a></div>
Jadi nanti struktur HTML nya jadi seperti ini 

Ditulis Oleh : yomaricoy17 Hari: 22.25 Kategori:

0 comments:

Posting Komentar

 

Bloggrol

Exchange Link

Widget

http://2.bp.blogspot.com/_W4BgN_rLRKo/TTcjl6RB-LI/AAAAAAAAAGs/BHVPUTPgikA/s1600/image_ad.jpg