Jumat, 22 Maret 2013

Cara Membuat Facebook Like Box Melayang di Blog

   
Biasanya kita memasang  FB Like Box ini di sidebar atau bottom bar. Tentunya hal ini bertujuan supaya blog atau web kita lebih dikenal, dan akhirnya traffic akan meningkat. Akan tetapi apabila kita scroll mouse ke atas atau bawah, FB Like Box pastinya ini tidak terlihat. Atau mungkin kita kebingungan untuk menempatkannya, karena kehabisan space.

Yup, ini dia cara pembuatan Facebook Like Box Melayang di Blog.


Menambahkan Jquery Plugin
1. Login ke Blogger
2. Klik Dasbor>Rancangan>Edit HTML
3. Cari kode

</head>

 4. Tambahkan kode ini diatas </head>

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

 Abaikan langkah ini apabila template anda sudah terinstall Jquery Plugin.

Menambahkan Kode HTML pada Widget
1. Klik Dasbor>Rancangan>Tambah Gadget>HTML/JavaScript
2. Copy kode dibawah 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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjK8qSTvElyh-xsWlWjoRG8yoKGKU2naPRgWR4YIRF9j-Y1yiUAM4xIk71vg4b8VmHr7fykjecKg6ZQPrIa2C_3Qv0yRThTmW3ZmCcmTfA-FM8p7zQStgbYDfB7Pzisq_cuo7yEdZO7Lrk/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=https://www.facebook.com/pages/ICT/603864102976306?skip_nax_wizard=true&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://blogmashanif.blogspot.com/2012/07/cara-membuat-facebook-like-box-melayang.html" target="_blank">+Get This!</a></span></div></div>

 3. Ganti https://www.facebook.com/pages/ICT/603864102976306?skip_nax_wizard=truedengan Facebook Fan Page Anda.
4. Lalu Simpan

Catatan:
Sebelum menyimpan URL Facebook anda, ganti kode-kode pada URL.
: dengan %3A
/ dengan %2F

Misalkan URL Facebook anda :

http://www.facebook.com/pages/fbanda/123456

 menjadi

http%3A%2F%2Fwww.facebook.com%2Fpages%2Ffbanda%2F123456

Sekian kurang lebihnya mohon maaf, jika anda berkenan tolong follow blog ini, anda juga bisa request Software dan Tutorial ke saya dengan cara like dan comment di FP blog ini.
   
Biasanya kita memasang  FB Like Box ini di sidebar atau bottom bar. Tentunya hal ini bertujuan supaya blog atau web kita lebih dikenal, dan akhirnya traffic akan meningkat. Akan tetapi apabila kita scroll mouse ke atas atau bawah, FB Like Box pastinya ini tidak terlihat. Atau mungkin kita kebingungan untuk menempatkannya, karena kehabisan space.

Yup, ini dia cara pembuatan Facebook Like Box Melayang di Blog.


Menambahkan Jquery Plugin
1. Login ke Blogger
2. Klik Dasbor>Rancangan>Edit HTML
3. Cari kode

</head>

 4. Tambahkan kode ini diatas </head>

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

 Abaikan langkah ini apabila template anda sudah terinstall Jquery Plugin.

Menambahkan Kode HTML pada Widget
1. Klik Dasbor>Rancangan>Tambah Gadget>HTML/JavaScript
2. Copy kode dibawah 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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjK8qSTvElyh-xsWlWjoRG8yoKGKU2naPRgWR4YIRF9j-Y1yiUAM4xIk71vg4b8VmHr7fykjecKg6ZQPrIa2C_3Qv0yRThTmW3ZmCcmTfA-FM8p7zQStgbYDfB7Pzisq_cuo7yEdZO7Lrk/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=https://www.facebook.com/pages/ICT/603864102976306?skip_nax_wizard=true&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://blogmashanif.blogspot.com/2012/07/cara-membuat-facebook-like-box-melayang.html" target="_blank">+Get This!</a></span></div></div>

 3. Ganti https://www.facebook.com/pages/ICT/603864102976306?skip_nax_wizard=truedengan Facebook Fan Page Anda.
4. Lalu Simpan

Catatan:
Sebelum menyimpan URL Facebook anda, ganti kode-kode pada URL.
: dengan %3A
/ dengan %2F

Misalkan URL Facebook anda :

http://www.facebook.com/pages/fbanda/123456

 menjadi

http%3A%2F%2Fwww.facebook.com%2Fpages%2Ffbanda%2F123456

Sekian kurang lebihnya mohon maaf, jika anda berkenan tolong follow blog ini, anda juga bisa request Software dan Tutorial ke saya dengan cara like dan comment di FP blog ini.
   
Biasanya kita memasang  FB Like Box ini di sidebar atau bottom bar. Tentunya hal ini bertujuan supaya blog atau web kita lebih dikenal, dan akhirnya traffic akan meningkat. Akan tetapi apabila kita scroll mouse ke atas atau bawah, FB Like Box pastinya ini tidak terlihat. Atau mungkin kita kebingungan untuk menempatkannya, karena kehabisan space.

Yup, ini dia cara pembuatan Facebook Like Box Melayang di Blog.


Menambahkan Jquery Plugin
1. Login ke Blogger
2. Klik Dasbor>Rancangan>Edit HTML
3. Cari kode

</head>

 4. Tambahkan kode ini diatas </head>

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

 Abaikan langkah ini apabila template anda sudah terinstall Jquery Plugin.

Menambahkan Kode HTML pada Widget
1. Klik Dasbor>Rancangan>Tambah Gadget>HTML/JavaScript
2. Copy kode dibawah 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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjK8qSTvElyh-xsWlWjoRG8yoKGKU2naPRgWR4YIRF9j-Y1yiUAM4xIk71vg4b8VmHr7fykjecKg6ZQPrIa2C_3Qv0yRThTmW3ZmCcmTfA-FM8p7zQStgbYDfB7Pzisq_cuo7yEdZO7Lrk/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=https://www.facebook.com/pages/ICT/603864102976306?skip_nax_wizard=true&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://blogmashanif.blogspot.com/2012/07/cara-membuat-facebook-like-box-melayang.html" target="_blank">+Get This!</a></span></div></div>

 3. Ganti https://www.facebook.com/pages/ICT/603864102976306?skip_nax_wizard=truedengan Facebook Fan Page Anda.
4. Lalu Simpan

Catatan:
Sebelum menyimpan URL Facebook anda, ganti kode-kode pada URL.
: dengan %3A
/ dengan %2F

Misalkan URL Facebook anda :

http://www.facebook.com/pages/fbanda/123456

 menjadi

http%3A%2F%2Fwww.facebook.com%2Fpages%2Ffbanda%2F123456

Sekian kurang lebihnya mohon maaf, jika anda berkenan tolong follow blog ini, anda juga bisa request Software dan Tutorial ke saya dengan cara like dan comment di FP blog ini.
Diposting oleh di

Tidak ada komentar:

:) :( ;) :D ;;-) :-/ :x :P :-* =(( :-O X( :7 B-) :-S #:-S 7:) :(( :)) :| /:) =)) O:-) :-B =; :-c :)] ~X( :-h :-t 8-7 I-) 8-| L-) :-a :-$ [-( :O) 8-} 2:-P (:| =P~ #-o =D7 :-SS @-) :^o :-w 7:P 2):) X_X :!! \m/ :-q :-bd ^#(^ :ar!

Posting Komentar

Langganan: Posting Komentar (Atom)