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.
0 komentar:
Posting Komentar
Silakan berkomentar sesuai dengan topik. Jangan menyisipkan link aktif pada komentar dan jangan sampai komentar Anda masuk komentar SPAM.
Jangan salahkan Saya bila komentar Anda dihapus !