Web Anda Rusak/Kena Hack. Resiko Ranking SEO turun Drastis. Kami BISA Perbaiki Selengkapnya..

Arrow up
Arrow down

KURSUS WEB PRO

Kursus Pembuatan Web - Blog - Toko Online Tanpa Biaya..GRATIS!!

Kursus Web Gratis

kursus website toko online

Cara Membuat Slider 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.

PELATIHAN WEBSITE & TOKO ONLINE


HANYA untuk maks 5 Orang Peserta

22-23 April: Pembuatan Web Joomla 3.6
29-30 April: Pembuatan Toko Online Wordpress

Biaya:
Rp.1.500.000,- / Peserta

Gratis Domain,Hosting, WIFI, MODUL.

Programming Web

Jasa Hosting Murah Depok

Kursus Website Online Gratis
KANTOR PUSAT :

Mutiara Darussalam A3/11
Jl Pitara Raya DEPOK
Jawa-Barat
WA: 0817.5011.058
Telp: 0817.5011.058 , 0812.8711.5614
PIN BB: 584E1A57
---------------------------

Email: This email address is being protected from spambots. You need JavaScript enabled to view it.

Jika ada layanan kami yang ingin anda konsultasikan silahkan chatting dengan kami:

google plus kursus webtwitter kursus webpinterest kursus webLinkedin Kursus Web

Portofolio

mainan anak

fastpay depok

error handling toko online

jasa pembuatan kolam renang