Cara Membuat Slider Like Box Facebook Di Blogger Dengan CSS3- Sosial media adalah salah satu ladang yang dapat mendatangkan pengunjung ke blog kita. Dalam hal ini, kita membicarakan Facebook. Kita dapat membuat pengunjung melihat update postingan kita lewat Facebook tanpa mengunjungi blog kita agar lebih efisien. Banyak cara yang dapat kita gunakan untuk mempromosikan fanspage Facebook blog kita, salah satunya dengan membuat widget slider like box ini.
Banyak sekali tutorial bertebaran mengenai slider like box, tapi saya melihat tutorial yang diberikan masih menggunakan kode yang di hosting dari luar, yaitu IFrame. IFrame sangat buruk untuk SEO, dan sangat tidak dianjurkan digunakan apabila memang tidak diperlukan. Sekarang, kita akan membuat slider like box Facebook tanpa menggunakan IFrame agar tidak merusak SEO blog kita, malah kita akan menggunakan CSS3.
Cara Membuat Slider Like Box Facebook Dengan CSS3:
1. Kunjungi Dasbor > Template > Edit HTML.
3. Pastikan blog Anda sudah terpasang jQuery. Jika belum, silakan tambahkan script jQuery berikut tepat diatas </head>.
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'></script>
2. Cari kode ]]></b:skin>. Jika sudah ketemu, letakkan CSS berikut tepat diatasnya.
.socialbox{
position:fixed;
top:10%;
right:-286px;
height:250px;
width:285px;
background:#efefef;
border:1px solid #bbb;
border-right:0;
transition:all 400ms ease-in-out;
border-radius:0 0 0 3px;
}
.fbicon-box{
width:30px;
height:35px;
position:absolute;
top:-1px;
left:-30px;
background:#405D9B;
border-radius:3px 0 0 3px;
color:#fff;
font-family:Arial;
font-size:30px;
font-weight:700;
text-align:center;
padding-top:2px;
}
.socialbox:hover{
right:0;
}
3. Cari kode
<body>. Letakkan JavaScript SDK Facebook berikut ini tepat dibawahnya:
<div id='fb-root'/>
<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.async=true;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
4. Cari kode
</body>. Letakkan kode berikut tepat diatasnya.
<div class="socialbox">
<div class="fbicon-box">f</div>
<div class="fb-like-box" data-href="https://www.facebook.com/AfiqWeb" data-width="300" data-height="240" data-show-faces="true" data-header="false" data-stream="false" data-show-border="false"></div>
</div>
Ganti
AfiqWeb dengan ID fanspage blog Anda.
5. Simpan template.
Sampai disini Anda telah berhasil memasang slider like box. Untuk mengujinya, coba Anda buka blog Anda lalu perhatikan pada sebelah sidebar kanan. Akan ada tombol berhuruf "F" berwarna biru dengan background putih yang apabila didekatkan kursor mouse akan menampilkan like box.
Semoga bermanfaat...
