Cara Membuat Facebook Like box Widget Ke Blog

Kembali lagi saya ingin membagikan sebuah widget yang keren. Kali ini tentang widget facebook like box yang bisa kamu pasang di sidebar blog kamu. Widget ini penampilannya berbeda dengan widget lie facebook yang biasanya digunakan pada blog-blog.

Untuk membuat blog anda menjadi keren, salah satunya adalah menambahkan widget yang di cuztomized. Jadi penampilan blog anda akan berbeda dengan yang lain.

Cara Membuat Facebook Like Box Widget Pada Blogger

Sebenarnya untuk membuat widget ini tidaklah sulit, walaupun anda adalah seorang blogger pumula. Cukup kamu ikuti langkah-langkah di bawah ini saya yakin kamu pasti akan berhasil.

Langkah 1 : Masuk ke blogger >> Dashboard >> Tata Letak

Langkah 2 : Pilih Add Gadget >> HTML Javascript

Langkah 3 : Copy kode di bawah ini kemudian masukkan ke kotak yang muncul :

<style>.spiceFB {
width: 285px;height: 150px;border-radius: 3px;
position: relative;
background-color:#f4f4f4;
padding:5px 10px 15px 0;
}
.spiceFB, .spiceFB:before, .spiceFB:after {
background: #f4f4f4;
border: 1px solid #ccc;
}
.spiceFB:before, .spiceFB:after {
content: "";
position: absolute;
bottom: -3px;
left: 2px;
right: 2px;
height: 1px;
border-top: none;
}
.spiceFB:after {
left: 4px;
right: 4px;
bottom: -5px;
box-shadow: 0 0 2px #ccc;
}
</style>
<div class="spiceFB">
<div style="height:155px;overflow:hidden">
<fb:like-box href="https://www.facebook.com/bloggerkampusperjuangan" data-width="300" data-height="179" data-show-faces="true" data-border-color="#f4f4f4" data-stream="false" data-header="false" class=" fb_iframe_widget "><span><iframe id="f5741c08" name="fdd6ca2ec" scrolling="no" style="border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; overflow-x: hidden; overflow-y: hidden; height: 179px; width: 300px; " class="fb_ltr" src="http://www.facebook.com/plugins/likebox.php?border_color=%23f4f4f4&channel=https%3A%2F%2Fs-static.ak.fbcdn.net%2Fconnect%2Fxd_proxy.php%23cb%3Df2babfba84%26origin%3Dhttp%253A%252F%252Fwww.cofeemix.com%252Ff1ae6f85bc%26relation%3Dparent.parent%26transport%3Dpostmessage&colorscheme=light&header=false&height=179&href=https%3A%2F%2
Fwww.facebook.com%2Fbloggerkampusperjuangan&locale=en_US&sdk=joey&show_faces=true&stream=false&width=300"></iframe></span></fb:like-box>
</div>
</div>
<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/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>

Langkah 4 : Simpan

Sampai kamu menekan tombol simpan, maka kamu telah berhasil untuk membuat widget tersebut. Silahkan lihat dulu hasilnya. Nah, kalau memang benar-benar berhasil, maka kamu bisa melakukan customize dengan mengikuti keterangan di bawah ini :

*) width: 285px; kamu bisa merubah lebarnya dengan mengganti angka 285 (dalam pixel)
*) height: 150px; kamu bisa merubah tingginya dengan mengganti angka 150 (dalam pixel)
*) Ganti bloggerkampusperjuangan dengan halaman facebook kamu.

Post Tags:

social widget

Jillur Rahman

I'm Jillur Rahman. A full time web designer. I enjoy to make modern template. I love create blogger template and write about web design, blogger. Now I'm working with Themeforest. You can buy our templates from Themeforest.

Website: http://masala-jr.blogspot.com/