Membuat Tombol Back To Top

Membuat Tombol Back To Top | Tutorial Blog

Tombol back to top berfungsi untuk memudahkan pengunjung untuk kembali ke bagian atas dari suatu halaman. pada widget ini selain tombol back to top juga terdapat tombol back to bottom untuk menampilkan bagian bawah halaman.
Langsung saja Sob, berikut caranya :
  • Login ke Blogger, Klik Design/Rancangan > Edit HTML.
    Membuat Tombol Back To Top
  • Beri tanda centang pada Expand Template Widget.
    Membuat Tombol Back To Top
    Tips : Biasakan mendownload template untuk membackup template sebelum di edit.
  • Copy kode berikut dan pastekan di atas ]]></b:skin>
    #floating-up {
    position:fixed;_position:absolute;top:280px; right:0px; clip:inherit;
    _bottom:expression(document.documentElement.scrollTop+
    document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }
    #floating-up a
    {
    filter:alpha(opacity=65);
    -moz-opacity:0.65;
    opacity:0.65;
    border:0;
    }
    #floating-up img
    {
    border:0;
    }
    #floating-up a:hover
    {
    filter:alpha(opacity=100);
    -moz-opacity:1;
    opacity:1;
    }
  • Lalu tambahkan kode <a name='to-bottom'></a> tepat diatas kode </body>.
  • Kemudian cari kode <body>, dan paste kode berikut dibawah <body> :
    <div id='floating-up'>
    <div><a href='#' title='back to top'><img alt='back to top' src='http://i1193.photobucket.com/albums/aa345/bakulatz/Arsiv/to-top.png'/></a></div>
    <div><a href='#to-bottom' title='back to bottom'><img alt='back to bottom' src='http://i1193.photobucket.com/albums/aa345/bakulatz/Arsiv/to-bottom.png'/></a></div>
    </div>
  • Terakhir klik Save / Simpan Template.
    Membuat Tombol Back To Top
Silakan dicoba Sob,,, dan semoga berhasil Membuat Tombol Back To Top.

Related Posts :

  • Hirarki DataHirarki Data - Sebelum menuju ke Hirarki Data, mari kita bahas Definisi Database terlebih dahulu. Database adalah kumpulan file/tabel yang s… Read More...
  • Pengertian DDL, DML dan DCLPengertian DDL, DML dan DCL - Pernyataan SQL dapat dikelompokkan menjadi 3 kelompok, yaitu DDL, DML dan DCL. Mari kita simak Pengertian DDL,… Read More...
  • Definisi Database (Basis Data)Definisi Database (Basis Data) - Definisi Database itu cukup banyak. Namun Dalam sejumlah sudut pandang, Definisi Database atau Basis Data i… Read More...
  • Cara Membuat Tulisan BerkedipCara Membuat Tulisan Berkedip - Ada empat cara yang menyebabkan halaman Web menampilkan teks berkedip saat halaman ditampilkan dalam browser… Read More...
  • Cara Membuat WebsiteCara Membuat Website - Seperti yang kita ketahui bahwa situs web (website) atau bisa juga disebut web adalah halaman yang ditampilkan di int… Read More...

0 Response to "Membuat Tombol Back To Top"

Posting Komentar