Wednesday, May 11, 2011

Membuat Back To Top ( kembali keatas) Dengan Smoothscroll jQuery pada blog

Back To Top merupakan sebuah aplikasi tambahan (widget/plugin) untuk ditempatkan di dalam sebuah blog dan sepertinya saat ini memang sudah tidak asing lagi di telinga kita dan mungkin saja kita sendiri sudah sering menjumpai widget Back To Top ini.

Kali ini saya ingin share kepada teman-teman semua tentang bagaimana Membuat Back To Top Dengan Smoothscroll jQuery, sedikit berbeda memang dengan cara memuat Back To Top yang biasanya kita jumpai (tanpa edit HTML).

Fungsi:

Memudahkan kita khususnya para pengunjung blog untuk kembali ke halaman atas, jadi kita tidak perlu men-scroll secara manual menggunakan mouse untuk kembali keatas, cukup dengan mengklik tulisan "Back To Top".


Buat teman-teman yang ingin membuatnya silahkan ikuti langkah-langkah di bawah ini:


1. Login akun blogspot,

2. Klik Design/Rancangan >> Edit HTML >> klik Expand Templates Widget,

3. Cari kode berikut: </head> lalu copy kan script jQuery di bawah ini persis berada di atas kode tadi:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js' type='text/javascript'/>

4. Lalu lanjutkan dengan menaruh kode javascript di bawah ini persis di bawah script jQuery tadi:

<!-- Back To Top -->
<script src='https://sites.google.com/site/anggasonaanotherbestblog/javascript/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 -->

5. Terus cari kode <body> dan gantikan dengan <body id='top'>


6. Lanjutkan dengan mencari kode ]]></b:skin> dan masukkan kode CSS di bawah ini di atas kode ]]></b:skin>


#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;}

7. Terus cari kode </body> dan masukkan kode HTML di bawah ini persis ada di atas kode </body>


<a class="no-click no-print" href="#top" id="top-link" rel="nofollow" title="Back to Top Page">Back To Top</a>

8. Jika sudah dikerjakan dengan benar, maka klik Save Templates.


Note:


1. Apabila sudah ada Script jquery di dalam blog maka script jQuery di atas tidak usah di masukkan (biar tidak double), lanjutkan saja dengan langkah selanjutnya,

2. Untuk merubah warna, posisi dan tulisan cek di di bagian tulisan yang saya beri warna HIJAU.


Referensi:

