ΠΩΣ ΒΑΖΩ FACEBOOK FLOATING LIKE BOX

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

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





<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
//<!--
$(document).ready(function() {$(".floatinglikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-450"}, "medium");}, 450);});
//-->
</script>
<style type="text/css">
.floatinglikebox{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: 240px;padding: 0 5px 0 40px;width: 450px;z-index: 99999;position:fixed;right:-450px;top:5%;}
.floatinglikebox div{border:none;position:relative;display:block;}
.floatinglikebox span{bottom: 10px;font: 10px arial;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/widgetsforblogs&amp;width=450&amp;height=240&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23cccccc&amp;stream=false&amp;header=false&amp;" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:240px; background:#FBBB22;" allowtransparency="true">

</iframe></div></div>

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

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

Δεν υπάρχουν σχόλια:

Δημοσίευση σχολίου