Iklan 300 x 250

Random Post

Recent Post

 

Membuat Back To Top Dengan Sentuhan jQuery

Text Resizer: Click for Resizer
Back To Top jika diterjemahkan secara bebas berarti gulung atau geser ke atas. Sebenarnya kita bisa saja menggulung halaman blog keatas melalui scroll bar pada browser yang biasanya terletak disebelah sisi kanan halaman blog. Tetapi jika halaman blog/artikel tersebut panjang maka ini cukup merepotkan pembaca blog kita ketika mereka ingin kembali ke bagian atas halaman, dengan tambahan fasilitas Statis Back to Top membuat proses scroll menjadi mudah, pembaca blog cukup dengan meng-klik satu kali tombol scroll yang selalu dalam posisi tetap (statis) maka halaman akan di geser/di gulung keatas dengan kecepatan yang berbeda-beda.



Pada kesempatan kali ini saya akan share ilmu tentang Membuat Back To Top Dengan Sentuhan jQuery. Contoh dari Back To  Top sama seperti punya saya.Bagaimana Anda tertarik untuk membuatnya???

  • Untuk membuatnya seperti biasa log in dulu ke account blog anda.
  • Masuk ke Rancangan Kemudian pilih Edit HTML
  • Jangan lupa centang "Expand Template Widget"
  • Setelah itu Cari kode berikut ini ]]></b:skin> setelah ketemu masukkan kode dibawah ini diatasnya

#kaluhur{
right:20px;
bottom:20px;
position: fixed;
}

  • Cari kode ini </head> setelah itu Copy paste kode di bawah ini di atasnya

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
$('a[href*=#luhur]').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}, 1000);
return false;
}
}
});
});
//]]>
</script>

  • Masih belum selesai kawan kemudian cari kode <body> ganti dengan <body id="luhur">
  • Cari lagi kode </body> dan copy paste kode di bawah ini di atasnya

<div id='kaluhur'>
<a href='#luhur' title='Luhur'><img src='http://lh6.ggpht.com/_xcD4JK_dIjU/S4QCfI_V6LI/AAAAAAAAD1A/JK107RTwhiw/d/kaluhur.gif'/></a>
</div>

  • Langkah terakhir Simpan template
  • Selesai Dech

Source : http://modification-blog.blogspot.com/


Artikel Terkait:

Nobi Noku Ditulis oleh : Arga Anggriawan | BLOG : This Is My Art
Dalam Judul : Membuat Back To Top Dengan Sentuhan jQuery
Dalam Kategori :
Saya hanyalah blogger pemula yang ingin belajar dan berbagi dengan sahabat, Semua artikel blog ini bersumber dari pengalaman saya dari dunia blogger.

3 komentar:

Ferdys mengatakan... Reply Comment

:a: mencoa smile icon... hehehe gimana si caranya?????

sibutiz mengatakan... Reply Comment

:c: keren nich gan.....

berfungsi dengan baik sob :y:

:a: :b: :c: :d: :e: :f: :g: :h: :i: :j: :k: :l: :m: :n: :o: :p: :q: :r: :s: :t: :u: :v: :w: :x: :y: :z:

Poskan Komentar

Bagi sobat-sobat silahkan comment disini, Insya Allah saya comment balik di blog anda.Blog ini Blog Do Follow,Trims atas kerja samanya

 
 
 

Temukan Kami Dalam FB

Sahabat Blogger

http://nobinoku.blogspot.com/

Tukeran Link Yuk..!! Silahkan copy kode di atas..!!
Saya akan segera link balik..!! Link & Banner Teman
powered by PRBbutton Powered by  MyPagerank.Net backlink Site Meter http://www.wikio.com Free Automatic Backlink
Check Google Page Rank
Cerita Seks Panas Dewasa 17Tahun
free counters
 
Copyright 2010 - 2011 © This Is My Art | Didukung Oleh : Blogger
Template Name : Evolution Magazine Template | Modification by : Argabluesky