Cara Membuat Kotak Twitter Melayang Pada Blogger

Widget Follow Twitter dengan posisi melayang dengan tombol close memang mempunyai keuntungan tersendiri buat para blogger. Kenapa? karena widget ini bisa menghemat tempat dan juga bisa cepat dilihat oleh pengunjung blog. 



Cara Pemasangan Pada Blog

Pemasangan widget kotak like melayang tidak harus mengedit HTML/CSS template blog,  tetapi cukup dengan membuat gadget baru dan mamasukkan kode script ke dalamnya. Untuk lebih jelasnya, perhatikan tutorial berikut.
  • Login ke blogger
  • Pilih Tata Letak > Tambah Gadget > HTML/Javascript
  • Copy dan pastekan kode di bawah ini dan masukkan kedalam gadget yang sobat buat tadi
<style type="text/css">
#topbar{position:absolute; padding-left:350px;padding-top:200px;background-color:transparancy;width: 300px;visibility: hidden;z-index: 100;}
</style>
<script type="text/javascript">
var persistclose=0,startX=30,startY=5,verticalpos="fromtop";function iecompattest(){return document.compatMode&&"BackCompat"!=document.compatMode?document.documentElement:document.body}function get_cookie(b){var b=b+"=",c="";0<document.cookie.length&&(offset=document.cookie.indexOf(b),-1!=offset&&(offset+=b.length,end=document.cookie.indexOf(";",offset),-1==end&&(end=document.cookie.length),c=unescape(document.cookie.substring(offset,end))));return c} function closebar(){persistclose&&(document.cookie="remainclosed=1");document.getElementById("topbar").style.visibility="hidden"} function staticbar(){barheight=document.getElementById("topbar").offsetHeight;var b=-1!=navigator.appName.indexOf("Netscape")||window.opera,c=document;window.stayTopLeft=function(){if("fromtop"==verticalpos){var a=b?pageYOffset:iecompattest().scrollTop;ftlObj.y+=(a+startY-ftlObj.y)/8}else a=b?pageYOffset+innerHeight-barheight:iecompattest().scrollTop+iecompattest().clientHeight-barheight,ftlObj.y+=(a-startY-ftlObj.y)/8;ftlObj.sP(ftlObj.x,ftlObj.y);setTimeout("stayTopLeft()",10)};var a=c.getElementById("topbar"); if(!persistclose||persistclose&&""==get_cookie("remainclosed"))a.style.visibility="visible";c.layers&&(a.style=a);a.sP=function(a,b){this.style.left=a+"px";this.style.top=b+"px"};a.x=startX;"fromtop"==verticalpos?a.y=startY:(a.y=b?pageYOffset+innerHeight:iecompattest().scrollTop+iecompattest().clientHeight,a.y-=startY);ftlObj=a;stayTopLeft()} window.addEventListener?window.addEventListener("load",staticbar,!1):window.attachEvent?window.attachEvent("onload",staticbar):document.getElementById&&(window.onload=staticbar);
</script>
<br />
<div class="clear">
</div>
<div id="topbar">
<table border="1" bgcolor="#fff">
<tr>
<td>
<div style="text-align: right;">
<a href="" onclick="closebar(); return false"><img src="http://2.bp.blogspot.com/-SFX6J7sIQhg/UMWgBuFEGeI/AAAAAAAABkg/wPXTR9CqS-0/s1600/close-1.gif" /></a></div>
<center>
<div style="background: #fff;">
<iframe name="fbfanIFrame_0" allowtransparency="true" src="http://s.moopz.com/connect.html?user=corneliusczn" class="FB_SERVER_IFRAME" style="width: 300px; height: 250px; border-style: none;" frameborder="0" scrolling="no"></iframe><script type="text/javascript">fanbox_init("corneliusczn");</script>
Mau Bikin Kaya Gini <a href="http://loker-blogger.blogspot.com/2013/05/cara-membuat-like-box-facebook-melayang.html" title="tutorial Blogger"/>KLIK Disini</a>
</div></center></td></tr></table></div>


  • Langkah selanjutnya, pilih simpan dan lihat hasilnya.
Nb* Tulisan biru diganti dengan twitter anda !!!
    Demikain tutorial tentang bagaimana cara membuat Twitter box melayang pada blog kali ini, terima kasih dan salam blogger...!!!


    Share this post
    • Share to Facebook
    • Share to Twitter
    • Share to Google+
    • Share to Stumble Upon
    • Share to Evernote
    • Share to Blogger
    • Share to Email
    • Share to Yahoo Messenger
    • More...