- Deconstructioncode [http://deconstructioncode.blogspot.com/2009/04/back-to-top-dengan-smoothscroll-jquery.html]- David Walsh Blog [http://davidwalsh.name/jquery-top-link]- Riky Rizkiyana [http://www.rikyrizkiyana.co.cc/2010/05/cara-membuat-back-to-top-menggunakan.html]

Seperti itulah
Cara Membuat Back To Top Dengan Smoothscroll jQuery, semoga bisa teman-teman coba di blognya dan bisa bermanfaat. Salam.

sumber:http://anggasona-anotherbestblog.blogspot.com/2010/08/membuat-back-to-top-dengan-smoothscroll.html

1 comment:

  1. terima kasih tips nyah saya berhasil
    kunjung balik ya ke blog x-file-mistery.blogspot.com

    ReplyDelete

Category

17 + (27) Ada - ada aja (8) Ada ada aja (1) Adidas (1) Adsense (7) Affiliate (1) Aktris (1) Alam kita (3) Alexa (2) Alexandra (1) Alias (1) Amazon (2) Anak (12) Anastasya (1) Andika (1) Android (2) Anggota (1) Angle Tattoos (1) Antivirus (8) Antivirus Terbaru (8) Apple (2) Apps untuk pelajar/mahasiswa (1) Ariel Peterpan (1) Arifinto (2) Artikel Menarik (21) Artis (1) Artis Indonesia (3) Artis manca (1) Astronomi (1) Auliani (1) Avatar berbicara (1) Bajak Laut (1) Bandung (1) BB++ (3) Belanja (1) berita (1) Berita Aneh (6) Berita Artis (6) Berita Astronomi (2) Berita Dalam negri (2) Berita Dunia (4) Berita Hewan (15) Berita Internasional (2) Berita Kesehatan (7) Berita Makanan Minuman (14) Berita Olahraga (8) Berita Panas (1) Berita Pendidikan (1) Berita Pengetahuan (2) Berita Renungan (5) Berita Sejarah (6) Berita Selebriti (1) Berita Teknologi (2) Berita Tentang Musik (2) Berita Tumbuhan (1) Berita unik (4) Berita Utama (2) Bieber (1) Bintang (1) Biografi (1) Bisnis (2) BlackBerry (7) Blog (49) Blogger (23) Brondong (1) Browser (1) Buah Unik (3) Budaya Aneh (1) Bugil (1) Cantik (1) Cara Bisnis Online (2) Cara daftar Facebook (1) Cara Recovery Data (2) Cara Self Test Printer (5) Cara Service Komputer (25) Cara Service Laptop (8) Cara Service Monitor (34) Cara Service Ponsel (3) Cara Service Printer (63) Cara Service TV (5) Cara Service UPS (1) Cari $ (16) Celebrity (3) Chrome (2) Clicksor (3) Contoh (1) Coppas Animal (1) Coppas Berita (5) Coppas Extreme (3) Coppas Foto Hot (3) Coppas Lucu (1) Coppas Mistery (1) Coppas Sejarah (1) Coppas Style (2) Coppas Unik (1) Cukur (1) Cute (5) Definisi dan Sejarah Tattoo (3) Dicukur (1) Dipanggil (1) disappear (1) Domain-Hosting (2) Download (4) Download MP3 Gratis (1) Download Software (21) Downloader (1) Dugaan (1) Dugem (1) Dunia (1) Dunia Alam (6) Dunia aneh (5) Dunia Arkeologi (1) Dunia Arkeologi dan Sejarah (1) Dunia Design (3) Dunia Ekonomi (3) Dunia Extream (3) Dunia informasi (6) Dunia Kriminal (2) Dunia Kuliner (3) Dunia Medis (4) Dunia Militer (2) Dunia Misteri (1) Dunia Pendidikan (1) Dunia Rohani (1) Dunia Sejarah (1) Dunia Sosial (7) Dunia Teknologi (6) Dunia Tips Dan Trick (1) Dunia Wanita (2) e-learning (1) Elizabeth (1) email (3) Excel (11) Facebook (8) Fakta Aneh (16) Fakta Dunia (8) Fakta Indonesia (13) Fakta Unik (68) Feed (1) Fenomena unik (1) Firefox (4) Flash (2) Football (1) Foto (2) Foto Hot (7) Freeware (24) Friendster (1) Funny (1) Funny Pics (15) Gadget (1) Gadget dan Hanphone (2) Gambar Aneh (1) Gambar Extream (4) Gambar Lucu (1) Gambar Unik (4) Game (1) Games (6) Gathan (1) Genit (4) Githa (1) Gmail (1) Google (28) Gosip (2) Gossip Celeb (4) Gratis (1) Gumilang (1) Handphone (3) hardisk (1) Health (3) Hilabi (1) Hollywood (1) Honda (1) Hot (2) Hot Girls (1) Hot News (25) Hot Pics (11) HP (1) HTC (5) html (3) Indonesia (2) info (11) Info Harga (1) Info Menarik (24) Internasional (1) Internet (19) IP Address (1) iPone (1) Istilah Komputer (1) Jadwal Piala Dunia 2010 (2) Jadwal Puasa (1) Jadwal Sholat (1) Japan (1) Jelita (1) Jennifer (1) Jepang (1) Joanne (1) Justin (1) Karena (1) Karier dan Gaya Hidup (1) kartu Natal (1) Katanya ... (5) Kate Middleton (2) Keajaiban Alam (3) Kebesaran Allah (1) Kecantikan (1) Kecantikan Dan Kesehatan (3) Kejadian Aneh (3) Kekayaan (1) Keramas (1) Keren (7) Kesehatan (5) Kisah Mistis (1) Koleksi (1) Komputer (12) Komputer dan Internet (5) Kontes Aneh (3) Kreatifitas (6) Kuliner (1) Kurniawan (1) Lady Gaga (1) Lain-Lain (2) Legenda (1) Lenovo (1) LG (2) Lifestyle (3) link (4) Link Friends (1) Lintas Indonesia (3) Lirik Lagu (1) Lorenza (1) Makan (1) Malinda (3) Maling (1) Maling ATM (2) Marcia (1) Meninggal (1) meta tag (2) Miliar (1) Military (1) Misteri (10) Misteri - Misteri Di Dunia (3) Miyabi (1) Mobil (30) Model (13) Modem ADSL (1) Monetize (16) Motivasi Dan Inspirasi (1) Motorola (1) mp3 (1) Musik (2) Nadine (1) Nafeeza (1) Nakal (4) Narkoba (1) Netbook (2) News (54) Nokia (1) Nonton (1) office 2010 (1) Oktaviany (1) Olahraga (1) Online (1) online ticket (1) Operasi (1) Otomotif (2) Paid Survey (2) paidreview (2) Panas (1) Panduan Service Monitor I (10) Panduan Service Monitor II (13) Parse (1) Payment (1) Paypal (1) PDF (4) Pengetahuan (4) Pengetahuan Umum (4) Pengingat Sholat (1) Pengolah Gambar (1) Photo (1) Piala Dunia 2010 (2) Ping (1) Plastik (1) Plug-in Wordpress (13) Polisi (1) Ponsel (10) Porno (1) Portable (2) POS UNAS SD-SMP-SMA 2010 (1) Powerpoint (2) Prediksi 2010 (1) Presenter (1) Pria (1) Printer (1) Produk (1) Produk Unik (10) Profil Artis (7) Profil Tokoh (5) Profile (1) Psikotes (1) Putri (1) Rahmat (1) Read more (1) Rehab (1) Rekor Dunia (30) related post. tips (3) Resetter Canon (26) Resetter Epson (18) Resetter HP (5) RSS (2) Sains Dan Antariksa (4) Salley (1) Samsung (9) Science (1) Sebagai (1) Sebelum (1) Sedang (1) Sejarah (3) Sejarah Dunia (1) Sekedar Share (11) sekilas info (2) Seksi (1) Seksiologi (2) Selebritis (1) Selesai (1) Seni Dan Budaya (1) Senjata (1) SEO (14) Sepeda (1) Sesudah (1) Setelah (1) Sexsualitas (1) Sexy (10) Shaleh (1) Sheila (1) Sistem Tools (1) sms lebaran (2) Software (22) Software HP (5) Softwere (8) Speedy (1) Sport (1) Statistik (1) Suami (2) Sulityo (1) Suster (1) Syahrini (1) Tahukah anda? (60) Tatto Bahu (1) Tattoo Badan (4) Tattoo China (1) Tattoo Dolphin (1) Tattoo Hewan (2) Tattoo Ikan Koi (1) Tattoo Jepang (1) Tattoo Kanji (1) Tattoo Lebah (1) Tattoo Lengan (2) Tattoo Malaikat (1) Tattoo Serangga (1) Tattoo Tengkorak (1) Tattoo Tribal (2) Tattoo Wanita (2) Taylor (1) Teknologi (2) Telanjang (1) Telkom Promo (1) Template (3) Tempo Dulu (1) Tercantik (1) Terima (1) Tip Trik Internet (8) Tip Trik Windows (7) tips (166) Tips and Trik (10) Tips Blog (1) Tips Cinta (1) Tips Dan Info (6) Tips Dan trick (5) Tips Dan Trik (3) Tips Diet (1) Tips Kecantikan (1) Tips Kesehatan (9) Tips Suami Istri (5) Tools (8) Topless (1) Tragedi (1) Translator (4) Tribal Tattoos (3) Tsunami (1) Tukang (1) Tumbuhan (1) Twiter (3) Uncategorized (2) Unik (4) Unik Dan Aneh (7) Update Antivirus (8) Upskrit (1) Usaha (1) Utility (1) Video (1) Video Extream (1) Video mesum (4) virus (3) Wakaka (2) Wanita (1) Warta Terkini (9) Warteg (1) Widget (2) windows (26) windows 7 (3) WP (1) Ziddu (7) ZTE (1)