Cara Memasang Widget Like Box Melayang Di Blog

By Adnanblaz | 4:03 AM 2 comments

Assalamu'alaikum Wr.Wb
Pada Hari Ini Saya akan Membagi Ilmu yang saya ketahui yaitu Cara Memasang Widget Like Box Melayang Di Blog. Widget Like Box Melayang di blog sudah tidak asing lagi, karena banyak Blogger yang memasang nya (Termasuk Blog Apik Ini :D ) . dan pada kesempatan ini saya akan memberitahu caranya.
Oke Langsung Saja, Ikuti langkah Berikut :


1. Login ke Blogger anda
2. Klik Tata Letak
3. Klik Tambah Gadget
4. Pilih HTML/Javascript
5. Copy Paste Script dibawah


<!-- Script Widget Like Box Facebook Melayang -->
<style type="text/css">
#topbar{
position:absolute;
padding-left:260px;
background-color: transparancy;
width: 300px;
visibility: hidden;
z-index: 100;
}
</style>
<script type="text/javascript">
var persistclose=0 //set to 0 or 1. 1 means once the bar is manually closed, it will remain closed for browser session
var startX = 30 //set x offset of bar in pixels
var startY = 5 //set y offset of bar in pixels
var verticalpos="fromtop" //enter "fromtop" or "frombottom"
function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}
function closebar(){
if (persistclose)
document.cookie="remainclosed=1"
document.getElementById("topbar").style.visibility="hidden"
}
function staticbar(){
barheight=document.getElementById("topbar").offsetHeight
var ns = (navigator.appName.indexOf("Netscape") != -1) || window.opera;
var d = document;
function ml(id){
var el=d.getElementById(id);
if (!persistclose || persistclose && get_cookie("remainclosed")=="")
el.style.visibility="visible"
if(d.layers)el.style=el;
el.sP=function(x,y){this.style.left=x+"px";this.style.top=y+"px";};
el.x = startX;
if (verticalpos=="fromtop")
el.y = startY;
else{
el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight;
el.y -= startY;
}
return el;
}
window.stayTopLeft=function(){
if (verticalpos=="fromtop"){
var pY = ns ? pageYOffset : iecompattest().scrollTop;
ftlObj.y += (pY + startY - ftlObj.y)/8;
}
else{
var pY = ns ? pageYOffset + innerHeight - barheight: iecompattest().scrollTop + iecompattest().clientHeight - barheight;
ftlObj.y += (pY - startY - ftlObj.y)/8;
}
ftlObj.sP(ftlObj.x, ftlObj.y);
setTimeout("stayTopLeft()", 10);
}
ftlObj = ml("topbar");
stayTopLeft();
}
if (window.addEventListener)
window.addEventListener("load", staticbar, false)
else if (window.attachEvent)
window.attachEvent("onload", staticbar)
else if (document.getElementById)
window.onload=staticbar
</script>
<br />
<div class="clear">
</div>
<div id="topbar">
<table border="1" bgcolor="FFFFFF">
<tr>
<td>
<div style="text-align: right;">
<a href="" onclick="closebar(); return false"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHd9YIM4EA_kouIZqtAKTHUuEVLGLRPPAfn4mmOYMwJzpXeBmg20HWgN0wbF0PH0e_ud3HLec1e8H-Xw-9WlY3Dmcdw9wK1l0WGEOAm4_fo3Cq-XS6UyEbqAbOVZRTo3ixcj9zgWKB7dvC/s1600/close3.png" /></a><blink>Jangan Lupa Klik Suka</blink></div>
<center>
<div style="background: #fff;">

<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FBloggerApik&amp;width=260&amp;height=290&amp;colorscheme=light&amp;show_faces=true&amp;border_color=grey&amp;stream=false&amp;header=true" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:260px; height:290px;" allowtransparency="true"></iframe>

</div>
</center></td>
</tr>
</table>
</div>
<!-- akhir -->

6. Klik Simpan
7. Klik Template
8. Klik Edit HTML
9. Cari Kode <body> (Biar Lebihh Cepat Tekan Ctrl + F)
10. Letak kan Script Berikut di bawah Kode <body>


div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/id_ID/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

11. Klik Simpan

Note : - Script yang warna Biru ganti dengan Link Fanspage Sobat Apik
           - %3A = : (titik dua)
           - %2F = / (Garis Miring )

Sekian Tutorial dari saya Semoga Bermanfaat ;)
SALAM SUKSES

Wassalamu'alaikum Wr. Wb
Related Items

2 comments: Leave Your Comments