Cara Membuat Like Box Facebook Disamping

Cara Membuat Like Box Facebook Disamping - Pengguna facebook kian bertambah banyak, hal ini memungkinkan kita para blogger untuk mempromosikan blog melalui sosial media facebook ini. Bagi yang sudah memiliki fans page di facebook pasti sebagian besar para blogger sudah memasang like box yang sudah disediakan oleh facebook.

Nah tampilan like box dari facebook ini pun sudah menarik menurut saya. Tetapi mungkin ada sobat blogger yang kebingungan mencari tempat untuk memasang like box fans page facebooknya karena di blognya sudah banyak terpasang widget. Tenang sob, sobat bisa menyembunyikan kotak like box fans page facebook sobat pada blog sobat. Dengan cara ini juga maka blog sobat kelihatan lebih indah untuk dipandang. Untuk tampilannya sobat bisa lihat gambar di samping.

Apakah sobat juga ingin memasangnya juga di blog sobat? jika jawaban dari sobat ya, maka ikutilah langkah-langkah Cara Membuat Like Box Facebook Disamping.

1. Log in ke www.blogger.com.
2.Klik Rancangan » Tata Letak(Pageelement) » Add a Gadget » HTML/Java Script.
3.Pastekan kode di bawah ini pada kolom yang sudah disediakan.

<script type="text/javascript">
//<!--
$(document).ready(function() {$(".floatinglikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);});
//-->
</script>
<style type="text/css">
.floatinglikebox{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFc8JCYU7vpty3RNGv6F1h7982KtglFd_eCSctSnxjo-1epdbK3xQbBqCngB_q-JFfabMgpXmWolH-_XzJwtlNua7E3A48tGTQE_ukeV8GImnltrhlKu5vafqTFLxi16WNfg4wXTtaSHw/s1600/floatingfb.png") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 40px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;}
.floatinglikebox div{border:none;position:relative;display:block;}
.floatinglikebox span{bottom: 10px;font: 10px tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}
.floatinglikebox span a{color: #808080;text-decoration:none;}
.floatinglikebox span a:hover{text-decoration:underline;}
</style><div class="floatinglikebox" style=""><div><iframe src="//www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/NamaFPAnda&amp;width=251&amp;height=270&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23cccccc&amp;stream=false&amp;header=false&amp;appId=159468740772399" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:251px; height:270px; background:#fff;" allowtransparency="true"></iframe><span><a href="http://xpress-community.blogspot.com/2012/11/cara-membuat-like-box-facebook-disamping.html" target="_blank">+ Get This</a></span></div></div>

Keterangan :

Ganti kode yang berwarna Biru dengan URL Fans Page anda.
Ganti kode yang berwarna Merah dengan Gambar sesuka anda.

4.Pergi ke edit HTML dan letakkan kode dibawah ini di atas kode </head>.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"> </script>

5.Save template anda.

Sekian tutorial tentang Cara Membuat Like Box Facebook Disamping mudah-mudahan artikel ini bisa bermanfaat untuk anda.

Tweet

Postingan terkait:

Ditulis Dandi Saseno — Sunday 11 November 2012 — 3 Comments — tutorial blog