Cara Menampilkan Halaman FACEBOOK Yang melayang Pada Blogger

Mungkin artikel ini sudah sering kali anda lihat pada tutorial di blogger lainnya, namun bagi anda yang masih mencari - cari persamaan tutorial ini atau anda masih awam yang sedang membutuhkan widget tambahan penghias blogger, maka saya bagikan tutorial turun menurun ini pada sobat.

Oh ya, script ini sedikit saya modifikasi dan tidak mengandung iframe sehingga kualitas SEO pada template blog anda tidak berkurang dan tetap maksimal.

Tidak perlu kelamaan basa basinya, kita langsung praktek saja:
1). Silakan Login terlebih dahulu ke akun blog milik anda
2). Kemudian pilih Tata Letak
3). Kemudian Klik Tambahkan Gadget
4). Kemudian Pilih HTML/Javascript
5). Silakan Copy Kode di bawah ini dan pastekan di HTML/Javascript tadi.

<style type='text/css'>
/* Message Box */
#box-message {
position:fixed !important;
position:absolute;
top:-1000px;
left:50%;
margin:0px 0px 0px -182px;
width:300px;
height:auto;
padding:16px;
background:#fff;
font:normal Dosis, Georgia, Serif;
color:#111;
border:2px solid #333;
-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
}
#box-message a.close {
position:absolute;
top:-10px;
right:-10px;
background:#fff;
font:bold 16px Arial, Sans-Serif;
text-decoration:none;
line-height:22px;
width:22px;
text-align:center;
color:#111;
border:2px solid #333;
-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-webkit-border-radius:22px;
-moz-border-radius:22px;
border-radius:22px;
cursor:pointer;
}
#twitterx {
background: #EEF9FD;
padding: 10px;
text-align:center;
border: 1px solid #C7DBE2;
border-top: 0;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type='text/javascript'>
$(window).bind("load", function() {
// Animate Top Value When Page Loaded Completed
$('#box-message').animate({top:"50px"}, 1000);
// Remove Mailbox When Close Button On Click
$('a.close').click(function() {
$(this).parent().fadeOut();
return false;
});
});
</script>
<div id='box-message'>
<!-- HTML Start -->
<center><a class="murub"><b>Jangan Lupa di "LIKE" Ya Sobat</b></a></center>
<center>
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like-box href="https://www.facebook.com/sk.onehot" width="292" show_faces="true" border_color="" stream="false" header="true">
</fb:like-box></center>
<!-- HTML End -->
<br/>
<center>
<div class="fb-like" width="450" layout="button_count" action="recommend" faces="false" send="true"></div>
<br/>
<em>Powered By:</em>
<br/>
<a href="http://www.cosoft-intimedia.com/" target="_blank"><img alt="COSOFT-INTIMEDIA | SOFTWARE APLIKASI BISNIS" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpSYdNyPkUbDdHA87jQFWmLOYbeW0Iit9uhemesuy3sxJnSCPfxNG0ueflpRcY7SMI9VByLqJ6F98BWDrn1U87x1cJgORqmsCjS4iA1GUT9JVb1sy6xdS2ZMWXAlRLv_Pnq2RN4SGTTLpy/s200/Merk-Cosoft-Intimedia.png" /></a>
</center>

<a class='close' href='#'>&times;</a>
</div>

6). Simpan/save ! dan Selesai


Keterangan:
Silakan sesuaikan yang saya tandai dengan warna

• Jangan Lupa di "LIKE" Ya Sobat == Silakan ganti dengan kalimat yang anda inginkan
• width="292" == Ukuran lebar kotak "LIKE" pada Facebook, silakan anda rubah
• sk.onehot == Silakan ganti dengan akun fanpage anda

Selamat Mencoba


©~~~~~~~~~
Sumber : Berbagai Sumber
URL : -
Editor : Agung Riyanto
Post : AR
©~~~~~~~~~