cara membuat Like Box Facebook, twitter, blogger melayang
Untuk dapat mempraktekannya terlebih dahulu anda harus sudah terdaftar dan mendapatkan kode Facebook, twitter serta blogger kalian terlebih dahulu. Bagaimana tertartik untuk mempraktekannya? berikut cara memasang widget facebook like box, twitter, blogger melayang sekaligus melayang pada blog:
Cara Membuat widget Like Box Facebook, Twitter, Blogger Melayang :
- Login ke dashboard blogger anda.
- Pilih Rancangan > Elemen Laman > Add Gadget (HTML/Javascript).\
- Copy script widget dibawah ini dan paste pada gadget.
Melayang tersembunyi
<style type="text/css">
.barrightfacebook{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbd5zO6ANdXXs4LERCrIrm_nc-yTdEDjzmzQib2gUU2C0eVf8E9fFOspOaWEQFuelcwkygdBDpL4hSc0REdk4VROq8-pnWkL-7zjqEI0sPQWtOiq35V0TKzNFESJ6aU6LZTGUAWDVNp3nG/');background-repeat:no-repeat;width:39px;height:159px;position:fixed;right:0px;top:370px; z-index:1000;}
.barrightfacebookc{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMyEfOuLP3qVCxXxllfDBD6_T7cXMrfhILWpfSBp4kv7_hjafQbHS_Bbb7Gn45SIa3Qpf-sdrrmwEDsiMhBMVAmqkNwVVH9fTBgOS6hbXp5sheOzZneVATjezBvEi4Oly8bJrPvegP7G2o/');background-repeat:no-repeat;width:288px;height:345px;position:fixed;right:0px;top:185px; z-index:1100;}
.barcontefacebook{margin:5px 0 0 47px}
</style>
<div class="barrightfacebook" onmouseover="this.className='barrightfacebookc'" onmouseout="this.className='barrightfacebook'">
<div class="barcontefacebook">
<!-- Begin Facebook -->
CONTENT FACEBOOK HERE
<!-- End Facebook -->
</div>
</div>
Melayang sebelah kiri
<script type="text/javascript"><!--
var persistclose=0
var startX = 100
var startY = 100
var verticalpos="fromtop"
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>
<style type="text/css"><!--
#topbar{position:absolute;width: 340px;visibility: hidden;z-index: 100;border: 1px solid #bdccdc;padding: 5px; background-color: #fff; -moz-border-radius:5px; font: 11px Tahoma, arial, Verdana, sans-serif; line-height:16px;}
.tolbarclose {cursor:default;}
--></style>
<div id="topbar">
<div class="iklankotak1" style="padding:0 0 5px 5px;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td style="padding:5px 0 5px 3px;" valign="top" width="50%">
<span style="font-size:14px; font-weight:bold;">Welcome!</span>
</td>
<td align="right" style="padding:0;" valign="top" width="50%">
<a class="tolbarclose" href="#" onclick="closebar(); return false" rel="nofollow"><img alt="close" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPxuM7EJRIey5CM-nTkG_OC9bXL7CowjP5psuK7VQh-X-VUZsc3bNu16A6rGta7bWEiP8jye3jttghrMD0tS00YHKeBFOd0KtkATyjSgGhKDQlc2Vtijq9r_3QFWQKx8nFNbclf4z_Ji0/?imgmax=800" /></a>
</td>
</tr>
<tr>
<td colspan="2" valign="top">
<!-- Isi Widget melayang -->
Isikan Kode Anda
<!-- Isi Widget melayang -->
</td></tr></table></div>
</div>
Combine blogger, facebook, twitter
<style type="text/css">
.barrightblogger{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAoK9qoaI8CT6BdMjjnH-6-dijJHHfNp7upeSowyw4_EzrluLz2jKtnOZXrpZAn71oiBdwB6kaiK3-dWvny-bnwra6qoRz0uZMf5V6XXZmnzndVjQ8wQ9HkiCQvmBPgtYoxiDUyxe1hCJc/');background-repeat:no-repeat;width:39px;height:159px;position:fixed;right:0px;top:50px; z-index:1000;}
.barrightbloggerc{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBHGZPe7lxM7nkHSEkkp9ZLQ6AJk8dXe0LcfOnWEbCJghlLkikHVMcf7bOsh2IjYRn5ixXyLafOZRrG6gzhAiefpicxvUHgpojoizdOrzJkqU95Cq3ubPAlimDMMdSXVxnxSzdkKBX78Lt/');background-repeat:no-repeat;width:288px;height:345px;position:fixed;right:0px;top:50px; z-index:1100;}
.barconteblogger{margin:5px 0 0 47px}
.barrighttwitter{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLwigZhX2VhayHrQzjyLCQxzyM6R40OHbgpDCbTWY1JDqe6ZRjgcHh-AW3vbX9Wj-S7aWgy9gP0W_9-7SFbpgDUCahC90KE5OZIo9xb8jC3Yvrl4NBZGQgCE8KviRrftrUcgRikhqHLEQd/');background-repeat:no-repeat;width:39px;height:159px;position:fixed;right:0px;top:210px;z-index:1000;}
.barrighttwitterc{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2biU79GjZuVoKSlKQ_4cD-PYu1cL6dz69sFNQmwYsnrLY6OBAIXrAMQPCchqWD4bh_ihvvY1ngzI0rNIK6lRkWLCq6p5Ne9ktJGgUI_6xSLyUARjIvklOM9ZdqYTOHcZfC33lL0lGtv6F/');background-repeat:no-repeat;width:288px;height:345px;position:fixed;right:0px;top:120px; z-index:1100;}
.barcontetwitter{margin:5px 0 0 47px}
.barrightfacebook{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbd5zO6ANdXXs4LERCrIrm_nc-yTdEDjzmzQib2gUU2C0eVf8E9fFOspOaWEQFuelcwkygdBDpL4hSc0REdk4VROq8-pnWkL-7zjqEI0sPQWtOiq35V0TKzNFESJ6aU6LZTGUAWDVNp3nG/');background-repeat:no-repeat;width:39px;height:159px;position:fixed;right:0px;top:370px; z-index:1000;}
.barrightfacebookc{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMyEfOuLP3qVCxXxllfDBD6_T7cXMrfhILWpfSBp4kv7_hjafQbHS_Bbb7Gn45SIa3Qpf-sdrrmwEDsiMhBMVAmqkNwVVH9fTBgOS6hbXp5sheOzZneVATjezBvEi4Oly8bJrPvegP7G2o/');background-repeat:no-repeat;width:288px;height:345px;position:fixed;right:0px;top:185px; z-index:1100;}
.barcontefacebook{margin:5px 0 0 47px}
</style>
<div class="barrightblogger" onmouseover="this.className='barrightbloggerc'" onmouseout="this.className='barrightblogger'">
<div class="barconteblogger">
CONTENT BLOGGER HERE
</div>
</div>
<div class="barrighttwitter" onmouseover="this.className='barrighttwitterc'" onmouseout="this.className='barrighttwitter'">
<div class="barcontetwitter">
CONTENT TWITTER HERE
</div>
</div>
<div class="barrightfacebook" onmouseover="this.className='barrightfacebookc'" onmouseout="this.className='barrightfacebook'">
<div class="barcontefacebook">
CONTENT FACEBOOK HERE
</div>
</div>
- Ganti tulisan CONTENT .......... HERE dengan kode Facebook Like Box, TWITTER. BLOGGER yang sudah siapkan sebelum.
- Jika pada template anda belum terdapat javascript dari Facebook, maka copy saja javascript di bawah ini dan letakkan tepat di atas kode </head> pada template supaya widget Like Box Facebook, Twitter, Blogger Melayang ini bisa berfungsi.
<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/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/>
