Follow atau pengikut suatu blog, mungkin kata-kata follow tak asing lagi bagi para blogger, tapi bagi pemula atau yang masih belum tahu mungkin trik ini dapat bermanfaat.Ok.... selanjutnya saya akan coba semampu saya untuk menjelaskan pada rekan-rekan bloger khususnya yang baru bergabung menjadi blogger. Adapun cara atau langkau-langkah yang harus dilakukan untuk membuat widget follower melayang dengan mode show/hide seperti posting berikut ini :
1. Pastinya login Blogger terlebih dahulu
2. Masuk ke Perancangan>>Elemen Laman
3. Tambahkan Gadget Html/Java Script
4. Copas kode berikut :
<style type="text/css">
#fl{
position:fixed;
left:500px;
z-index:+1000;
}
* html #fl{position:relative;}
.flcontent{
float:left;
border:2px solid #676767;
background:url(http://img444.imageshack.us/img444/7882/backjady6.png) 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">
<div style="text-align: right;">
<a href="javascript:showHideFL()">
<img src="http://img707.imageshack.us/img707/6357/closen.png" height="20" width="50" />
</a></div>
<font size="2"><a href="http://armanheros.blogspot.com/2012/02/memasang-widget-follow-showhide.html"target=_blank"><div style="color: #444444;">
<span >By Arman Heros;/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:500px;
z-index:+1000;
}
* html #fl{position:relative;}
.flcontent{
float:left;
border:2px solid #676767;
background:url(http://img444.imageshack.us/img444/7882/backjady6.png) 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">
<div style="text-align: right;">
<a href="javascript:showHideFL()">
<img src="http://img707.imageshack.us/img707/6357/closen.png" height="20" width="50" />
</a></div>
<font size="2"><a href="http://armanheros.blogspot.com/2012/02/memasang-widget-follow-showhide.html"target=_blank"><div style="color: #444444;">
<span >By Arman Heros;/span></div></a></font>
</div>
</div>
<script type="text/javascript">
var fl = document.getElementById("fl");
fl.style.bottom = (-100-fl.offsetWidth).toString() + "px";
</script>
Setelah kode itu di paste jangan di save dulu tapi buat dulu kode widget follower kita pada langkah no. 6.
6. untuk mengambil kode widget follownya silahkan masuk ke link ini [http://www.google.com/friendconnect]
7. Lihat Gambar dibawah
-[1] Pilih blog sobat yang akan dipasang widget follownya
-[2] Klik "Tambahkan gadget anggota"
-[3] Silahkan diatur ukuran, warna dll nya..
-[4] Klik "Buat kode"
-[5] Silahkan Copy kodenya, dan ikuti langkah selanjutnya
8. Paste kode Widget Follow tadi pada kode nomor 4 (*Gantikan kode yang berwarna merah dengan kode Widget Follow yang sudah dicopy tadi)
9. Save..
hohoho...ternyata tidak cukup sampai disini, masih satu langkah lagi
10. Untuk memasang tombol Navigasinya, silahkan masuk ke :
Perancangan>>Edit HTML.
11. Cari kode <body> dan paste code berikut tepat diatas kode <body> :
<a href='javascript:showHideFL()' style='display:scroll;position: fixed; bottom:5px;left:5px;' title='Follow'><img src='http://img32.imageshack.us/img32/3564/blogger3.png'/></a>
12. Simpan template
lihat hasilnya... "Good Luck"
Catatan : "Jangan Lupa Follow and Likenya ya.
Tidak ada komentar:
Posting Komentar