Welcome To My Blog

Sabtu, 12 November 2011

Membuat Tombol Back to Top Dengan Fix Image Di Blogg

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.

  1. Login ke blogger.com
  2. Klik Layout >> Edit HTML
  3. Cari kode ]]></b:skin> lalu pastekan code dibawah ini sebelum kode ]]></b:skin>
    view sourceprint?
    01/* ------- code by www.ebenk789.co.cc ------- */
    02#mininavbar
    03{
    04display:scroll;
    05position:fixed;
    06bottom:1px;
    07right:1px;
    08z-index:99;
    09}
    10#mininavbar a
    11{
    12filter:alpha(opacity=65);
    13-moz-opacity:0.65;
    14opacity:0.65;
    15border:0;
    16}
    17#mininavbar img
    18{
    19border:0;
    20}
    21#mininavbar a:hover
    22{
    23filter:alpha(opacity=100);
    24-moz-opacity:1;
    25opacity:1;
    26}
  4. Sekarang kita Cari lagi kode <head> lalu letakan kode dibawah ini juga setelah kode <head>
    view sourceprint?
    01<div id='mininavbar'>
    02<a href='#' onClick='window.location.reload()' title='Reload page'>
    03<img src='http://soulouko.googlepages.com/refresh.png'/>
    04</a>
    05<a href='<span style="color: rgb(255, 0, 0);">http://www.ebenk789.co.cc/</span>' title='Home Page'>
    06<img src='http://soulouko.googlepages.com/house.png'/></a>
    07<a href='#' title='Ke Atas Halaman'><img src='http://soulouko.googlepages.com/topopg.png'/></a>
    08<a href='<span style="color: rgb(51, 51, 255);">#bawah</span>' title='Ke bawah halaman'>
    09<img src='http://soulouko.googlepages.com/down.png'/>
    10</a>
    11</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..
Diposting oleh [G]aming [H]ackers - di 20.59

Tidak ada komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)