Ariawijaya.com mengucapkan: "Selamat Tahun Baru 2010"

Membuat Shortcut Back to Top pada Blogspot

Oleh Victor | Nov. 07, 2009 | Blogging, Tutorial & Trik Blogspot

Seberapa panjang tulisan/artikel di blog kamu? Jika tulisan kita panjang tentu saat membaca kita akan melakukan scroll ke bawah sampe selesai, nah ketika sampai batas bawah tulisan dan ingin kembali ke atas tentunya kita harus scroll balik ke atas. Semakin panjang tulisan, semakin lama juga untuk kembali ke awal (atas).

Untuk membantu mempermudah langkah kita untuk kembali ke awal tulisan (bagian atas blog), berikut ada trik sederhana, yaitu dengan membuat shortcut Back to Top (Kembali ke atas). Dengan adanya shortcut ini tentunya kita tidak perlu lagi melakukan scroll balik ke atas, tapi cukup dengan mengklik shortcut Back to Top maka kita akan langsung dibawa kembali ke atas. Buat temen-temen yang belum tau cara membuat shortcut ini, berikut saya informasikan langkah-langkah pembuatan shortcut Back to Top untuk melengkapi tulisan tentang trik Blogspot lainnya seperti Read More, Related Articles dengan thumbnail, Marquee, dan trik lainnya.

Ada dua cara yang bisa ditempuh untuk membuat shortcut ini, cara pertama dengan memasang script pada menu Edit Html dan cara kedua memasang script di Gadget (Widget).

Cara pertama, kita masuk ke menu Layout kemudian Edit Html, tandai Expand Widget Template.

Masukkan script di bawah ini di salah satu bagian script tersebut (bebas peletakkannya bisa dibawah < head >, sebelum < /head >, dibawah < body >, atau sebelum < /body >. Dalam contoh ini saya meletakkan script di bawah < body >.

&amp;amp;lt;a href='#' style='display:scroll;position:fixed;bottom:5px;right:5px;' title='Back to Top'&amp;amp;gt;&amp;amp;lt;img src='http://img195.imageshack.us/img195/4669/backtotop.gif'/&amp;amp;gt;&amp;amp;lt;/a&amp;amp;gt;

Setelah itu simpan template tersebut.

Cara kedua, cara kedua ini relatif lebih mudah dibandingkan cara pertama, yaitu kita masuk ke sub tab menu Page Element (dalam tab menu Layout), tambahkan Gadget baru (bebas gadget bagian mana saja), pilih Gadget HTML/Javascript. Masukkan script yang sama dengan script cara pertama di atas dan simpan.

Setelah itu coba kembali ke halaman blogspot dan refresh, jika berhasil maka akan muncul ikon kecil di pojok kanan bawah. Coba scroll sampai bagian bawah tulisan, dan klik ikon tersebut, otomatis kita akan kembali ke atas.

Script yang kita gunakan di atas (contoh blog dapat dilihat di Finance Articles & Software) menggunakan ikon gambar sebagai shortcut-nya, ikon tersebut bisa kita ganti sesuai keinginan kita dengan mengganti alamat img src-nya dengan url tempat image yang akan kita pakai. Selain itu bisa juga kita ganti image tersebut dengan tulisan, seperti script di bawah ini.

&amp;amp;lt;a href='#' style='display:scroll;position:fixed;bottom:5px;right:5px;' title='Back to Top'&amp;amp;gt;&amp;amp;lt;strong&amp;amp;gt;Kembali ke Atas&amp;amp;lt;/strong&amp;amp;gt;&amp;amp;lt;/a&amp;amp;gt;

Dalam script di atas shortcut diganti dengan tulisan Kembali ke Atas, jika ingin tulisan lain tinggal ganti saja tulisan tersebut sesuai keinginan.

Itu tadi informasi singkat tentang pembuatan shortcut Back to Top pada Blogspot, selamat mencoba dan semoga bermanfaat.

Bookmark and Share

Tulisan terkait :
  1. Membuat Marquee Blogroll pada Blogspot
  2. Membuat Scrollbox pada Blogspot
  3. Membuat Daftar Isi atau Table Of Contents (TOC) pada Blogspot
  4. Membuat “Read more …” pada Blogspot
  5. Membuat Daftar Judul Arsip Tulisan dalam Blogspot
"Oh ya, Anda ingin belajar bikin web hanya dengan 4 langkah mudah? Saya rekomendasikan belajar di sini. Khusus pemula & langsung praktek online."

:, , , , , , ,

3 komentar:

3 Responses to “Membuat Shortcut Back to Top pada Blogspot”

  1. 1
    remo-xp Says:

    ada versi lain g sob?? yang ke atas nya, tp slow gerakan nya,,

  2. 2
    Victor Says:

    @ Remo,
    Untuk sementara belum ada versi lainnya, sambil jalan coba nanti aku cari informasi lebih lanjut, kalo udah dapet pasti aku buat tulisannya.

  3. 3
    Menyembunyikan dan Menampilkan Sebagian Konten Tulisan (Spoiler) dalam Blogspot | Trik Koneksi Internet dan Blogging | Ariawijaya.com Says:

    [...] Trik Membuat Shortcut Back to Top [...]

Leave a Reply


Join My Community at MyBloglog! Internet Blogs - BlogCatalog Blog Directory

Tag on Ariawijaya

3G Apple Application Axis bandwidth bandwidth monitor blog blogging Blogspot bluetooth Broom budaya C700 chat client Connection Keeper CA-53 CDMA Dial-Up DKU-2 DKU-5 DNS driver modem E61 E71 E90 eBuddy Facebook Firefox Fren Friendster Flash Unlimited Flexi G502 Google GSM Haier HotSpot GSM IM3 internet internet browser Jogja Jogjakarta K750i koneksi internet koneksi internet CDMA koneksi internet GSM kraton MacBook Pro MacOS X mempercepat internet MG880 Mobi Mobile-8 mobiles phone Modem Booster modem modem hape modem ponsel modem usb N2112 N2115 N2116 N2118 N2280 N2865 N3110c N3105 N3125 N3220 N3500c N3585 N6012 N6015 N6016i N6020 N6100 N6220 N6225 N6230 N6230i N6233 N6235 N6255 N6270 N6280 N6300 N6310 N6585 N6610 N6610i N70 N7250i N82 N8250 N8800 Nimbuzz Nokia Nokia Connectivity Cable Driver Nokia PC Suite Opera Opera Mini optimasi koneksi internet optimalisasi modem packet loss pingtest sejarah Smart smartphone SEO Sony Ericsson Starone Symbian tarif internet TCP Telkomsel traffic Three trik Blogspot trik koneksi internet trik Wordpress WIFI wisata Wordpress XL Yahoo Yogya Yogyakarta Z520i Z550i ZTE

Creative Commons License
Ariawijaya.com by Victor Aria Wijaya is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License.
Based on a work at Ariawijaya.com.
Permissions beyond the scope of this license may be available at http://ariawijaya.com/about/.