saya bingung dengan kondisi blog saya dengan widget widget yang amburadul dan tidak signifikan, jadi saya pun mulai mencarikan tips jitu untuk memperindah tampilan blog saya, yaitu dengan membuat widget menempel di dinding blog..sehingga pengunjung pun lebih menikmati di saat membaca artikel di blog.
setelah saya tanya kepada mbah google. saya dapatkan script bagus dari blog www.sakahayang.com, dengan tampilan widget seperti ini.
nah, jika agan mau memasang widget seperti ini, agan boleh copas script di bawah ini
.
<!-----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/AVvXsEgoVCmqC6kYpeCcS2Z-0u24j0Bg76co23fJK-nRKhM6m91yw5gSYlSrTZpRfu-eGGbJbw_AE1M-AztX2npRPDGAvKokw-zXmx8iWAD2tOcCH3vcQP5bYqYo3dl1t1W2kAbCzwiqg71iLino/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/AVvXsEgoVCmqC6kYpeCcS2Z-0u24j0Bg76co23fJK-nRKhM6m91yw5gSYlSrTZpRfu-eGGbJbw_AE1M-AztX2npRPDGAvKokw-zXmx8iWAD2tOcCH3vcQP5bYqYo3dl1t1W2kAbCzwiqg71iLino/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">
<div class="fb-like-box" data-href="https://www.facebook.com/pages/irakbuzz/135032516582000 " data-width="349" data-height='335' data-show-faces="true" data-stream="false" data-header="true"></div>
<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>
ganti kode yang berwarna merah dengan alamat fan page anda !!! caranya tau kan?? pertama buka blogger anda, terus klik rancangan, klik add gadget, pilih html/ javascript, trus klik simpan !!!.
nah, setelah itu buka edit HTML blog sobat, dan centang expand template widget, dan cari kode ini dengan menekan control F atau juga bisa dengan menekan tombol f3 pada keyboard anda.
<html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
copas code ini xmlns:fb='https://www.facebook.com/2008/fbml di bawah kode di atas, hingga menjadi seperti ini.
<html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'xmlns:fb='https://www.facebook.com/2008/fbml'>
setelah itu cari code <data:post.body/> lalu copas code di bawah ini tepat di atas code tersebut.
<div>
<b:if cond='data:post.isFirstPost'>
<script>(function(d){
var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));</script>
</b:if>
</div>
<b:if cond='data:post.isFirstPost'>
<script>(function(d){
var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));</script>
</b:if>
</div>
dan klik simpan. dan lihat hasilnya di blog sobat !!!
0 komentar:
Posting Komentar