Membuat Tombol Back To Top

Membuat Tombol Back To Top - Hallo guys,mimin mau share nih Tutorial Blog di Blogrenanda, Pada sharing Tutorial Blog kali ini yang berjudul Membuat Tombol Back To Top, saya telah menyediakan Tutorial Blog lengkap seperti Membuat Tombol Back To Top . mudah-mudahan isi postingan tutorial yang mimin tulis ini dapat anda pahami. okelah, ini dia tutorialnya.

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.


Demikianlah Artikel Membuat Tombol Back To Top

Sekian Tutorial dari Blogrenanda Membuat Tombol Back To Top, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sekian postingan dari BlogRenanda.

lihat juga


Membuat Tombol Back To Top


Anda sedang membaca artikel Membuat Tombol Back To Top dan artikel ini url permalinknya adalah https://blogrenanda.blogspot.com/2012/01/membuat-tombol-back-to-top.html Semoga artikel ini bisa bermanfaat.

Subscribe to receive free email updates:

0 Response to "Membuat Tombol Back To Top"

Post a Comment