KAli ini saya akan posting artikel tentang widget yang penting dalam kegiatan Blogging,yaitu Widget Follow. Widget ini bersifat Hide/show,untuk contohnya,liat saja gambar melayang yang ada disudut pojok kiri bawah blog ini.
Sudah tau contohnya..?? Mau coba??Hmmm ayooo kita ikuti tutornya..
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:150px;
z-index:+1000;
}
* html #fl{position:relative;}
.flcontent{
float:left;
border:2px solid #676767;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnjl-AWtdAapbxEb6J_5UmXFhKtV1gXTjZcBsHdxITtLExQVvZny7xmU4HsUqnA3Q90kzDFofGcmBTt7GnPGF-0a1nhfYcJcEFNEnkbRBpnU0qDIUwy8jVXGWpUNu0kC48Hp7CfJANosF6/)#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://www.berbagidisini.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>
Jangan disave dulu yaa sobat blogger..heheehe
Kita lanjut dulu ke bagian yang satu ini..
6. untuk mengambil kode widget follownya silahkan masuk ke link ini [http://www.google.com/friendconnect]
7. Lihat Gambar dibawah
7.2 Klik "Tambahkan gadget anggota"
7.3 Silahkan diatur ukuran, warna dll nya.
7.4 Klik "Buat kode"
7.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..???
Weeesssttt ntar dulu...ternyata tidak cukup sampai disini, masih ada 1km perjalanan lagi
10. Untuk memasang tombol Navigasinya, silahkan masuk ke :
Perancangan>>Edit HTML.
11. Cari kode <body> dan paste code brikut tepat diatas kode <body>
12. Simpan template<a href='javascript:showHideFL()' style='display:scroll;position: fixed; bottom:5px;left:5px;' title='Follow'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfDpobRw7fzjOPbo10uEC2cO3KSJu_zJ138rvvxmb_5AePySGUnPBX_y1GC-Sq7BBxDo2fumLqCTUvBde1XBEPD_fSP0s8nTKo88WOdumnFShiqvMkPZ6SltvSQMITBNG5NzVxoNRm21BJ/'/></a>
Dan sekarang,lihat hasilnya...
Gimana?? Berhasilkaah..?? Mudah-mudahan berhasil ya sobat blogger..
Kalau ada saran,pertanyaan,silahkan berkomentar dibawah postingan ini..
Terima Kasih..
2 komentar:
MIS SIDAMULYA blog yang sedang mengkiti kontes seo Mari Berkomunitas Di Faceblog
salam kenal dan happy blogging
Yaaap..
Salam kenal juga,,semoga blognya bisa menang yaa dikontes SEO'a..
Terus berkreatifitas dan berbagi informasi..
Terima Kasih sudah mau berkunjung..
Posting Komentar