Menambahkan facebook Like box di blogger
facebook like ini adalah script widget menggunakan jQuery plugin yang ditanamkan pada bagian head dukumen HTML Template, serta kode widget yang di tambahkan melalui add a gadget type HTML/Javascript.
gambarnya seperti dibawah ini
langsung aja y....
- pertama login ke blogger anda.
- setelah itu pilih template - edit html - lanjutkan
- cari <head> biar lebih gampang tekan CTRL+F ketik <head> pada pencarian di atas.\
- udah belum, kalo udah sekarang copy kode di bawah ini dan paste tepat di atas <head>.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
- kemudian Save Template
- selanjutnya pilih menu Layout atau Tata Letak - add gadget pilih type Html / JavaScribt.
- Copy kode di bawah ini, dan paste ke dalam kotak Content, gadget HTML/Javascript, tidak perlu diberi title.
<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://lh4.googleusercontent.com/-zbDw9p8R20o/T8mpaxK77yI/AAAAAAAAB-Y/pDsYMYlDi5M/s136/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/berbagipengalaman&width=250&height=260&colorscheme=light&show_faces=true&border_color=%23cccccc&stream=false&header=false&appId=339941006059696" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:250px; height:260px; background:#fff;" allowtransparency="true"></iframe><span><a href="http://kasminarif.blogspot.com/2012/06/menambahkan-facebook-like-box-di-blog.html" target="_blank">Beler Friend's</a></span></div></div>
//<!--
$(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://lh4.googleusercontent.com/-zbDw9p8R20o/T8mpaxK77yI/AAAAAAAAB-Y/pDsYMYlDi5M/s136/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/berbagipengalaman&width=250&height=260&colorscheme=light&show_faces=true&border_color=%23cccccc&stream=false&header=false&appId=339941006059696" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:250px; height:260px; background:#fff;" allowtransparency="true"></iframe><span><a href="http://kasminarif.blogspot.com/2012/06/menambahkan-facebook-like-box-di-blog.html" target="_blank">Beler Friend's</a></span></div></div>
- jangan lupa mengganti tulisan berwana biru dengan facebook pages anda
- dan untuk mengatur tinggi dan lebar bisa diatur di tulisan bold hijau
- dan untuk mengatur tinggi dan lebar bisa diatur di tulisan bold hijau
- Save dan liat hasilnya.
GoodLuck
Post a Comment