Membuat Fan Page Melayang di Blog

Sebenarnya sudah banyak yang membahas tentang bagaimana cara membuat fan page Facebook melayang di blog. Tapi cara saya kali ini agak berbeda, karena icon melayang di sidebar tetapi ketika diklik tombolnya, slide box facebook muncul dibagian atas blog. Contohnya seperti screenshot dibawah ini :

Bagi anda yang ingin membuatnya, ikuti langkah-langkah berikut ini :

1. Masuk ke Dashboard, pilih Tata letak -> Tambah Gadget
2. Kemudian pilih HTML/JavaScript
3. Lalu pasang kode di bawah ini pada kolom HTML/JavaScript

<style type="text/css">
#at{
position:fixed;
right:450px;
z-index:+1000;
}
* html #at{position:relative;}
.attab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url();
}
.atcontent{
float:left;
border:2px solid #999;
background: #ffffff;
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
-moz-border-radius-bottomleft:15px;
-moz-border-radius-bottomright:15px;
padding:10px;
-moz-box-shadow: 0px 2px 5px 0px #f8f9b9;
}
</style>
<script type="text/javascript">
function showHideAT(){
var at = document.getElementById("at");
var w = at.offsetWidth;
at.opened ? moveAT(0, -200-w) : moveAT(20-w, 0);
at.opened = !at.opened;
}
function moveAT(x0, xf){
var at = document.getElementById("at");
var dx = Math.abs(x0-xf) > 25 ? 35 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
at.style.top = x.toString() + "px";
if(x0!=xf){setTimeout("moveAT("+x+", "+xf+")", 10);}
}
</script>
<div id="at">
<div class="attab" onclick="showHideAT()"> </div>
<div class="atcontent">
<div align="left">
<div style="background:#ffffff;">

---------- masukkan script anda disini ------------

</div>
</div>
<div align="right"><a href="javascript:void(0);" onclick="showHideAT()"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglyUqS7PJWENesUDdJaJqtXgIWPw_PKTJhmZ1i8hp5tLxhLuQdHHlWgewYGTm6wTc406cTKLxgog7TTb0H6yesXm2ezPufyE1JWfyo3B4mLsDUt8KWct0xz6mwygCCdhRe6oLx2SmZNgYl/s128/Close-32.png" alt="close" title="Click here to Close Box" /></a></div>
</div></div>
<script type="text/javascript">
var at = document.getElementById("at");
at.style.top = (-200-at.offsetWidth).toString() + "px";
</script>
<div style='display:scroll; position:fixed; top:50%; right:0px;'><a href="javascript:void(0);"onclick="showHideAT()"/><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDLLB1MlROkXp7qSgCKFpgnxFYy8rPKvsXEO7g7AGKwPqgjrB3Clunj-Kw84RrZkjY603QEXa6nhcpkVR2zJGej-3YgcNDOlcE4QSt5PzV-i8MIkcT1tnDdobbeslBDtJTpRRIKdofhw0O/s128/Drink-Facebook.png"  /></a>
</div>

4. Kemudian Simpan dan lihat hasilnya.

Jika anda ingin memasang tombol icon facebook di sebelah kiri, ganti right dengan left

Related Post :

tutorial

• Tips SEO untuk Pemula
• Cara Menghapus Link Aktif di Kotak Komentar
• Mengatasi Pesan Komentar yang Pindah ke Bawah
• Membuat Menu Tab View Tanpa Edit HTML
• Menampilkan Foto Profil pada Komentar Blog
• Membuat Semua Label Breadcrumbs Terindex Google
• Cara Agar Breadcrumbs Terindex Google bag.2
• Pagerank bulan November 2012
• Cara Membuat Tombol Back to Top
• Membuat Fan Page Melayang di Blog ver.2

tutorial blog

• Cara Menghapus Link Aktif di Kotak Komentar
• Mengatasi Pesan Komentar yang Pindah ke Bawah
• Membuat Menu Tab View Tanpa Edit HTML
• Menampilkan Foto Profil pada Komentar Blog
• Membuat Semua Label Breadcrumbs Terindex Google
• Cara Agar Breadcrumbs Terindex Google bag.2
• Pagerank bulan November 2012
• Cara Membuat Tombol Back to Top
• Membuat Fan Page Melayang di Blog ver.2
• Cara Membuat Effect Kembang Api di Blog