Langsung ke konten utama

Membuat Fitur/Tombol Back To Top di Blog

membuat tombol/fitur back to top/kembali ke atas blogger-blogspot
Back to Top Button atau Tombol Kembali ke Atas adalah fitur blog yang mempermudah pengunjung/visitor blog kembali ke bagian atas halaman dengan sekali klik tanpa melakukan mouse scrolling. Efeknya sangat besar sekali terutama bagi blog yang memiliki halaman panjang. Letak dari tombol fitur back to top kali ini ada di bagian footer sebelah kanan.

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/AVvXsEjQHoX1NSjjxz6V5nrAQ4D9yS5RQHhZzHFZ7IDWnEHwsr4gZwUfJCc4H6ECIuWtyoqysl1CVltMqFHDoNLneWNpL9DAfVcZRfqmQn-11ATQZJvGwlUBgGD8ulBSbTlsWUiroWwmYfLOwuPh/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.

Sumber : DI SINI

Komentar

Posting Komentar

Postingan populer dari blog ini

Cara Membuat Bootable CD/DVD Windows XP Dari File .iso

Kali ini saya akan sedikit share cara membuat Bootable CD/DVD Windows XP. dari pada beli copy'an CD yang bajakan lebih baik bikin sendiri dengan file original Windows XP sp3 langkah awal pembuatan Bootable CD/DVD Windows XP sobat mesti download dulu file .iso windows XP sp3 original nya. Download: Windows XP sp3 Original.iso berikutnya download software nero untuk pembakaran CD/DVD Download: Nero 6 Ultra Edition Full Edition [Lebih Ringan] Cara Membuat Bootable CD/DVD Windows XP Dari File .iso Dengan Nero 6 Ultra Edition Setelah kedua file di download extract Windows XP di data master, nanti yang akan di burning file windows xp.iso yang berada di file .rar .. Perlengkapan - Komputer / Laptop yang sudah di lengkapi CDroom atau DVDroom Cara Burning 1. Install Nero 6 Ultra Edition 2. Masukan CD/DVD Blank [Yang masih kosong] 3. Jalankan program tersebut, pilih menu Nero Express 4. Kemudian pilih Disc Image or Saved Project 5. Browser dan cari file ....
1 komentar
Baca selengkapnya

Tutorial PHP dan MySQL: Membuat Aplikasi CRUD [Studi Kasus Pendaftaran Siswa Baru]

PHP sering dijodohkan dengan MySQL untuk membangun aplikasi web. MySQL berperan sebagai tempat menyimpan data (basis data) sedangkan PHP adalah program yang mengelola data tersebut. Sebenarnya PHP tidak hanya bisa dijodohkan dengan MySQL saja. PHP juga bisa dijodohkan dengan SQLite, PostgreSQL, MongoDB, Ms. Access, dsb. Pada kesempatan ini, kita akan belajar menggunakan PHP dan MySQL untuk membuat aplikasi sederhana. Bagaimana PHP dan MySQL dihubungkan? PHP dan MySQL dapat saling berhubungan melalui perantara API (Application Programming Interface) . Ada tiga jenis API MySQL yang disediakan di PHP: mysql  API ini sudah tidak didukung/dikembangkan lagi (kadalwarsa). mysqli   (mysql improvement)  peningkatan dari API  mysql PDO  (PHP Data Object) API yang pertama sudah tidak didukung lagi sejak PHP versi 5.5.x dan digantikan dengan  mysqli  yang lebih canggih. Karena mysqli  dapat digunakan secara  OOP  dan prosedural. ...
Posting Komentar
Baca selengkapnya

Dasar Desain Grafis (Prinsip-Prinsip Tata Letak)

Menata prinsip-prinsip tata letak secara elekronik antara lain : proposi, irama (rythem), keseimbangan, kontras, kesatuan (unity) dan harmoni.  Layout didalam bahasa memiliki arti tata letak. Sedangkan menurut istilah, layout merupakan usaha untuk menyusun, menata, atau memadukan elemenelemen atau unsur-unsur komunikasi grafis (teks, gambar, tabel dll) menjadikan komunikasi visual yang komunikatif, estetik dan menarik. Di sini diperlukan pertimbangan ketika sedang mendesain suatu infomasi yang seefektif mungkin. Tujuan utama layout adalah menampilkan elemen gambar dan teks agar menjadi komunikatif dalam sebuah cara yang dapat memudahkan pembaca menerima informasi yang disajikan. Dalam teori tataletak dibagi menjadi tiga tahapan, yaitu:  membuat tataletak miniatur/sketsa mini (thumbnail) yaitu tahapan perancangan dalam menentukan komposisi unsur-unsur yang akan di tempatkan. visualisasinya masih berupa seketsa kolom teks dan kolom gambar.  membuat tata...
Posting Komentar
Baca selengkapnya