Membuat tombol Back to Top Dengan Fix Image di Blogspot
Tidak disangka memang 4 gambar kecil-kecil yang selalu ada dipojok kanan bawah pada blog saya ini ternyata menarik minat banyak orang. Memang empat gambar kecil itu bukan hanya sebagai penghias blog saja tetapi mereka mempunyai perannya masing-masing seperti Reload Page, back to homepage, Menuju Halaman atas, dan Menuju Halaman Bawah. Empat fungsi sederhana itu ternyata sangat membantu bagi sebagian orang dalam mencari informasi dengan lebih cepat dan yang paling terpenting yaitu para pengunjung tidak merasa terganggu dengan adanya gambar tersebut.
Perlu diingat memang saat ingin memasang fix image pada blog, kita harus lebih memperhatikan antara keindahan dan kenyamanan. Karena saya sering sekali melihat blog-blog yang memasang banyak sekali fix image dengan ukuran yang sangat besar sehingga sedikit mengganggu dan memberatkan load blog. Sudah mengerti tentang resiko memasang fix image sekarang kita langsung menuju langkah selanjutnya yaitu cara memasang tombol back to top dengan fix image.
- Login ke blogger.com
- Klik Layout >> Edit HTML
- Cari kode ]]></b:skin> lalu pastekan code dibawah ini sebelum kode ]]></b:skin>
/* ——- code by www.ebenk789.co.cc ——- */
#mininavbar
{
display:scroll;
position:fixed;
bottom:1px;
right:1px;
z-index:99;
}
#mininavbar a
{
filter:alpha(opacity=65);
-moz-opacity:0.65;
opacity:0.65;
border:0;
}
#mininavbar img
{
border:0;
}
#mininavbar a:hover
{
filter:alpha(opacity=100);
-moz-opacity:1;
opacity:1;
} - Sekarang kita Cari lagi kode <head> lalu letakan kode dibawah ini juga setelah kode <head>
<div id=’mininavbar’><a href=’#’ onClick=’window.location.reload()’ title=’Reload page’><img src=’http://soulouko.googlepages.com/refresh.png’/></a><a href=’http://www.ebenk789.co.cc/‘ title=’Home Page’><img src=’http://soulouko.googlepages.com/house.png’/></a><a href=’#’ title=’Ke Atas Halaman’><img src=’http://soulouko.googlepages.com/topopg.png’/></a><a href=’#bawah‘ title=’Ke bawah halaman’><img src=’http://soulouko.googlepages.com/down.png’/></a></div>
Ket: Url yang berwarna merah kamu ganti dengan Url Homepage blog kamu
Pekerjaan kita belum selesai sampai disini karena ada salah satu tombol yang belum dapat berjalan yaitu tombol Back to Down. Biasanya setiap template pada bagian paling bawahnya selalu ada keterangan “Copyright by … “ Nah untuk itu kita tambahkan beberapa code tadi menjadi seperti ini
<a name=”bawah”>Copyright</a>
Selesai semua,, sekarang kita klik save template. Nah sekarang coba lihat apakah semua tombol dapat berjalan baik atau tidak hehe..
