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/AVvXsEiw8Ia8mcC-U_ZYC1gA86lQ4bm21kSEZQcxI0bkQs9tf3FpKzn2dggutMwTacFNYWnf4g4pQ8FLk7E_9gGvHCd8ohMmaF92TLmW4qcZX2FWSV2Kx8KSOvf9Gjg6g8sdQI9oPyS28lRF6AC3/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/AVvXsEiw8Ia8mcC-U_ZYC1gA86lQ4bm21kSEZQcxI0bkQs9tf3FpKzn2dggutMwTacFNYWnf4g4pQ8FLk7E_9gGvHCd8ohMmaF92TLmW4qcZX2FWSV2Kx8KSOvf9Gjg6g8sdQI9oPyS28lRF6AC3/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 !!!
+ komentar + 7 komentar
Gan gmna cara buat fans page, twitter, follow blog melayang seperti punya agan..? kiban cara nyan..? Kirim kode HTMLnya ke alamat email saya ya gan..? memed_secagitu@yahoo.co.id
Nanti jadinya sepeeti apa gan kok keterangan di artikel kurang jelas. . .
Trz script yg di atas itu digabung atau dipisah??
Maaf sy kurang paham.
code htmlnya bs agan dapat di akun twitter agan,,cari aja settingan dr twitter ke web,,, untuk jelasnya tanya mbah google aja,,lebih gampah,,hhehehe,,
seperti gambar di atas,,, untuk pemasangannya langsung aja ikutin intruksi di atas,,tinggal di tambah tambah ja gan :)
post and your article is very interesting, thanks for your information, I am waiting for your next posts and articles and will visit again ...
mantabss bro.. :D tapi berat gk ya kalo floating kaya gitu???
blogwalking,,,,info keren salamkenal gan :)
Post a Comment