Membuat Tombol Back To Top Pada Blog

Salam sobat semua. Kita jumpa lagi ni... Kali ini kita akan belajar bareng untuk membuat button/tombol/icon back to top pada blog. Sesuai dengan judulnya membuat tombol atau button back to top, ini berarti kita akan membuat tombol yang digunakan untuk membantu pengunjung blog kita agar mudah kembali ke halaman atas page kita. Sehingga pengunjung blog lebih mudah kembali ke halaman atas page tanpa melakukan scrol mouse. Biasanya tombol ini berada di bagian bawah halaman dan kebanyakan dibagian pojok halaman bawah.
Untuk membuat Tombol back to top ini kalian hanya perlu menambahkan kode berikut Sebelum kode </body>

<!-- Bact to top By aftanet -->
<a href='#' style='display:scroll;position:fixed;bottom:5px;right:5px;' title='Back to Top'><img src='http://i580.photobucket.com/albums/ss248/z33s/topopg.png'/></a>

Agar lebih mudahnya, berikut ini tahapan yang harus dilakukan untuk membuatnya:
1. Silahkan login seperti biasa di blog sobat.
2. Pilih Rancangan
3. EDIT HTML ( Centang Expand Template Widget )
4. Cari Kode </body> ( Untuk lebih cepat mencari gunakan Ctrl+F )
5. Simpan kode berikut Sebelum atau diatas kode </body>

<!-- Bact to top By aftanet -->
<a href='#' style='display:scroll;position:fixed;bottom:5px;right:5px;' title='Back to Top'><img src='http://i580.photobucket.com/albums/ss248/z33s/topopg.png'/></a>

NB”
>>Kode yang berwarna merah adalah posisi tombol berada.
>>Kode berwarna biru adalah URL gambar Tombol ( jika kurang menarik silahkan ganti dengan URL gambar sobat sendiri )

6. Jika sudah yakin, silahkan simpan template.

Tombol back to top diatas hanya tombol back to top biasa, jika sobat semua mau yang lebih komplit, kita bisa pake cara kedua dibawah ini :

Tahap - tahapnya sama dengan yang diatas, cuma sekarang sobat harus menambahkan kode CSS sebelum kode ]]></b:skin>, Berikut penjelasannya :
Pertama cari kode ]]></b:skin> lalu simpan CSS berikut sebelum atau diatasnya.

#Kaluhur{display:scroll;position:fixed;bottom:1px;right:1px;z-index:99}
#Kaluhur a{filter:alpha(opacity=65);-moz-opacity:0.65;opacity:0.65;border:0}
#Kaluhur img{border:0}
#Kaluhur a:hover{filter:alpha(opacity=100);-moz-opacity:1;opacity:1}

Kedua silahkan sobat simpan kode berikut ini Setelah atau dibawah kode <body>

<div id='Kaluhur'>
<a href='#' onClick='window.location.reload()' title='Reload page'>
<img src='http://i580.photobucket.com/albums/ss248/z33s/refresh.png'/></a>
<a expr:href='data:blog.homepageUrl'><img src='http://i580.photobucket.com/albums/ss248/z33s/house.png'/></a>
<a href='#' title='Ke Atas Halaman'><img src='http://i580.photobucket.com/albums/ss248/z33s/topopg.png'/></a>
<a href='#footbar' title='Ke bawah halaman'>
<img src='http://i580.photobucket.com/albums/ss248/z33s/down.png'/></a>
</div>

NB:
>>Warna Biru MERUPAKAN gambar untuk tombolnya.
>>Warna merah adalah posisi tombol.
>>Untuk kode #footbar silahkan sobat ganti dengan #footer atau #copyright sesuaikan dengan HTML pada template sobat.

Dan yang terakhir silahkan simpan template sobat. Kemudian lihat hasilnya.
Semoga berhasil sobat n bermanfaat...@_*

7 komentar:

  1. Yarian Gates2 Sep 2011, 15.35.00

    untuk yang footer kok gak bisa turun ya??gimana Aku ganti #copyright juga g bisa ke bawah

    BalasHapus
  2. Afta Ramadhan Zayn28 Okt 2011, 10.07.00

    wah...masak g bsa sob...mungkin mash ada langkah yg kliru

    BalasHapus
  3. Aplikasi Hp dan Komputer18 Nov 2011, 22.43.00

    Mantab neh

    BalasHapus
  4. Afta Ramadhan Zayn22 Des 2011, 19.29.00

    thanks sob...@_*

    BalasHapus
  5. Bey Country3 Nov 2012, 23.41.00

    makasih gan infonya langsung saya coba dan berhasil...
    kalau lagi iseng pengen nyanyi2 bisa berkunjung ke blog saya...
    http://blog-lirik.blogspot.com/

    BalasHapus
  6. Sony Surahman23 Des 2013, 01.25.00

    work gan thanks
    kunjungi ya
    http://traineeanonymous.blogspot.com/

    BalasHapus
  7. Afta Ramadhan Zayn20 Jul 2014, 04.54.00

    sama-sama..trimakasih kunjungannya

    BalasHapus

Langganan: Posting Komentar (Atom)