Καλησπέρα σε όλους τους φίλους του Blogger Tricks !
Σήμερα θα σας παρουσιάσω την δεύτερη έκδοση [2] του Floating Facebook Like Box !
Έχει γίνει ήδη η ανάρτηση του Floating Facebook Like Box [1] την οποία μπορείτε να βρείτε εδώ:
http://www.bloggertricks.gr/2011/11/floating-facebook-like-box-for-blogger.html
Αναφέρομαι στο κανονικό Facebook Like Box αλλά σε πλάγιο μεγάλο κουμπί.
Είναι πιστεύω ένα αρκετά χρήσιμο Gadget που πρέπει να έχει κάθε blog, αφού:
- Εξοικονομείτε αρκετό χώρο για την sidebar σας που είναι σημαντική για κάθε blog.
- Κερδίζετε Likes κάνοντας το Facebook Like Box πιο φανερό στους επισκέπτες σας.
Πάμε όμως να δούμε πως θα το εγκαταστήσετε στο blog σας:
1) Σύνδεση στον Blogger
2) Πρότυπο
3) Δημιουργία αντίγραφου ασφαλείας / Λήψη πλήρους προτύπου
4) Επεξεργασία HTML
5) Συνέχεια
6) Πατάμε CTRL + F και εκεί ψάχνουμε τον παρακάτω κώδικα:
</head>
7) Αφού το βρούμε ,
ακριβώς από πάνω ,
κάνουμε επικόλληση τον παρακάτω κώδικα:
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/><script type='text/javascript'>jQuery(document).ready(function(){jQuery("#facebook_right").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },function(){ jQuery("#facebook_right").stop(true,false).animate({right: -304}, 500); });jQuery("#twitter_right").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },function(){ jQuery("#twitter_right").stop(true,false).animate({right: -304}, 500); });jQuery("#google_plus_right").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },function(){ jQuery("#google_plus_right").stop(true,false).animate({right: -203}, 500); });jQuery("#feedburner_right").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },function(){ jQuery("#feedburner_right").stop(true,false).animate({right: -303}, 500); }); });</script>
8) Ελέγχουμε αν δουλεύει πατώντας
προεπισκόπηση και πατάμε
αποθήκευση.
9) Στην συνέχεια, πατάμε Διάταξη > Προσθήκη Gadget > HTML/JavaScript
<style>#facebook_link {float:right; padding-right:5px;margin-top:-58px;}#on {visibility:visible;}#off {visibility:hidden;}#facebook_div {width:300px; height:335px; }#facebook_right {z-index: 10005;border:2px solid #3b5998;background-color: #fff;width:300px;height: 335px;position: fixed;right: -304px;}#facebook_right img {position: absolute;top: -2px;left: -40px;}#facebook_right iframe {border:0px solid #3c95d9;overflow: hidden;position: static;height: 360px;left:-62px;top:-3px;}</style><div id="on"><div id="facebook_right" style="top: 15%;"><div id="facebook_div"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1Loty2c4boels6PkRNaoegGoU-a8Q-HoJ2NhAopjXIb0uBFhu_f0Zd11nb6KkHhSA5I4pckV-siIIoRs7twSE6Ew9mdhVnDWmqOfBOuITBkExl9TTM_oUKBDR9-cb6_TEIO0YhFrTwZc/s200/fb2-right.png" alt="boton facebook flotante" />
<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fbloggertricksgr&width=300&height=590&colorscheme=light&show_faces=true&border_color&stream=true&header=true" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:590px;" allowTransparency="true"></iframe>
<div id="facebook_link"><span style="font-size: x-small;"><a href="http://bloggertricks.gr" target="_blank">Blogger</a></span></div></div></div></div>
Τώρα θα πρέπει να αλλάξετε το iframe που είναι με
κόκκινα γράμματα με το δικό σας
Για να δημιουργήσετε ένα τέτοιο iframe θα πρέπει να πατήσετε
ΕΔΩ
Το iframe σας θα πρέπει να έχει τα εξής χαρακτηριστικά:
Και στην συνέχεια πατάμε στο κουμπί Get Code
10) Κάνουμε αντικατάσταση τα
κόκκινα γράμματα με το καινούργιο iframe που πήραμε
11) Αποθήκευση και τέλος
