Facebook Like Dan Twitter Follow Box Melayang New Style

Membuat Facebook Like Dan Twitter Follow Box Melayang. Huahahaha...akhirnya experimen widget Mas Yusa berhasil alias sukses :D. Kali ini Mas Yusa akan share widget lagi (Tentunya halal bro..!), widget melayang yang Mas yusa share kali ini tidak menggunakan script Jquery (Selamet deh berat blog anda) Hahaha. Mas yusa terinpirasi widget facebook like box melayang dari sobat planktoon.blogspot.com yang enggak makai jquery. Sebenarnya widgetnya hampir sama dengan bang planktoon, tapi ada tambahan dari saya, yaitu twitter follow box yang sangat keren (di desain mirip facebook like box)

KLIK DISINI UNTUK DEMO

Untuk Screen Shootnya :

 

Nah, untuk yang tertarik...langsung aja simak caranya :

• Masuk akun Blogger anda
• Masuk Rancangan/Tata Letak
• Klik Add widget->HTML/Java Script
• Masukan kode di bawah ini :

<!-- Script kotak like Facebook dan Twitter Follow box Melayang -->
<style type="text/css">
#topbar{
position:absolute;
padding-left:260px;
background-color: transparancy;
width: 300px;
visibility: hidden;
z-index: 100;
}
</style>
<script type="text/javascript">
var persistclose=0 //set to 0 or 1. 1 means once the bar is manually closed, it will remain closed for browser session
var startX = 30 //set x offset of bar in pixels
var startY = 5 //set y offset of bar in pixels
var verticalpos="fromtop" //enter "fromtop" or "frombottom"
function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}
function closebar(){
if (persistclose)
document.cookie="remainclosed=1"
document.getElementById("topbar").style.visibility="hidden"
}
function staticbar(){
barheight=document.getElementById("topbar").offsetHeight
var ns = (navigator.appName.indexOf("Netscape") != -1) || window.opera;
var d = document;
function ml(id){
var el=d.getElementById(id);
if (!persistclose || persistclose && get_cookie("remainclosed")=="")
el.style.visibility="visible"
if(d.layers)el.style=el;
el.sP=function(x,y){this.style.left=x+"px";this.style.top=y+"px";};
el.x = startX;
if (verticalpos=="fromtop")
el.y = startY;
else{
el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight;
el.y -= startY;
}
return el;
}
window.stayTopLeft=function(){
if (verticalpos=="fromtop"){
var pY = ns ? pageYOffset : iecompattest().scrollTop;
ftlObj.y += (pY + startY - ftlObj.y)/8;
}
else{
var pY = ns ? pageYOffset + innerHeight - barheight: iecompattest().scrollTop + iecompattest().clientHeight - barheight;
ftlObj.y += (pY - startY - ftlObj.y)/8;
}
ftlObj.sP(ftlObj.x, ftlObj.y);
setTimeout("stayTopLeft()", 10);
}
ftlObj = ml("topbar");
stayTopLeft();
}
if (window.addEventListener)
window.addEventListener("load", staticbar, false)
else if (window.attachEvent)
window.attachEvent("onload", staticbar)
else if (document.getElementById)
window.onload=staticbar
</script>
<br />
<div class="clear">
</div>
<div id="topbar">
<table border="1" bgcolor="FFFFFF">
<tr>
<td>
<div style="text-align: right;">
<a href="" onclick="closebar(); return false"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYT9L30mAD3e-xKMsItxnyi33SZSpP2YKARWcI4BX59eFXsKdIaAUQ9xFx0eG7qWDjPOHiw_eeEItDaN349c2OSUbFf7TySdl9RHPYmHBfcJagkyMYW9sZGWIrq2cquCySEEzvHG_tQ1zb/s1600/close3.png" /></a></div>
<center>
<div style="background: #fff;">

<iframe src="http://www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/pages/MasyusaBlogspotcom/317602688268316&amp;width=245&amp;colorscheme=light&amp;show_faces=true&amp; connections=9&amp;stream=false&amp;header=false&amp;height=270" scrolling="no" frameborder="0" scrolling="no" style="border: medium none; overflow: hidden; height: 230px; width: 300px;background:#fff;"></iframe>

<script type="text/javascript"
src="http://s.moopz.com/fanbox_init.js"></script><div
id="twitterfanbox"><script
type="text/javascript">fanbox_init("yusa_syihab");</script
type="text></div
id="twitterfanbox">

</div>
</center></td>
</tr>
</table>
</div>
<!-- akhir -->

• Note : Untuk yang berwarna BIRU, ganti dengan url Facebook Fanpage blog anda. Dan untuk yang berwarna MERAH ganti dengan ID Twitter anda (Tidak pakek @).
• Lalu Simpan.

Jika tidak berhasil, mari bertanya VIA KOMENTAR DIBAWAH... :D
Jangan lupa klik iklan Mas Yusa ... :)