Πως να προσθέσετε ένα Popup facebook Likebox της J-Query στο Blogger ιστολόγιό σας

Ένας εύκολος τρόπος για να αυξήσετε τους θαυμαστές της σελίδας σας στο facebook, ώστε να ενημερώνονται και από εκεί για κάθε νέα σας ανάρτηση, είναι το facebook popup likebox. Το gadget αυτό το έχετε συναντήσει σίγουρα σε κάποια από τις ιστοσελίδες που έχετε επισκεφθεί τελευταία.
Πως μπορείτε να τοποθετείστε ένα τέτοιο gadget στο blogger ιστολόγιο σας;

 Πάρα πολύ εύκολα, απλά ακολουθώντας τα παρακάτω βήματα.
1. Συνδεθείτε στον Blogger λογαριασμό σας.
2. Πηγαίνετε στην καρτέλα Σχεδίαση
3. Επιλέγετε Προσθήκη Gadget
4. Επιλέγετε HTML/JavaScript και τέλος
5. Επικολλήστε τον ακόλουθο κώδικα.

<style> /* Jquery Facebook Likebox Popup Version 2.0 */ 
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;} #cboxOverlay{position:fixed; width:100%; height:100%;} #cboxMiddleLeft, #cboxBottomLeft{clear:left;} #cboxContent{position:relative;} #cboxLoadedContent{overflow:auto;} #cboxTitle{margin:0;} #cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;} #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;} .cboxPhoto{float:left; margin:auto; border:0; display:block;} .cboxIframe{width:100%; height:100%; display:block; border:0;} /* User Style: Change the following styles to modify the appearance of ColorBox. They are ordered & tabbed in a way that represents the nesting of the generated HTML. */ #cboxOverlay{background:#000;opacity:0.5 !important;} #colorbox{ box-shadow:0 0 15px rgba(0,0,0,0.4); -moz-box-shadow:0 0 15px rgba(0,0,0,0.4); -webkit-box-shadow:0 0 15px rgba(0,0,0,0.4); } #cboxTopLeft{display:none;}{width:14px; height:14px; background:url(http://imgboot.com/images/cybersidh/controls.png) no-repeat 0 0;} #cboxTopCenter{display:none;}{height:14px; background:url(http://imgboot.com/images/cybersidh/border.png) repeat-x top left;} #cboxTopRight{display:none;}{width:14px; height:14px; background:url(http://imgboot.com/images/cybersidh/controls.png) no-repeat -36px 0;} #cboxBottomLeft{display:none;}{width:14px; height:43px; background:url(http://imgboot.com/images/cybersidh/controls.png) no-repeat 0 -32px;} #cboxBottomCenter{display:none;}{height:43px; background:url(http://imgboot.com/images/cybersidh/border.png) repeat-x bottom left;} #cboxBottomRight{display:none;}{width:14px; height:43px; background:url(http://imgboot.com/images/cybersidh/controls.png) no-repeat -36px -32px;} #cboxMiddleLeft{display:none;}{width:14px; background:url(http://imgboot.com/images/cybersidh/controls.png) repeat-y -175px 0;} #cboxMiddleRight{display:none;}{width:14px; background:url(http://imgboot.com/images/cybersidh/controls.png) repeat-y -211px 0;} #cboxContent{background:#fff; overflow:visible;} #cboxLoadedContent{margin-bottom:5px;} #cboxLoadingOverlay{display:none;}{background:url(http://imgboot.com/images/cybersidh/loadingbackground.png) no-repeat center center;} #cboxLoadingGraphic{display:none;}{background:url(http://imgboot.com/images/cybersidh/loading.gif) no-repeat center center;} #cboxTitle{position:absolute; bottom:-25px; left:0; text-align:center; width:100%; font-weight:bold; color:#7C7C7C;} #cboxCurrent{position:absolute; bottom:-25px; left:58px; font-weight:bold; color:#7C7C7C;} #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{display:none;}{position:absolute; bottom:-29px; background:url(http://imgboot.com/images/cybersidh/controls.png) no-repeat 0px 0px; width:23px; height:23px; text-indent:-9999px;} #cboxPrevious{left:0px; background-position: -51px -25px;} #cboxPrevious.hover{background-position:-51px 0px;} #cboxNext{left:27px; background-position:-75px -25px;} #cboxNext.hover{background-position:-75px 0px;} #cboxClose{right:0; background-position:-100px -25px;} #cboxClose.hover{background-position:-100px 0px;} .cboxSlideshow_on #cboxSlideshow{background-position:-125px 0px; right:27px;} .cboxSlideshow_on #cboxSlideshow.hover{background-position:-150px 0px;} .cboxSlideshow_off #cboxSlideshow{background-position:-150px -25px; right:27px;} .cboxSlideshow_off #cboxSlideshow.hover{background-position:-125px 0px;} /*-----------------------------------------------------------------------------------*/ /* Facebook Likebox popup For Blogger Version 2.0 /*-------------------------------------------------- 
</style> <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js'></script> <script src="http://mybloggertricks.googlecode.com/files/jquery.colorbox-min.js"></script> <script type="text/javascript"> jQuery(document).ready(function(){ if (document.cookie.indexOf('visited=true') == -1) { var fifteenDays = 1000*60*60*24*30; var expires = new Date((new Date()).valueOf() + fifteenDays); document.cookie = "visited=true;expires=" + expires.toUTCString(); $.colorbox({width:"400px", inline:true, href:"#subscribe"}); } }); </script> <div style='display:none'> <div id='subscribe' style='padding:10px; background:#fff;'> <center><h3 class="box-title"><img alt='' src='http://www.connectamol.com/wp-content/uploads/2011/07/subscribe.gif'/><p style="line-height:3px;" >▼</p></h3> </center> <center> <iframe src="//www.facebook.com/plugins/likebox.php?href=TO URL ΤΗΣ ΣΕΛΙΔΑΣ ΣΑΣ ΣΤΟ FACEBOOK&amp;width=300&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23ffffff&amp;stream=false&amp;header=false&amp;height=258" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:258px;" allowtransparency="true"></iframe> </center> <center><a style="text-decoration:none;font-size:50%;" href="http://www.bloggertipsandtricks.net/2012/02/jquery-facebook-popup-like-box-v2.html">Add to your blog</a></center> </div> </div>


6. ΠΡΟΣΟΧΗ Μην ξεχάσετε να αλλάξετε το κείμενο ‘’ TO URL ΤΗΣ ΣΕΛΙΔΑΣ ΣΑΣ ΣΤΟ FACEBOOK ’’ με την url διεύθυνση της facebook σελίδας σας η οποία θα έχει για παράδειγμα την μορφή http://www.facebook.com/όνομα
Σας ευχόμαστε καλή επιτυχία και καλό blogging.!!






Posted in: