Cara Membuat Floating Facebook dan G+

Ardi21_ansyah

Blogger, Widget

Senin, 04 Agustus 2014

Belum ada komentar

Kali ini saya akan memberitahu Cara Membuat Floating Facebook dan G+, banyak sekali cara untuk
membuat Floating ini, pada tutorial sebelumnya saya pernah membuat Pop UP Facebook. Floating Facebook
ini hampir sama dengan Pop UP Facebook namu bedanya kalau Pop UP Facebook munculnya tiba-tiba,
sedangkan Floating Facebook munculnya ketika disentuh cursor.

Pada dasarnya Pop UP Facebook muncul dari Atas atau dari Bawah,
sedangkan Floating Facebook biasanya ada di pinggir

Baiklah apabila sobat tertarik untuk mencobanya silahkan ikuti langkah berikut ini :

Demo

>> Login ke Blogger <<

>>  Pilih Template <<

>>  Klik "Edit HTML" <<

>> Setelah itu masukan script dibawah ini di atas kode ]]></b:skin> <<

/* CSS Facebook, G+ by Blogger Android 21™ */
.socialbox{position:fixed;top:12%;right:-286px;height:250px;width:285px;background:#fff;border-right:0;transition:all 400ms ease-in-out;}
.fbicon-box{width:30px;height:28px;position:absolute;top:-1px;left:-30px;
background:#fff;color:#444;font-family:'Oswald';
font-size:25px;font-weight:400;text-align:center;padding-top:2px;opacity:0.8;}
.socialbox:hover{right:0;z-index:2;opacity:1;}
.socialbox2{position:fixed;top:17%;right:-279px;height:230px;width:258px;background:#fff;transition:all 400ms ease-in-out;padding:10px;}
.gpicon-box{width:30px;height:28px;position:absolute;top:-1px;left:-30px;
background:#fff;color:#444;font-family:'Oswald';
font-size:22px;font-weight:400;text-align:center;padding-top:2px;opacity:0.8;}
.socialbox2:hover, .socialbox2:active{right:0;opacity:1;}

>> Lalu klik Simpan Template <<

>> Setelah itu, Pilih Tata Letak <<

>>  Tambahkan Widget baru dengan mengklick "Add Gadget" <<

>> Setelah itu pilih HTML/Javascript <<

>> Copy kode script dibawah ini dan pastekan kedalam Widget <<

<div class="socialbox">
<div class="fbicon-box">f</div>
<div class="fb-like-box" data-header="false" data-height="240" data-href="https://www.facebook.com/filannime" data-show-border="false" data-show-faces="true" data-stream="false" data-width="300">
</div>
</div>
<div class="socialbox2">
<div class="gpicon-box">G</div>
<div class="g-plus" data-action="followers" data-height="240" data-href="https://plus.google.com/113354583773127948499" data-source="blogger:blog:followers" data-width="260">
</div>
</div>

>> Simpan dan lihatlah hasilnya <<

QUOTES:

Kalian tinggal mengganti link ini https://www.facebook.com/filannime

dengan link Fanspage Facebook kalian.

Lau ganti link ini https://plus.google.com/113354583773127948499 dengan link G+ kalian

Semoga tutorial ini bermanfaat bagi kalian ^_^