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/AVvXsEiMUUL5RwD4-Vb7bPQm9YCAojSGDpajfA2aHLwbYIySBwtwC6yOCLdGTHwHCTFoIvVGhd6008uTRdUmwH6rRca3le-NQ-rA1h0Mhoyqph7Xaq4oE45t4W6RR0UiVbqRRPOVYvw3u27Z727d/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/AVvXsEiMUUL5RwD4-Vb7bPQm9YCAojSGDpajfA2aHLwbYIySBwtwC6yOCLdGTHwHCTFoIvVGhd6008uTRdUmwH6rRca3le-NQ-rA1h0Mhoyqph7Xaq4oE45t4W6RR0UiVbqRRPOVYvw3u27Z727d/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 comments:
Post a Comment