Floating Facebook Like Box for Blogger !

Σήμερα θα ασχοληθούμε με ένα αρκετά δημοφιλές social bookmarking widget του facebook. Πρόκειται για ένα απλό facebook like box της σελίδας μας, με τη μόνη διαφορά ότι αυτό "κολλάει" πάνω δεξιά στην οθόνη μας και "ξετυλίγεται" με το άγγιγμα του ποντικιού μας. Λίγο λογοτεχνική η περιγραφή μου, για αυτό δοκιμάστε το, για να καταλάβετε καλύτερα!

ΔΙΑΔΙΚΑΣΙΑ ΠΡΟΣΘΗΚΗΣ

1. σύνδεση στον λογαριασμό σας από blogger.com
2. σχεδίαση> προσθήκη gadget> HTML/JavaScript
3. επικολλήτε τον παρακάτω κώδικα

<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: "-250"}, "medium");}, 500);});
//-->
</script>
<style type="text/css">
.floatinglikebox{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkqcGR1z1FOltwdFVcrXHm2pTOr3J-9rnIfowJLMQ3jKnVmbSudZkmbkpOl2BjhobeR4WNqEWXQfuitQA4LKB26b-iCBKP7qENbTq88VyrCND1NFw530ggIxIPK-r8dw3LC84WlwV2KiE/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%2Fpages%2FOlympiakos%2F110703838950130&amp;width=251&amp;height=270&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:251px; height:270px; background:#fff;" allowtransparency="true">
</iframe><span><a href="http://www.bloggertips.gr/2012/09/floating-facebook-like-box-for-blogger.html" target="_blank">Add this!</a></span>
</div></div>

εδώ τώρα μπορείτε να κάνετε πολλές αλλαγές αν διατέθετε στοιχειώδεις γνώσεις της html.. βασικά δεν είναι τόσο θέμα γνώσης όσο να έχετε συλλάβει τη βασική λογική της..

*** απλό facebook like box μπορείτε να βάλετε από το http://developers.facebook.com/docs/reference/plugins/like-box/ ***

λοιπόν ανοίγετε τη σελίδα σας στο facebook.
κοιτάτε στην μπάρα του browser, η url (Uniform Resource Locator ή -ελλ.- Ενιαίος Εντοπιστής Πόρων) να είναι της μορφής http://facebook/pages/όνομα/id

π.χ. http://www.facebook.com/pages/Olympiakos/110703838950130
(θρυλε ολε θρυλε ολε σε βλεπω και τρελαινομαι.....)

και αυτό που έχω μαρκάρει με κόκκινο από πάνω στον κώδικα, το αλλάζετε με τα στοιχεία της δικής σας σελίδας...

4. αποθήκευση και είστε έτοιμοι!

αφήστε το σχόλιό σας αν θέλετε και κάντε αυτό το post "like" στο facebook..
πάντα αν θέλετε...

για να σας φτιάξει τη διάθεση...

Πηγές: http://www.bloggertips.gr/
Copyrights: http://www.bloggertips.gr/