Lazada Indonesia

Sunday, 22 March 2015

Cara Membuat Tombol Back to Top di Blog

Belajar Blog - Pada Postingan pertama ini , saya akan memberikan sebuah Cara Membuat Tombol Back to Top di Blog, jika menurut anda bermanfaat , ikuti tutorial berikit ini :



1. Silahkan anda copypaste kode di bawah ini lalu taruh di atas kode skin ]]></b:skin> 


#BounceToTop { background: #3498DB; text-align: center; position: fixed; bottom: 14px; right: 20px; cursor: pointer; width: 30px; height: 30px; padding: 5px; display: none;}
#BounceToTop:before { content: &quot;&quot;; position: absolute; bottom: 10px; right: 5px; width: 0; height: 0; border-style: solid; border-width: 0 15px 20px 15px; border-color: transparent transparent #444 transparent; line-height: 0; transition: all 0.3s ease-out;}
#BounceToTop:hover:before { content: &quot;&quot;; position: absolute; bottom: 10px; right: 5px; width: 0; height: 0; border-style: solid; border-width: 0 15px 20px 15px; border-color: transparent transparent #ddd transparent; line-height: 0;}
#BounceToTop:after {  border-color: transparent transparent #3498DB transparent; content: &quot;&quot;; position: absolute; bottom: 10px; right: 11px; width: 0; height: 0; border-style: solid; border-width: 0 9px 12px 9px; line-height: 0;}
Note: jika anda menggunakan template yang saya bagikan taruh kode tersebut di sekitar kode yang saya blog di bawah ini

Mulai dari kode <style type='text/css'> sampai kode penutup </style>


2. Setelah itu cari kode </body>
3. Lalu taruh kode di bawah ini di atas kode </body>

<script type='text/javascript'>
//<![CDATA[
$(function () {
 $(window).scroll(function () {
  if ($(this).scrollTop() > 100) {
   $('#BounceToTop').slideDown(200);}
        else {
   $('#BounceToTop').slideUp(300);}
 });
 $('#BounceToTop').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>
  <div id='BounceToTop'/>
Note: Untuk template yang saya bagikan taro kodenya di atas kode  &lt;!--</body>--&gt;&lt;/body&gt;

4. Setelah itu simpan dan lihat hasilnya

0 komentar:

Post a Comment

Berkomentarlah sesuai dengan etika
Dilarang Berkomentar yang berisi :
1. KONTEN SPAM
2. KONTEN SARA
3. BERBAGI LINK AKTIF ATAU IKLAN
5. KONTEN PORNO,JUDI, DAN HAL YANG SEJENIS

luvne.com resepkuekeringku.com desainrumahnya.com yayasanbabysitterku.com