Memasang Fanspage Facebook dengan Show Hide Widget

Memasang Fanspage Facebook dengan Show Hide Widget - Fanspage facebook adalah sebuah halaman khusus layaknya blog yang menyediakan informasi yang beragam sesuai dengan keinginan pemiliknya, mulai dari perusahaan, pendidikan, layanan, produk fisik, tokoh masyarakat, komunitas dan masih banyak lainnya.

Apa manfaat Fanspage Facebook untuk Blog?
Selain untuk melakukan bisnis online seperti menyebarkan informasi mengenai sebuah produk yang akan dijual, agar bisa dilihat oleh banyak orang, Fanspage facebook juga bisa bermanfaat sebagai media share artikel sebuah blog baik secara otomatis maupun manual. Dengan melakukan share artikel blog ke halaman facebook, bukan tidak mungkin blog yang anda miliki akan mendapatkan pengunjung dari facebook. Jadi berusahalah mendapatkan Like untuk halaman facebook yang anda miliki. Semakin banyak like yang dimiliki halaman facebook, maka akan semakin banyak pula yang akan melihat postingan artikel yang anda share pada halaman facebook. Bagi anda yang belum memiliki Fanspage Facebook dan berniat untuk membuatnya, silahkan baca artikel berjudul Membuat dan Memasang Fanspage Facebook di Blog. Pada artikel tersebut dijelaskan cara membuat dan memasangnya pada widget blog.

Namun bagi blogger yang menggunakan template sederhana dan memiliki area sidebar dan footer yang terbatas sepertinya akan terlihat kurang menarik jika dipasang dengan cara biasa. Nah untuk itu, pada artikel kali ini saya akan share bagaimana memasang Fanspage Facebook dengan memanfaatkan fitur show hide di blog. Kotak fanspage facebook akan keluar dari sisi halaman blog yang anda tentukan dengan menekan sebuah tombol dan menekan tombol lagi jika anda ingin menyembunyikannya kembali. Berikut langkah-langkahnya.

Baca juga : Membuat Like Box FansPage Facebook Pop Up Melayang

Cara Memasang Fanspage Facebook dengan Show Hide Widget di Blog
Meletakan Widget fanspage facebook secara tersembunyi di blog berfungsi untuk menghemat ruang di blog. Selain menghemat ruang blog pada sidebar ataupun footer, tampilan fanspage facebook juga akan menjadi lebih menarik serta membuat loading blog menjadi lebih ringan.

1. Login ke akun blogger.
2. Pada menu blogger atau dashboard, pilih menu Tata letak.
3. Klik Tambahkan Gadget atau Add Widget.
4. Pilih HTML/JavaScript.
5. Letakkan kode berikut ke kolom konten.

<style type="text/css">
#fl{
position:fixed;
left:150px;
z-index:+1000;
}
* html #fl{position:relative;}
.flcontent{
float:left;
border:2px solid #676767;
background:url(http://lh3.ggpht.com/_yF0--u7KSSI/TKIlkEJwkEI/AAAAAAAAAtg/uFf3eLsXlyg/fire2.gif)#000000 repeat-x bottom center scroll;
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
-moz-border-radius-bottomleft:15px;
-moz-border-radius-bottomright:15px;
padding:10px;
}
</style>
<script type="text/javascript">
function showHideFL(){
var fl = document.getElementById("fl");
var w = fl.offsetWidth;
fl.opened ? moveFL(0, -100-w) : moveFL(20-w, 0);
fl.opened = !fl.opened;
}
function moveFL(x0, xf){
var fl = document.getElementById("fl");
var dx = Math.abs(x0-xf) > 25 ? 35 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
fl.style.bottom = x.toString() + "px";
if(x0!=xf){setTimeout("moveFL("+x+", "+xf+")", 10);}
}
</script>
<div id="fl">
<div class="fltab" onclick="showHideFL()"> </div>
<div class="flcontent">
Kode Widget Fanspage Facebook/Widget lain Anda Disini
<div style="text-align: right;">
<a href="javascript:showHideFL()">
[Tutup]
</a></div>
<font size="2"><a href="https://harmansh.blogspot.com"target=_blank"><div style="color: #444444;">
<span >By sakawku</span></div></a></font>
</div>
</div>
<script type="text/javascript">
var fl = document.getElementById("fl");
fl.style.bottom = (-100-fl.offsetWidth).toString() + "px";
</script>

Catatan :
- Ketikkan left, silahkan anda ganti dengan letak yang anda inginkan. Misalkan kanan, maka ganti dengan right.
- Kode Widget Fanspage Facebook/Widget lain Anda Disini, silahkan ganti dengan kode widget fanspage facebook anda atau widget yang lain seperti chat box.

6. Kemudian klik Simpan/Save.
7. Masih pada menu Tata letak, klik Tambahkan Gadget lagi untuk menambahkan gadget baru.
8. Pilih HTML/JavaScript.
9. Letakkan kode berikut ke kolom konten.

<a href="javascript:showHideFL()"/><img border="0" src="http://i1176.photobucket.com/albums/x335/b0_0ys/icon-facebook-black.png" alt="kode" title="Click for Open Like Box" style="display:scroll;position: fixed; top:180px;right:0px;cursor:pointer;style=" opacity:1;filter:alpha(opacity="100)&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.5;this.filters.alpha.opacity=50" ;" height="180px" width="40px" /></a>

Catatan :
Apabila anda ingin meletakkan tombol pada menu navigasi, copy paste kode berikut ini ke dalam link menu navigasi blog.

javascript:showHideFL()

10. Terakhir klik Simpan/Save

Dengan memanfaatkan fungsi show hide pada widget halaman fanspage facebook anda, maka tampilan minimalis blog yang dimiliki tetap akan terlihat minimalis karena halaman fanspage facebook tidak akan memakan space atau ruang di sidebar ataupun footer blog.

Demikian tutorial sederhana mengenai bagaimana memasang fanspage facebook dengan memanfaatkan fungsi show hide. Semoga bermanfaat and " Happy Blogging "

Related Posts :

Silahkan klik disini untuk berlangganan Artikel Gratis via email, Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di HARMANSYAH BLOG