Cara membuat show and hide widget follower Di Blogger
Cara membuat show and hide widget follower --Berbicara masalah show and hide widget pernah saya bahas sebelumnya, baca cara membuat show hide widget. Nah, sobat masterendi.com tips dan triks yang ingin saya bagi ini gampang-gampang susah. Gampangnya tinggal diklik, sedang susahnya kalau komputer kita lemot dan koneksinya imot eh lemot juga, hehe.. Semoga sobat yang ingin mencobanya lancar-lancar saja..
Cara membuat show and hide widget follower
1. Siapkan kode widget follower sobat, ambil saja kodenya di http://www.google.com/friendconnect jika sobat belum memiliki kode widget follower
2. Login ke blogger --> Rancangan --> Add Gadget
3. Pilih HTML/JavaScript, lalu copy paste kode berikut dan Save.
<style type="text/css">NOTE:
#fl{
position:fixed;
right:190px;
z-index:+1000;
}
* html #fl{position:relative;}
.fltab{
height:32px;
width:270px;
float:top;
cursor:pointer;
background:url(#) no-repeat;
}
.flcontent{
float:right;
border:2px solid #676767;
background:url()#F90 repeat-x bottom center scroll;
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
-moz-border-radius-bottomleft:15px;
-moz-border-radius-bottomright:15px;
padding:10px;
}
</style>
<script type="text/javascript">
function showHideFL(){
var fl = document.getElementById("fl");
var w = fl.offsetWidth;
fl.opened ? moveFL(0, -100-w) : moveFL(20-w, 0);
fl.opened = !fl.opened;
}
function moveFL(x0, xf){
var fl = document.getElementById("fl");
var dx = Math.abs(x0-xf) > 25 ? 35 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
fl.style.bottom = x.toString() + "px";
if(x0!=xf){setTimeout("moveFL("+x+", "+xf+")", 10);}
}
</script>
<div id="fl">
<div class="fltab" onclick="showHideFL()"> </div>
<div class="flcontent">
GANTI DENGAN KODE WIDGET FOLLOWER SOBAT DISINI
<div style="text-align: right;">
<a href="javascript:showHideFL()">
[Tutup]
</a></div></div></div>
<script type="text/javascript"><br />var fl = document.getElementById("fl");<br />fl.style.bottom = (-100-fl.offsetWidth).toString() + "px";<br /></script>
Kode warna merah bisa sobat otak-atik misalnya background dan size. lihat Kode warna HTML
4. Selanjutnya masuk ke menu Edit HTML
5. Cari tag <body>
6. Pilih salah satu kode dibawah dan paste diatas <body>, lalu save template sobat..
kode 1 :
<a href='javascript:showHideFL()' style='display:scroll;position: fixed; bottom:65px;left:5px;' title='Follow'><img src='https://lh5.googleusercontent.com/-oKPwM-gFvmE/T00Ri9hMxxI/AAAAAAAABl8/hg_KsLca7DA/s179/follow-me.gif'/></a>
Kode 2 :
<a href='javascript:showHideFL()' style='display:scroll;position: fixed; bottom:65px;left:5px;' title='Follow'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIFhleFQ94fZ6eqvNGUMLGS_fnhg4eHL69sPlc08bHSZjZbedlwCuOYV9RNUmn9Cgi9I05iDUK6CuRMLo8Df9QJ4oK_0ljAXvgK8abiDUKUVl81pA7fjtCfV848F9a0_CSQFQewjbVMnQ/s1600/Follow_me___by_sevensense.jpg'/></a>
Kode 3:
<a href='javascript:showHideFL()' style='display:scroll;position: fixed; bottom:65px;left:5px;' title='Follow'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDfUvlHsIIidJz2gWT8VhdVAntt52P_tUm-3Pt1BtmiYcrdOZ0zo3ewMVyXwS4lPt-DmQQgTqACpGTA86RRcPW-6dZ5mfloZHKtQ1zoLZUamZZWPXHoRL4ArNjsocbxA0Wl03vCsZXzcM/s1600/FOLLOWERS-LOGO-.jpg'/></a>
Demikian cara membuat show and hide widget follower . Selamat mencoba, semoga berhasil.
Happy blogging and sharing..
Posting Komentar