Hay friends, Dengerin lagu yuks
Hehehehe ..
Andyrra

Male, 45 years

Batam, Indonesia

If you're doing your best, you won't have any time to worry about failure and The past can't see you, but the future is listening.

andyrra.com

Translate

Java Filipino Czech English iran Romania Thailand Bangladesh India India French German Spain Italian Dutch Russian Portuguese Japanese Korean Arabic Chinese Simplified

poto

Mounting created Bloggif

7 Jun 2013

Cara Memasang Tombol Kembali Ke Atas


Kali ini saya sedikit share Cara Memasang Tombol Kembali Ke Atas Dan Kembali Turun yang lengkap dengan tombol kembali ke beranda / home dan muat ulang / reload .

Tips dan trick ini sudah saya peragakan di blog saya. singkat cerita mari kita simak saja Cara Memasang Tombol Kembali Ke Atas Dan Kembali Turun berikut ini.


Cara Memasang Tombol Back to Top
Memasang tombol kembali ke atas atau memasang tombol back to top ini mungkin bagi blog saya ini sangat diperlukan, karena untuk menyikapi blog yang terlalu memanjang kebawah, mungkin masalah ini tidak akan ditemui jika kita memasang template yang sudah menyertakan widget ini, tetapi jika belum ada kita bisa memasangnya sendiri, karena jika tidak ada tombol back to top akan membosankan pembaca blog kita, apalagi jika menggunakan mouse yang kebetulan keadaannya sudah letoy (hehe…) atau lebih parahnya lagi sudah tidak ada scroll nya lagi, itu akan membuat mereka capek untuk mengakses blog kita, maka alternatifnya adalah membuat tombol back to top atau tombol kembali ke atas.

Ada dua cara pembuatan tombol back to top ini, berikut penjelasannya:
(Sebelum memasuki penjelasan, download terlebih dahulu template anda, sebagai asuransi tamplate anda...hehe...)

Cara Pertama:
Untuk cara pertama ini sangat simple, karena tampilannya sederhana, anda hanya perlu menambahkan kode berikut sebelum kode 
</body>


<!-- Bact to top By Ozan Hacker -->
<a href='#' style='display:scroll;position:fixed;bottom:5px;right:5px;' title='Back to Top'><img src='http://3.bp.blogspot.com/-tIcrAJXd0SQ/TbbzlODegZI/AAAAAAAAAeo/JFTR2FkHHTw/s1600/Untitled-2.png'/></a>

Untuk penjelasannya, anda login dulu ke blogger anda lalu Ikuti tahap-tahap berikut ini:

1.      Pilih Rancangan
2.      EDIT HTML ( Centang Expand Template Widget )
3.      Cari Kode 
 ( Untuk lebih cepat mencari gunakan Ctrl+F )
4.      Simpan kode berikut sebelum atau di atas kode </body>


<!-- Bact to top By Ozan Hacker -->
<a href='#' style='display:scroll;position:fixed;bottom:5px;right:5px;' title='Back to Top'><img src='http://3.bp.blogspot.com/-tIcrAJXd0SQ/TbbzlODegZI/AAAAAAAAAeo/JFTR2FkHHTw/s1600/Untitled-2.png'/></a>

5.      Lalu simpan tamplate, SELESAI dan lihat hasilnya…

Keterangan:
  • Kode warna hijau adalah posisi tombol berada
  • Kode warna biru adalah URL gambar tombol (silahkan anda ganti dengan URL gambar anda bila ingin menyesuaikan  gambarnya dengan selera anda)


Cara Kedua:
Tombol back to top pada cara pertama hanya tombol back to top biasa, jika anda ingin yang lebih komplit, anda bisa memekai cara kedua ini:

Tahap-tahapnya sama dengan yang diatas, cuma sekarang anda harus menambahkan kode CSS sebelum kode  ]]></b:skin>, berikut penjelasannya:

1.      Cari kode  ]]></b:skin>lalu sisipkan CSS berikut sebelum atau diatasnya.
    #Enjoy{display:scroll;position:fixed;bottom:1px;right:1px;z-index:99}
    #Enjoy a{filter:alpha(opacity=65);-moz-opacity:0.65;opacity:0.65;border:0}

    #Enjoy img{border:0}
    #Enjoy a:hover{filter:alpha(opacity=100);-moz-opacity:1;opacity:1}

    

2.      Kemudian sisipkan kode berikut ini setelah atau dibawah kode  </body>



 <div id='Enjoy'>
    <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>




3.      Lalu simpan tamplate anda, dan lihat hasilnya…

Get free daily email updates!

Follow us!



Share to Facebook Share this post on twitter Bookmark Delicious Digg This Stumbleupon Reddit Yahoo Bookmark Furl-Diigo Google Bookmark Technorati Newsvine Tips Triks Blogger, Tutorial SEO, Info

0   komentar

Cancel Reply

Led


copas gif

loading

SOCIAL NETWORK

email  
   
 
google plusGoogle+
 
  youtube 
 
andyrra.com

VISITOR FROM

andyrra.com

RECENT POST



>

Enter your email address:



what is my ip address?