Salam persahabatan,kali ini trik blogger share bagaimana membuat widget follower Google Friend Connect melayang dengan mode show/hide.
Trik ini hampir sama dengan membuat buku tamu tersembunyi dan hanya sedikit modifikasi script,bagaimana penasaran ingin membuatnya?mari kita ikuti langkah-langkah membuat widget Follower melayang sebagai berikut :
- Sobat login dahulu ke Blogger
- Pilih Design >> Page Elemens >> Add Gadget Html/Java Script
- Copy dan pastekan kode berikut ke dalam Gadget sobat
<style type="text/css">
#fl{
position:fixed;
left:150px;
z-index:+1000;
}
* html #fl{position:relative;}
.flcontent{
float:left;
border:2px solid #676767;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGwV0RABLgog2CUvX7waNp6O8yqV-WUjpdy-NBFlZJhZmm1L_SxnpWZK8LdIyI2e81DQvVD3SHxLwWDGRmtnowC_uy2XmcS4B-GAnV2bWAT9SrUc8_8c2bFHqKoFiCxLfd2L0ELWFTGHth/)#000000 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">
Kode Widget Follow Disini
<div style="text-align: right;">
<a href="javascript:showHideFL()">
[Tutup]
</a></div>
<font size="2"><a href="http://exeloph.blogspot.com/2010/10/memasang-widget-follow-showhide.html"target=_blank"><div style="color: #444444;">
<span style="font-size: xx-small;">By enda fiVers</span></div></a></font>
</div>
</div>
<script type="text/javascript">
var fl = document.getElementById("fl");
fl.style.bottom = (-100-fl.offsetWidth).toString() + "px";
</script>
#fl{
position:fixed;
left:150px;
z-index:+1000;
}
* html #fl{position:relative;}
.flcontent{
float:left;
border:2px solid #676767;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGwV0RABLgog2CUvX7waNp6O8yqV-WUjpdy-NBFlZJhZmm1L_SxnpWZK8LdIyI2e81DQvVD3SHxLwWDGRmtnowC_uy2XmcS4B-GAnV2bWAT9SrUc8_8c2bFHqKoFiCxLfd2L0ELWFTGHth/)#000000 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">
Kode Widget Follow Disini
<div style="text-align: right;">
<a href="javascript:showHideFL()">
[Tutup]
</a></div>
<font size="2"><a href="http://exeloph.blogspot.com/2010/10/memasang-widget-follow-showhide.html"target=_blank"><div style="color: #444444;">
<span style="font-size: xx-small;">By enda fiVers</span></div></a></font>
</div>
</div>
<script type="text/javascript">
var fl = document.getElementById("fl");
fl.style.bottom = (-100-fl.offsetWidth).toString() + "px";
</script>
- Ganti tulisan Kode Widget Follow Disini yang berwarna merah dengan kode Widget Follow sobat
- Setelah itu simpan gadget sobat
- kemudian sobat pilih tab Edit HTML
- Cari kode <body> dan paste code di bawah ini tepat diatas kode <body>
<a href='javascript:showHideFL()' style='display:scroll;position: fixed; bottom:5px;left:5px;' title='Follow'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1qjXekxeMIn1zTckQJlLb9_CJ5vvj1WaFfiTWXrRvFTUxBa7qeZouYDG2cB8jclle8NTP3yj6yohJ8rp-uh4Z8BmulU_yAYAQEQ1bQ9S9dDAYu88FdJ1cg899rBaCC-pEq_x9qJqNnQX2/'/></a>
- Simpan template sobat dan lihat hasilnya
Sumber http://exeloph.blogspot.com/
0 comments:
Posting Komentar
MOHON MAAF
Link Hidup/komentar akan di hapus Atau di saring(tidak di tampilkan)