Ok sob, kali ini saya akan membaut tutorial cara membuat Find us on facebook melayang seperti di blog
saya
dan saya pun menadapat Kode HTML ini dari : http://www.sakahayang.com tapi saya sebenarnya mempunyai sedikit kendala karena kode HTML di sana sedikit tidak saya mengerti dan saya coba utak atik kode HTML nya, akhirnya saya berhasil sedikit "memodif" HTML tersebut, Langsung saja ke TKP
1. anda perlu membuat Fanpage di FB dengan cara LIhat ke Cara membuat Fan page dan meng-aplikasikannya ke blog Ikuti saja semua cara di tutorial itu sampai meng-copy kode Iframe.
2 bila sudah anda copy kode berikut ke Html/javascript
<!-----find us on fb----->
<style type="text/css"> #fb{ position:fixed; top: 240px; z-index:+1000; } * html #fb{position:relative;} .fbtab{ height:140px; width:54px; float:left; cursor:pointer; background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcVd_Wtzib80IRXZKY1vgYW6L7_THXZrI8XUNNycmspwhG7j0xKEIWQ9DXVR7TMSCfU2PwSzf-1kExBdjQCX7-Zb5P8AHDxCH6yOoPxMJi0BMbWy_uuGaDEqag9dnaUEB3bXlH9udOY084/s1600/find-us-on-fb.gif') no-repeat; } .fbcontent{ float:left; border:2px solid #A5BD51; background:#F5F5F5; padding:10px; } </style> <script type="text/javascript"> function showHideFB(){ var fb = document.getElementById("fb"); var w = fb.offsetWidth; fb.opened ? moveFB(0, 40-w) : moveFB(20-w, 0); fb.opened = !fb.opened; } function moveFB(x0, xf){ var fb = document.getElementById("fb"); var dx = Math.abs(x0-xf) > 10 ? 5 : 1; var dir = xf>x0 ? 1 : -1; var x = x0 + dx * dir; fb.style.right = x.toString() + "px"; if(x0!=xf){setTimeout("moveFB("+x+", "+xf+")", 10);} } </script> <div id="fb"> <div class="fbtab" onclick="showHideFB()"> </div> <div class="fbcontent">
<style type="text/css"> #fb{ position:fixed; top: 240px; z-index:+1000; } * html #fb{position:relative;} .fbtab{ height:140px; width:54px; float:left; cursor:pointer; background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcVd_Wtzib80IRXZKY1vgYW6L7_THXZrI8XUNNycmspwhG7j0xKEIWQ9DXVR7TMSCfU2PwSzf-1kExBdjQCX7-Zb5P8AHDxCH6yOoPxMJi0BMbWy_uuGaDEqag9dnaUEB3bXlH9udOY084/s1600/find-us-on-fb.gif') no-repeat; } .fbcontent{ float:left; border:2px solid #A5BD51; background:#F5F5F5; padding:10px; } </style> <script type="text/javascript"> function showHideFB(){ var fb = document.getElementById("fb"); var w = fb.offsetWidth; fb.opened ? moveFB(0, 40-w) : moveFB(20-w, 0); fb.opened = !fb.opened; } function moveFB(x0, xf){ var fb = document.getElementById("fb"); var dx = Math.abs(x0-xf) > 10 ? 5 : 1; var dir = xf>x0 ? 1 : -1; var x = x0 + dx * dir; fb.style.right = x.toString() + "px"; if(x0!=xf){setTimeout("moveFB("+x+", "+xf+")", 10);} } </script> <div id="fb"> <div class="fbtab" onclick="showHideFB()"> </div> <div class="fbcontent">
<--- Copy kode Iframe anda di sini--->
<br/><div style="text-align:right"> <a href="javascript:showHideFB()"> [tutup] </a> </div> </div> </div> <script type="text/javascript"> var fb = document.getElementById("fb"); fb.style.right = (40-fb.offsetWidth).toString() + "px"; fb.opened=true; </script>
Read more: http://www.sakahayang.com/2011/12/membuat-find-us-on-facebook-melayang.html#ixzz1jFlxTdqi
3. Save dan lihat hasilnya
Perhatian : Tulisan yang bertuliskan <--- Copy kode Iframe anda di sini---> hapus dulu lalu ganti dengan kode Iframe anda
Sumber : http://www.sakahayang.com
Related Post:

