Selamat Datang di Kebon Digital - Tempat Kita berbagi Ilmu berbagi Informasi - Semoga Bermanfaat

Senin, 16 Juli 2012

Menambahkan Facebook Like Box di Blog

Bismillahirrahmanirrahim...


ex. Kebon Digital
KEBON DIGITAL - 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/KebonDigital&amp;width=250&amp;height=260&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23cccccc&amp;stream=false&amp;header=false&amp;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:

Poskan Komentar

Silahkan isi kotak komentar ...