Cara Membuat Tombol Go To Top atau kembali ke atas di Blogger

 tombol back to top atau go to top merupakan tombol yang dapat mempermudah pengunjung yang sedang mampir ke blog atau web anda. dengan adanya tombol ini. kita tidak perlu susah2 untuk kembali ke atas dengan terlalu lama menscrol mouse. tapi dengan menekan tombol yang telah disediakan ini secara otomatis akan langsung menggulung keatas.

Cara menambahkan fitur 'Back To Top' untuk Blogger-Blogspot:

1. Masuk ke edit HTML.

2. Cari kode tag </body> (Ctrl+F)

3. Masukkan kode berikut di atas </body>:

<a href='#' style='position: fixed; right: 15px; bottom: 15px; outline: medium none; border: 0px none;' title='Back to Top'><img alt='Back to Top' border='0'src='alamat url gambar Back to Top-mu'/></a>

Ganti title Back to Top dengan kata-kata yang disuka, misalnya 'return to top', 'kembali ke atas', 'balik ke atas', 'meluncur ke atas', 'balikan nyook', atau 'kembali ke laptop'... terserahlah, suka-suka elo... ^_^ Fungsinya untuk notifikasi ke pengunjung tentang kegunaan tombol tersebut.

Alt Back to TOP lebih baik ditinggalkan begitu saja kalo-kalo gambar gagal dimuat browser jadi tulisan itu masih nongol sebagai pengganti.

Gunakan gambar berikut, klik kanan copy (save as), trus upload dan host sendiri ya gambarnya, biar gak lelet and pengunjung gak melet-melet!

Atau Googling (cari juga di photobucket.com) gambar 'back to top/kembali ke atas' sendiri yang lebih keren dan sesuai dengan warna dan ukuran footer blog-mu, gunakan keyword "back to top button image", kemudian upload dan host gambar itu.

Ambil/copy direct link gambar dan ganti alamat url gambar Back to Top-mu dengan alamat url/link tersebut. Contoh:

<a href='#' style='position: fixed; right: 15px; bottom: 15px; outline: medium none; border: 0px none;' title='Back to Top'><img alt='Back to Top' border='0'src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilmdz2p20eV94n9BfESPng9Pd3aqCFtInvlCWLwyZdEo-g_PVQxfduRUJ_FH8UDok_p7kWiIXRB1iK_S7mEZaCDJ_67LGmT5jUhYcCh15VC6x7hKtrlwlv2GyOwiKK5VajHG94r1JPnxff/s1600/bttp-4.png'/></a>

Oke, udah? Belum? Buruan lah!

4. Kalau sudah dimasukkan semuanya dan pastikan tidak ada yang terlewat, save template HTML-nya.

5. Done! Fitur/Button Back To Top siap digunakan.

monggo dicoba gan!

ARTIKEL TERKAIT:

tips blog

• Cara Membuat Efek Glow pada Teks atau Link Blogger
• Cara Membuat Div Styles dan Macam-Macamnya
• Cara Membuat Tombol di Blogspot dan Wordpress
• CARA MEMBUAT HIDDEN CHAT BOX
• Memberi Komentar di HTML
• Cara Edit HTML dan Expand Widget Templates Terbaru 2014
• Cara Membuat Artikel Terkait (Related Post) Di Bawah Setiap Postingan/Artikel
• CARA MENGATASI LINK BLOG YANG DICEKAL OLEH ROBOTS.TXT PADA GOOGLE
• CARA MENAMBAHKAN VIDEO YOUTUBE PADA BLOG
• CARA MEMBUAT BURUNG TWITTER BETERBANGAN DI BLOG
• Cara Membuat Gambar Batman Berjalan di Sudut Halaman Blog
• Cara Mengganti Background Blog dengan Sambaran Petir
• Cara Membuat Efek Lipatan Kertas pada Pojokan Blog
• 10 Situs Download Gambar Untuk Blog & Desain
• Cara Mengganti Kursor atau Mouse pada Blog
• Cara Memproteksi Postingan Agar Tidak Bisa di Copy-Paste
• Cara dasar membuat Link secara manual
• Cara membuat Dropdown menu
• Cara Menambah Ikon Status Off/Online Yahoo Messenger
• Senilai Berapakah Harga Blog Kamu?
• Cara Membuat Menu Secara Horizontal
• Cara Mengganti Navigasi "Older Post" atau "Newer Post" Menjadi Berbentuk Angka
• Cara Membuat Shoutbox atau Chat Box pada Blogspot
• cara memasang translator:google translate pada blogspot

tombol back to top

tombol go to top