Blog Personal tentang tips Blogging dan Internet

Membuat Back To Top Unik Dengan Cacing

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(http://2.bp.blogspot.com/-9-q2Kx2wEJ8/U10ep49ALqI/AAAAAAAAAY8/hicEo4x2Iv8/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 ;)

Berlangganan : Masukan e-mail Anda untuk mendapatkan kiriman artikel terbaru dari Kang Mousir langsung di pesan kotak masuk.

feedburner

15 Komentar untuk "Membuat Back To Top Unik Dengan Cacing"

Rizky Kurniawan Ritonga

mantab kang pluginnya.
kalau seperti ini ingat spongebob di episode dilarang bermain ke pengait :v

Fathoni Muhammad

wkwkwk... :D jadi kaya animasi ya kang. unik dan keren. baru pertama kali liat yg satu ini.
kita kayak ikan yang dipancing ke atas dengan pakannya cacing. xixi

Hand Excel

haha nama css classnya kok cacing kang lucu :D
tapi patut dicoba ini trimakasih kang :D

Kang Mousir

haha betul sob, kayak di spongebob yang ditarik sama kail :lol:

Kang Mousir

iya sob, tapi demo aslinya lebih keren. Seolah - olah kita sedang memancing ikan dengan menggunakan jquery seolah - olah ikannya hidup
Cek sini >> myblogsharingpost.wordpress.com

Kang Mousir

Back Top Top nya juga cacing, jadi class nya juga cacing :D
sama - sama

Rian Nurherdian

dan yang saya rasain, itu bikin ngakak kang. :D wakakak ..

kang beben emang share yang unik2 dan aneh2 .. gak jauh kaya admin nya tuh. :p . wkwk

Kang Mousir

Betul kang, Kang Beben mah aneh - aneh wae hehe. Namanya juga blogger petualang, pasti suka nemu yang unik dan aneh.

Orangnya juga misterius :D

Si Ryan

saya kira cacing cacing di perut curi semua nutrisi :D, ternyata mengenai memancing :D

Kang Mousir

haha bukan sob, ini back to top cuma stylenya cacing :D

Cahya Putra Pratama

wkwkwk gokil tombol back to topnya...

Kang Mousir

Yang aslinya lebih keren lagi ;) myblogsharingpost.wordpress.com

Adam Rizqi

iya gan kok kembali ke bawah

Silakan berkomentar sesuai dengan topik. Jangan menyisipkan link pada komentar dan jangan sampai komentar Anda masuk komentar SPAM.

Jangan salahkan Saya bila komentar Anda dihapus !

Klik emoticon : :) :D :( :-o @@, :s :wow: 8) :x :P :| ;) :lol: :oops: :cry: :evil: :twisted: :roll: :!: :?: :idea: :arrow: :mrgreen: :-d