0817 5011 058
Available Telp/SMS/WA

Cara Membuat Slider Facebook Like Box di Blogspot

Cara Membuat Slider Floating Facebook Like Box di Blogspot

Seperti halnya saya pernah mengulas di materi Joomla tentang Facebook Like Box yang mengambang – Cara Buat Facebook Like Slider di SideBar -, pada tutorial ini kita akan belajar membuatnya di Blogspot. Dengan “gaya Floating/Slider” maka anda akan menghemat banyak ruang dalam template anda dan terlihat lebih menarik dan elegan.

1. Login ke area admin blogspot anda >> Pilih Menu Template >> Edit HTML

Cara Membuat Slider Floating Facebook Like Box di Blogspot

2. Pilih Tab “Edit Template”. Cari dan temukan kode </head>. Tambahkan persis di atasnya kode berikut ini (Download kode di sini):

 

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

Lihat pemasangan kode seperti contoh gambar dibawah ini:

Cara Membuat Slider Floating Facebook Like Box di Blogspot

3. Klik tombol “Save Template“.

4. Setelah anda menambahkan Kode Plugin JQuery di atas. Selanjutnya, Menambahkan widget Facebook Slider. Pilih menu Layout >> Add gadget >> Pilih widget HTML/J-avascript. Tambahkan kode di bawah ini >> Save. (Download kode di sini):

<script type="text/j-avascript"> //<!-- $(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("http://3.bp.blogspot.com/-VXmAJdQRHJ8/Tra8E16fZGI/AAAAAAAAClg/o5M632x9qX8/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%3A%2F%2Fwww.facebook.com%2FKursusWebPro&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://www.kursuswebpro.com" target="_blank">by KWPro</a></span></div></div>

5. Temukan pada tag:  http%3A%2F%2Fwww.facebook.com%2FKursusWebPro . Ganti teks warna merah dengan ID Fans Page anda. Tag tersebut mewakili http://www.facebook.com/KursusWebPro. Klik tombol “Save” untuk menyimpan widget. Perhatikan ketika mengganti URL:

  • : diganti %3A
  • / diganti %2F 

6. Selamat mencoba..! Lihat demo hasilnya di http://kursuswebpro.blogspot.com.