GADGETS FOR BLOGS

Facebook Google plus YouTube Pinterest Tumblr Delicius DIIGO Start.me NETVIBES feedburner

ΠΩΣ ΒΑΖΩ FACEBOOK FLOATING LIKE BOX

ΠΩΣ ΒΑΖΩ FACEBOOK FLOATING LIKE BOX
1) Σύνδεση στον Blogger
2) Διάταξη
3) Προσθήκη Gadget
4) HTML/JavaScript

Και στο κουτάκι προσθέστε τον παρακάτω κώδικα : 



ΚΩΔΙΚΑΣ ΜΕ ΜΙΚΡΟ ΕΙΚΟΝΙΔΙΟ ΚΑΙ ΔΙΑΣΤΑΣΕΙΣ 350Χ220
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script>
jQuery(document).ready(function() {jQuery(".fb-box").hover(function() {jQuery(this).stop().animate({right: "0"}, "medium");}, function() {jQuery(this).stop().animate({right: "-350"}, "medium");}, 350);});
</script>
<style>
.fb-box {background: url("https://lh3.googleusercontent.com/-TMJW5DYbw0I/VlW0oaN_sxI/AAAAAAAAT3I/gJGmLNW-L-M/s64-no/Facebook-64.png") no-repeat scroll left center transparent !important;float:right;height:220px;padding: 0 5px 0 46px;width:350px;z-index:  99999;position:fixed;right:-350px;top:5%;}
.fb-box div {padding:0;margin-right:-8px; border:4px solid  #00FF00; background:#115599;}
</style>
<div class="fb-box" style="">
<div>
<iframe src="http://www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/widgetsforblogs&amp;width=350&amp;colorscheme=light&amp;show_faces=true&amp;border_color=blue&amp;stream=false&amp;header=false&amp;height=220" scrolling="no" frameborder="0" scrolling="no" style="border: blue; overflow: hidden; height: 220px; width: 350px;background:#115599;"></iframe></div></div> 

 ΚΩΔΙΚΑΣ ΜΕ ΜΕΓΑΛΟ ΕΙΚΟΝΙΔΙΟ ΚΑΙ ΔΙΑΣΤΑΣΕΙΣ 450Χ220
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script>
$(document).ready(function() {$(".fl-box").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-450"}, "medium");}, 450);});
</script>
<style>
.fl-box {background: url("https://lh3.googleusercontent.com/-VChrdpqHyKY/VXX0lresY2I/AAAAAAAARoo/PXYugRx97Pg/w41-h136-no/FB-FLOATING.png") no-repeat scroll left center transparent !important;display: block;float: right;height: 220px;padding: 0 5px 0 40px;width: 450px;z-index: 99999;position:fixed;right:-450px;top:5%;}
.fl-box div {border:4px solid  #00FF00; background:#115599;padding:0;margin-right:-8px;}
</style>
<div class="fl-box" style="">
<div>

<iframe src="http://www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/widgetsforblogs&amp;width=450&amp;height=220&amp;colorscheme=light&amp;show_faces=true&amp;border_color=blue&amp;stream=false&amp;header=false&amp;" scrolling="no" frameborder="0" style="border:blue;height:220px;width: 450px;overflow:hidden;background:#115599;" allowtransparency="true"></iframe></div></div>

Αντικαταστήστε το link που έχει μαρκαριστεί με πράσινο χρώμα με το δικό σας link σελίδας facebook. Μεταφέρετε προαιρετικά το εικονίδιο του facebook που έχω μαρκαρει με μώβ χρώμα σε δικό σας λεύκωμα του blogger.

Αν δεν σας αρέσουν αυτές οι διαστάσεις μπορείτε να τις αλλάξετε πειράζοντας τα γαλάζια γράμματα. Το ίδιο ισχύει και για το χρώμα του backround (#115599;) και για τη θέση του widget (top:5%;)