Memasang Fans Page Facebook dengan Show Hide Widget

|
ScreenShot

Memasang Fans PageFacebook dengan Show Hide Widget adalah Meletakan Widget fans page facebook secara tersembunyi di blog. Disini fungsinya untuk menghemat ruang di blog kita karena masih banyak widget yang lebih penting untuk di pasang dari pada widget fans page facebook. Selain menghemat ruang blog, tampilan fans page facbook kalian akan enjadi lebih menarik dan membuat blog menjadi lebih ringan. Saya yakin kalian pasti suka.

Kalau kalian ingin mencobanya ikuti langkah-langkah berikut.

1. Login dengan akun blogger kalian, bisa klik disini
2. Masuk Rancangan/Design
3. Pilih Elemen Laman
4. Klik Add a Gadget/Tambah Gadget, dan pilih HTML/Javascript
5. Selanjutnya, Copy Paste kode berikut di kolom konten dibawah kolom judul, kolom judul dikosongkan saja


<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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKsiG8A5P2SxeUR-f2CajgNgc15jq4qCbsOQSEDni7TMJFAzCT5q341nXduruop61_NHMiMQ4ERgmmIoSPJKmloxAk-U0i3z8dv2lNjDhXiNs60-wc77jNEUPz0cAjcA-me-WZ-nJu3AEW/)#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 Fans Page Facebook Kalian Disini

<div style="text-align: right;">
<a href="javascript:showHideFL()">
[Tutup]
</a></div>
<font size="2"><a href="http://sakawku.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>


6. Ganti Kode Widget Fans Page Facebook Kalian Disini dengan kode fans page facebook kalian.
7. Klik Simpan/Save
9. Terakhir, Masih pada "Elemen Laman" klik lagi Tambah Gadget>>Pilih HTML/JavaScript, Kemudian copy paste-kan kode berikut ini dikolom konten di bawah kolom judul, saya ingatkan lagi kosongkan kolom judul agar widget ini tidak terlihat ditempat kita menyimpannya.

<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>

10. Simpan/Save dan lihat hasilnya, he keren kan??
Untuk melihat demonya join disini klik pada logo facebook sebelah kanan blog ini rancu he namanya juga blog buat testing

Semoga bermanfaat dan semoga kalian senang

Baca juga Blogger Tutorial lainnya



12 komentar:

asfa blog said...

maaf bos,mau minta tolong bos,kalau chatbox nya seperti punya agan yg di blog ini gimana caranya gan,kayanya lebih profesional hehe,mohon arahanya gan,thanks sebelumnya

Anonymous said...

@asfa blog, agan ganti kode warna biru dengan kode chatbox agan. Terus pasang kode dibawah ini pada link menu agan

javascript:showHideFL()

kucob@berbagi said...

mantaf...siip gan..

Anonymous said...

@kucoba@berbagi, Thanks gan

Alan Hendrawan said...

Terima kasih banyak gan, langsung saya coba dan sudah jadi. Bisa anda liat disini http://thephoto-zone.blogspot.com/

Anonymous said...

@Alan, sama-sama gan alhamdulillah okeh

TUTORIAL HARIS KHAN said...

mantap...............

Anonymous said...

@TUTORIAL HARIS KHAN, Thanks

Jane Doe said...

nah sob! kalau mau pasang likebox! namun tombolnya ada pada teks di menu bawah header!

ibarat cbox sobat tuh! gmn sob!
share dong....

Anonymous said...

@Ilham, sobat tinggal taruh kode dibawah ini, pada URL menunya.

javascript:showHideFL()

Said Muhammad Arief Budiansyah said...

ketahuan ada autolike nya

Gusari bethan said...

Assalamualaikum.
Numpang tanya sob, saya coba di cbox tapi warnanya tetap aja transparans , gmana solusinya sob. Terpaksa saya sembunyikan, untuk sementara sya pakai yang lama (transparans). Pencerahannya di tunggu sob, semoga Adsensenya kembali pulih.

Post a Comment

Silahkan kalian berkomentar, namun tetap jaga kesopanan dengan tidak melakukan komentar spam. Saya Lagi Bermasalah Dengan Adsense, Saya izin Vakum Ngeblog Dulu Sobat Buat Nyari Solusi!!

Related Posts Plugin for WordPress, Blogger...