Membuat Back To Top Berputar Pada Blog
Ichi-Kun Blog's - Kali Ini Saya Akan Memposting Cara Membuat Back To Top Berputar Pada Blog,Pembuatan Back To Top ini sebenarnya Optinal digunakan tapi sebagai Admin tentu akan berusaha menyediakan vasilitas fitur demi kemudahan para pengunjung , dengan cara ini maka tombol Back To Top akan menjadi lebih menarik
Tanpa Banyak Basa - Basi Lagi
Saya Kasih,,
Langkah - Langkahnya :
Saya Kasih,,
Langkah - Langkahnya :
- Login Ke Blog
- Masuk Ke Bagian Template Pilih Edit HTML
- Copy Kode Di Bawah Ini Tepat diatas kode </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js'/> <script type='text/javascript'> $(function() {$(window).scroll(function() { if($(this).scrollTop() > 100) {$('#BackToTop').fadeIn();} else {$('#BackToTop').fadeOut();}}); $('#BackToTop > img').click(function() {$('body,html').animate({scrollTop:0},800).animate({scrollTop:25},200).animate({scrollTop:0},150).animate({scrollTop:10},100).animate({scrollTop:0},50);});}); </script>
- Save Template
- Buka Tata Letak Tambah Widget Baru Pilih HTML/Java Script
- Copy Kode Di Bawah Ini Kedalam Widget Baru Di Tambah
<style> #BackToTop {text-align:center; position:fixed; bottom:0px; right:10px; cursor:pointer; display:none;} #BackToTop img:hover { -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; -webkit-transform:rotate(360deg); -moz-transform:rotate(360deg);
-ms-transform:rotate(360deg);
-o-transform:rotate(360deg);
transform:rotate(360deg); }
</style>
<div id='BackToTop'> <img alt="Bandar Bloger Top" src='Url gambar Disini' title="" style='margin-right:-9px'/> </div>
-ms-transform:rotate(360deg);
-o-transform:rotate(360deg);
transform:rotate(360deg); }
</style>
<div id='BackToTop'> <img alt="Bandar Bloger Top" src='Url gambar Disini' title="" style='margin-right:-9px'/> </div>
- Setelah itu Simpan dan lihat hasilnya
Catatan!!
- Warna Hijau (360deg) adalah putarannya, jika ingin 2 kali putaran ganti jadi 720deg
- Warna Merah (Url gambar Disini) Ganti dengan Url Gambar Back To Top Yang bisa di cari sendiri di google ataupun di buat dari aplikasi
Itu lah Cara Membuat Back To Top Berputar Pada Blog Semoga Bermanfaat Bagi Anda~
0 comments:
Post a Comment