 |
BELAJAR KOMPUTER - Banyak cara yang dapat diterapkan untuk menambahkan Facebook like Box pada blog. Pada artikel kali ini akan dibahas cara menambahkan widget Facebook Like Box
yang terpasang mengambang seperti tombol pada sisi kanan halaman
blog. Bukan saja widget ini akan kelihatan menarik tetapi yang paling
penting adalah, penggunaannya yang menghemat space blog. Widget ini
dipublikasikan oleh BloggerHack pada November 2011 dan saya paste kembali di blog ini untuk saling berbagi informasi, 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.
Bagi anda yang menyukai widget ini, berikut adalah cara menerapkannya di blog
- Login ke blogger, dengan ID anda
- Pada halaman dashboard blogger klik link nama blog anda
- Pilih menu Template ->> Edit HTML ->> Proceed
- Cari kode <head> kemudian copy kode di bwah ini dan paste tepat di bawah kode <head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
- Simpan template dengan menekan tombol Save Template
- Kemudian pilih menu Layout ->> Add a gadget ->> pilih gadget type HTML/Javascript.
- 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=https://www.facebook.com/achyar.nine.one&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://achyar-nine-one.blogspot.com/2012/10/menambahkan-facebook-like-box-di-blog.html" target="_blank">Blogger Widget</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=https://www.facebook.com/achyar.nine.one&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://achyar-nine-one.blogspot.com/2012/10/menambahkan-facebook-like-box-di-blog.html" target="_blank">Blogger Widget</a></span></div></div>
- Jangan lupa untuk mengganti kode www.facebook.com/achyar.nine.one dengan URL Facebook Like Box anda
- Jika ingin menyesuaikan tinggi dan lebar widget silahkan edit kode yang di bold hitam dengan angka yang anda inginkan
- Klik tombol Save untuk menyimpan Gadget
- Langka terakhir periksa blog anda dan liat hasilnya.
0 comments:
Post a Comment