Membuat Widget Follower Tersembunyi Tanpa Merubah Template

Tips kali ini spesial pakai telur buat cak Insan. Tentang cara membuat widget tersembunyi disamping sidebar.

Bagi anda yang mungkin saja ingin sedikit merapikan tampilan blognya, mungkin widget ini bisa bermanfaat buat anda. Yuk dulur-dulur kita mulai cara memasang hidden widget ini.

Pertama-tama login seperti biasa di akun blogger anda. Klik Template >> Tata Letak >> Tambahkan Gadget.
Setelah itu akan muncul jendela baru. Pilih HTML/JavaScript.
Lalu masukkan kode di bawah ini.

<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:350px;
width:30px;
float:left;
cursor:pointer;
background:url('url gambar button widget anda') no-repeat; align: center;
}

.gbcontent{
float:left;
border:2px solid #A5BD51;
background:#F5F5F5;
padding:10px;
}

</style>
<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}

function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}

</script> <div id="gb">
<div class="gbtab" onclick="showHideGB()"> </div>
<div class="gbcontent">

KODE WIDGET FOLLOWER / BUKU TAMU / LAINNYA

<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script></div></div>

Atur posisi, tinggi serta lebar widget sesuai keinginan anda

top:50px : Posisi tombol widget (ubah ukuran sesuai keinginan)
height:350px : Tinggi hidden widget (ubah sesuai keinginan)
width:30px : Lebar hidden widget (ubah sesuai keinginan)

Nah, jika anda ingin memasang lebih dari satu widget di blog. Coba perhatikan tanda gb atau GB, tambahkan angka 1 di tiap belakang kode tersebut menjadi gb1 atau GB1. 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

Selamat mencoba !.

Label: widget

Bengkelozz

Membuat Widget Follower Tersembunyi Tanpa Merubah Template