Kamis, 07 Februari 2013

Cara membuat Kotak Like Facebook melayang di blog


Hai semuanya..
Di sore yang indah ini. Disaat Sunset akan terjadi. Saat Matahari mulai tenggelam, kembali ke peraduannya.
Saya akan membagikan suatu Trik untuk Membuat Kotak Like Facebook melayang di blog :)
Seperti yang ada di halaman blog saya. Apabila kursor kita menyentuh Tulisan Facebook yang melayang di sebelah kiri blog saya. Maka langsung terbuka Like Box Facebooknya ..
Kayak gini nih :

Keren kan...????
Langsung aja nih caranya. Saya jelaskan Step By Step :
1. Masuk ke dashoard blog anda.
2. Masuk ke tata letak/Element
3. Klik tambah gadget
4. Pilih Add HTML/JavaScript
5. Copy Link di bawah ini

<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("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:// www.facebook.com/UchihasMind &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://uchihabeiber.blogspot.com/2012/07/cara-membuat-kotak-like-facebook.html" target="_blank">+ Get This</a></span></div></div> 

Catatan :
- Tulisan yang berwarna biru, diganti sesuai dengan link halaman fanpage facebook anda.
- Tulisan yang berwarna merah menunjukkan tema warna kotak like facebooknya.
   Kalau light berarti terang, kalau dark berarti gelap. Terserah selera..
- Tulisan yang berwarna hijau menunjukkan Profil Picture orang yang me like fanpage anda.
   Jika ingin ditampilkan tulis true. Kalau tidak ingin ditampilkan tulis false.
6. Save. Boleh tak dikasih judul di widgetnya.
7. Lalu buka Template/Perancang HTML
8. Klik edit HTML, centang Expand Widget.
9. Cari kode </Head>. Agar lebih mudah pencet Ctrl + F di Mozilla Firefox dan Google Chrome.
10. Taruh script di bawah ini. Diatas kode </Head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"> </script>
11. Simpan HTML anda.
Dan sekarang coba lihat halaman blog anda,, sudah ada like facebook melayang.
kerenkan...
Terimakasih semoga bermanfaat.
Dan jangan lupa tinggalkan Komen :)

_"Jangan mengcopas seluruh kalimat di artikel ini tanpa ijin. Boleh mengcopas ide gagasan dan scriptnya. Tapi jangan mengcopas seluruh kalimatnya sama persis_"
Share:

2 komentar:

Anda Pengunjung Ke

Featured post

Whatsapp Bulk Message : Aplikasi Untuk Whatsapp Blast ke Banyak Kontak (100% Works)

 Halo Kawan Alfatutorial! Nggak kerasa ya kalau hari ini udah tahun 2021 aja, padahal di 2020 Alfatutorial baru sedikit ngepost. Pada kesemp...

Diberdayakan oleh Blogger.

Live Traffic

Translator

English French German Spain Italian Dutch

Russian Portuguese Japanese Korean Arabic Chinese Simplified

Blog Archive