ex. Kebon Digital |
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/KebonDigital&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://kebondigital.blogspot.com/2012/06/menambahkan-facebook-like-box-di-blog.html" target="_blank">Blogger Widget</a></span></div></div>
- Jangan lupa untuk mengganti kode https://www.facebook.com/KebonDigital 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 ucapkan Alhamdulillah...
Menambahkan Facebook Like Box di Blog
0 komentar:
Posting Komentar
Silahkan isi kotak komentar ...