Home / jQuery / Tutorial Blogger / Membuat Back To Top Unik Dengan Cacing

Cara Download Membuat Back To Top Unik Dengan Cacing Update Terbaru

Sedikit Info Seputar Membuat Back To Top Unik Dengan Cacing Terbaru 2017 - Hay gaes kali ini team Free Template BLogspot.Com, kali ini akan membahas artikel dengan judul Membuat Back To Top Unik Dengan Cacing, kami selaku Team Free Template BLogspot.Com telah mempersiapkan artikel ini untuk sobat sobat yang menyukai Free Template BLogspot.Com. semoga isi postingan tentang Artikel jQuery, Artikel Tutorial Blogger, yang saya posting kali ini dapat dipahami dengan mudah serta memberi manfa'at bagi kalian semua, walaupun tidak sempurna setidaknya artikel kami memberi sedikit informasi kepada kalian semua. ok langsung simak aja sob
Judul: Berbagi Info Seputar Membuat Back To Top Unik Dengan Cacing Terbaru
link: Membuat Back To Top Unik Dengan Cacing

"jangan lupa baca juga artikel dari kami yang lain dibawah"

Berbagi Membuat Back To Top Unik Dengan Cacing Terbaru dan Terlengkap 2017

Back To Top Button
Back to top adalah suatu tombol untuk kembali ke atas website tanpa harus menggunakan scrollbar. Back to top ini fungsinya untuk memudahkan pengunjung untuk kembali ke kepala suatu website dengan cepat. Kita sering menjumpai tampilan back to top yang biasa saja, namun berbeda dengan yang satu ini.

Back To Top yang satu ini seolah - olah kita sedang memancing, jadi saat scrollbar digulung kebawah otomatis kail dengan cacing turun kebawah, saat scrollbar digulung ke atas kail naik lagi ke atas. Lalu saat kail dengan cacing di klik, scrollbar menggulung otomatis ke atas. Artikel ini pernah ditulis oleh +Beben Koben pada Make Attractive Back to Top Cacing Theme, oleh karena itu Saya tulis ulang di blog ini.

Cara Memasang Back To Top

1. Template Anda harus sudah terpasang jQuery Libary, jika belum pasang jQuery ini diatas kode </head>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
2. Simpan kode ini diatas kode ]]></b:skin> atau </style>

.cacing{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqX96HHiL3ch3niDil96cpNcgIV5z-dSOTqbzrHJJSqY6YojYOdh0emUya0EA41bcYrMJJVIi9ciQmlZs5IwNUvLajOKEQ_RPC02AMfqAiElbxhQm2pkoPqf7GCVDQmZ58cCRy6p0gOLFZ/s1600/Cacing.png);background-repeat:no-repeat;position:relative}
#cacing{cursor:pointer;width:30px;height:530px;background-size:41px;position:fixed;top:-550px;left:7%;transition:all .7s ease-in-out;-webkit-transition:all .7s ease-in-out;z-index:21}
#cacing-bubble{background:#fff;border-radius:50px;color:#06f;display:block;font-size:12px;line-height:14px;opacity:0;overflow:visible;padding:5px;position:absolute;top:445px;left:20px;text-align:center;transition:all .3s ease-in-out;-webkit-transition:all .3s ease-in-out;visibility:hidden;width:60px;height:auto;z-index:99}
#cacing:hover > #cacing-bubble,#cacing:hover > #cacing-bubble:after{opacity:1;transition:all .3s ease-in-out;-webkit-transition:all .3s ease-in-out;visibility:visible}
#cacing-bubble:after{border-bottom:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #fff;border-left:5px solid #fff;content:"";display:block;position:absolute;top:96%;left:10px;width:0;height:0;z-index:98}
3. Kemudian simpan kode ini diatas kode </body>

<script type='text/javascript'>
//<![CDATA[
jQuery(document).ready(function($) {
 $(window).on('scroll', false, function() {
  var windowTop = $(window).scrollTop();
  if (windowTop > 550) {
   $('#cacing').css('top', '0');
  } else {
   $('#cacing').css('top', windowTop - 550 + 'px');
  }
 });
 $('#cacing').unbind('click').click(function() {
  $('html,body').animate({
   scrollTop: $("#cacingTOP").offset().top
  }, 'slow');
 });
});

//]]>
</script>
4. Lalu simpan kode ini dibawah kode <body>

<div class="cacing" id="cacing">
<div id="cacing-bubble">Kembali ke atas!</div>
</div>
<div id="cacingTOP"></div>
Silakan Anda ganti tulisan yang Saya tandai sesuai dengan keinginan. Bagaimana unik bukan tentunya beda dari yang lain ;)

Itulah sedikit Artikel Membuat Back To Top Unik Dengan Cacing terbaru dari kami

Semoga artikel Membuat Back To Top Unik Dengan Cacing yang saya posting kali ini, bisa memberi informasi untuk anda semua yang menyukai Free Template BLogspot.Com. jangan lupa baca juga artikel-artikel lain dari kami.
Terima kasih Anda baru saja membaca Membuat Back To Top Unik Dengan Cacing

Share this