Cara memasang widget [Liked Box] fanspage facebook melayang di sisi kanan bawah blog

Baca Juga

Menjadi sebuah blogger kita memang dituntut menjadi seorang yang kreatif apalagi untuk pemasangan sebuah widget tertentu pada blog kita, misal kita memasang widget facebook atau fanspage facebook dari blog kita.

Karena dengan memasang fanspage facebook yang berkaitan dengan blog kita akan menguntungkan blog kita jika fanspage facebook kita memiliki ratusan bahkan hingga ribuan like, tentunya jika kita sekali saja share artikel dari blog kita ke facebook pasti akan membuka peluang mendatangkan banyak pengunjung.

Tapi untuk mendapatkan like tersebut tidaklah mudah, apalagi jika kita memasang fanspage facebook kita pada blog dengan cara yang salah.

Mungkin cara yang saya bagikan  kali ini bisa jadi alternatif buat sobat yang ingin mendapatkan banyak like untuk fanspage facebook dengan memasang widget dengan tampilan yang sangat keren dan tentunya sangat responsive jika sobat pasang.

Jika untuk melihat demo widgetnya saya rasa sobat sudah bisa melihatnya secara langsung di blog ini juga, karena sudah saya pasang.

Nah, bagaimana untuk cara pemasangannya. Simak caranya berikut ini.

Cara memasang widget fanspage facebook melayang di sisi kanan bawah blog

#1 Langsung saja sobat login ke blogger.com

#2 Buka menu Tata Letak

#3 Pilih Add Gadget/Tambahkan Gadget, pilih gadget HTML/Javascript

#4 Copy kemudian Paste kode di bawah ini ke gadget HTML/Javascript yang baru sobat tambahkan

<style>
/*Fixed Facebook Like Box Seocips*/
.fb-btn-seocips {background:rgba(1, 0, 1, 0.2);margin:0;padding:0;text-align:center;position:fixed;bottom:1%;right:0.5%;z-index:9999;box-shadow:0 3px 4px #444;border:1px solid #ccc;display:block;-moz-animation:atas 10s;-webkit-animation:atas 10s;animation:atas 10s;}
.fb-btn-seocips {padding:5px ;color:#fff;font-size:120%;}
.fb-btn-seocips a:link, .fb-btn-seocips a:visited {color:#ffcc00;}
.fb-btn-seocips a:hover {color:#fff;}
.fb-btn-seocips2{background:rgba(1, 0, 1, 0.3);-moz-animation:kiri 15s;-webkit-animation:kiri 15s;animation:kiri 15s}
.fb-btn-seocips2 {padding:3px ;color:#fff;font-size:120%;}
@-webkit-keyframes atas{
from{transform:translate(0px, -2000px)}
to{transform:translate(0px,0px)}
}
@keyframes atas{
from{transform:translate(0px, -2000px)}
to{transform:translate(0px,0px)}
}
@-webkit-keyframes kiri{
from{transform:translate(-30000px, 0px);}
to{transform:translate(0px,0px);}
}
@keyframes kiri{
from{transform:translate(-30000px, 0px);}
to{transform:translate(0px,0px);}
}
</style>
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/id_ID/sdk.js#xfbml=1&version=v2.5&appId=1439296419615573";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-btn-seocips">
<div class="fb-btn-seocips2">
<div class="fb-page" data-href="https://www.facebook.com/iniblogfar26/" data-width="200" data-height="125" data-small-header="true" data-adapt-container-width="true" data-hide-cover="true" data-show-facepile="false" data-show-posts="false"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/iniblogfar26"><a href="https://www.facebook.com/iniblogfar26">www.blog-far.com</a></blockquote></div></div>
</div>
</div>

#5 Simpan dan lihat hasilnya.

Sobat bisa mengganti url https://www.facebook.com/iniblogfar26/ dengan url fanspage faceook sobat. Supaya nanti kalau di blog sobat yang keluar fanspage facebook sobat.

Nah, saya lupa sebelumnya bahwa kode ini pernah saya dapatkan dari blog seocips.com yang dulu menjadi tempat saya belajar ngeblog, walaupun blognya sudah dijual dan sekarang entah berubah menjadi apa? saya tidak tau.

Demikian dulu artikel yang bisa saya bagikan kali ini sobat. Sampai jumpa di artikel selanjutnya, sekian dan terima kasih.