Download this Blogger Template by Clicking Here!

Membuat Widget Follower Tersembunyi dengan Jquery

,

Konsep dan fungsinya sebenarnya sama dengan cara membuat hidden widget di posting kemarin. Namun kali ini kita coba beri sebuah sentuhan "pelumas" bernama Jquery, yang hasilnya akan membuat slider widget akan semakin kencang berlari hahaha.

  • Seperti biasa login di akun blogger anda. Klik Template >> Edit HTML. 
  • Lalu masukkan pelumas berupa Jquery di bawah ini tepat di atas kode </head>, Setelah itu klik SIMPAN.
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/>
  • Untuk membuat widgetnya sekarang klik ke menu Tata Letak >> Tambahkan Gadget >> HTML / Javascript, lalu masukkan kode berikut ini di dalamnya dan SIMPAN.
<script type="text/javascript">
//<!--
$(document).ready(function() {$(".w2bslikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);});
//-->
</script>
<style type="text/css">
.w2bslikebox{background: url("URL gambar bottom widget anda") no-repeat scroll left center transparent !important;display: block;float: right;height: 240px;padding: 0 0px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:50%;}
.w2bslikebox div{border:none;position:relative;display:block;}
.w2bslikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 4px;text-align: right;z-index: 99999;}
.w2bslikebox span a{color: #808080;text-decoration:none;}
.w2bslikebox span a:hover{text-decoration:underline;}
</style><div class="w2bslikebox" style=""><div>

<div class='widget-content'>
<div align="center">

KODE WIDGET FOLLOWER / BUKU TAMU / LAINNYA

</div>
</div>
</div>
</div>
</div>
  • top:50% : Posisi tombol widget (ubah ukuran sesuai keinginan) 
  • height:350px : Tinggi hidden widget (ubah sesuai keinginan) 
  • width:30px : Lebar hidden widget (ubah sesuai keinginan)
Jika anda ingin memasang lebih dari satu widget di blog. Coba perhatikan tanda w2bslikebox, tambahkan angka 1 di tiap belakang kode tersebut menjadi w2bslikebox1. Tujuannya agar tak terjadi bentrok CSS dengan hidden widget pertama yang telah anda buat. Tambahkan angka 2 jika anda ingin membuat widget yang ketiga. Begitu seterusnya, lalu klik SIMPAN.  

Untuk gambar button widget silakan anda bisa pilih di bawah ini. Atau anda bisa juga membuat button dengan kreasi sendiri.

Button Blogger
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLw6vUgQNsFkSIaP6THubXKsFKD-xI1IpEppKTOtJdQN7s8KUFF3Q4Zrw0sFCKp4XgDfQYvCU7nzAhSSRPpjbh6Jf6_IY-h9bpIeiaQ2pBU2BhxfnLsjVZbRdWRw0NhvA-75s1laV1wus/s159/ButtonBlogger.png

Button Twitter
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWU6ojpy6FyE1vVf24TlEWjg6xz4EB_edY8OvWX1fftVFRAqL6XsW1lU7V44Sf7dyHRcobLqYoIwTX-cldifFpzL8Xf0xDwA7IVOjw9tII8uRQ6sNsIGx91-B9YjSnDP8lLRblO56WpdM/s159/ButtonTwitter.png
Button Facebook
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiF6_BUd8arMWv7RD4oSTFMqcRp9kIJRD1szEkI-X7r2yrMFu4UsrAP2SOpsHVmXYIVVMZMRFi_x56p_-c_fXCs2fYXj2UJ1amdMhvae7p8y8UONZNy4-XKmUpC2QLvo-NU8GB_1unKC5o/s159/ButtonFacebook.png

untuk DEMO klik gambar di bawah ini.. Selamat berkreasi dan semoga bermanfaat.



Label: