jQuery Facebook Popup Like Box v2 (Update)

English French German Spain Italian Dutch Russian Portuguese Japanese Korean Arabic Chinese Simplified

Είναι μια βελτίωση στον κώδικα της ανάρτησης που έκανε πάταγο. Η διαφορά με το widget της jQuery Facebook Popup Like Box v2 είναι στο ότι το gadget που θα προκύψει από τον κώδικα που θα σας πω περιέχει και πλαίσιο.
Ας μη πολυλογούμε λοιπόν:
  • Σύνδεση στον Blogger 
  • Διάταξη / Προσθήκη gadget 
  • Επιλέξτε HTML/JavaScript 
  • Επικολλήστε τον παρακάτω κώδικα:
<style>
#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{width:14px; height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxPiospmN5qApL9XeHDfFURCpQNLKkUASn2VhneJiR5Tcv0JFELHF1Lom_uDw_0bvoIL4ap4_68MZqhSC3W0AcVlervX7j9E1eTI44nwkHr7EdsM9MfbsOyFevyKZoqxI1QrNIWeql-zg/s1600/controls.png) no-repeat 0 0;}
#cboxTopCenter{height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRMYFhDWTsu7LpAh4lBDjqXhUkXU7igGSxyb-i6TqwC2wxNUpJ_glA7rAo4rqqQDupJnRv9-mCJZMphZiuZnzTDVer6F877P6vhFMLXbe8I75GEO9gO5DuK5T5Sy8lMkkHKab-Lv4Vy9g/s400/border.png) repeat-x top left;}
#cboxTopRight{width:14px; height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxPiospmN5qApL9XeHDfFURCpQNLKkUASn2VhneJiR5Tcv0JFELHF1Lom_uDw_0bvoIL4ap4_68MZqhSC3W0AcVlervX7j9E1eTI44nwkHr7EdsM9MfbsOyFevyKZoqxI1QrNIWeql-zg/s1600/controls.png) no-repeat -36px 0;}
#cboxBottomLeft{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxPiospmN5qApL9XeHDfFURCpQNLKkUASn2VhneJiR5Tcv0JFELHF1Lom_uDw_0bvoIL4ap4_68MZqhSC3W0AcVlervX7j9E1eTI44nwkHr7EdsM9MfbsOyFevyKZoqxI1QrNIWeql-zg/s1600/controls.png) no-repeat 0 -32px;}
#cboxBottomCenter{height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRMYFhDWTsu7LpAh4lBDjqXhUkXU7igGSxyb-i6TqwC2wxNUpJ_glA7rAo4rqqQDupJnRv9-mCJZMphZiuZnzTDVer6F877P6vhFMLXbe8I75GEO9gO5DuK5T5Sy8lMkkHKab-Lv4Vy9g/s400/border.png) repeat-x bottom left;}
#cboxBottomRight{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxPiospmN5qApL9XeHDfFURCpQNLKkUASn2VhneJiR5Tcv0JFELHF1Lom_uDw_0bvoIL4ap4_68MZqhSC3W0AcVlervX7j9E1eTI44nwkHr7EdsM9MfbsOyFevyKZoqxI1QrNIWeql-zg/s1600/controls.png) no-repeat -36px -32px;}
#cboxMiddleLeft{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxPiospmN5qApL9XeHDfFURCpQNLKkUASn2VhneJiR5Tcv0JFELHF1Lom_uDw_0bvoIL4ap4_68MZqhSC3W0AcVlervX7j9E1eTI44nwkHr7EdsM9MfbsOyFevyKZoqxI1QrNIWeql-zg/s1600/controls.png) repeat-y -175px 0;}
#cboxMiddleRight{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxPiospmN5qApL9XeHDfFURCpQNLKkUASn2VhneJiR5Tcv0JFELHF1Lom_uDw_0bvoIL4ap4_68MZqhSC3W0AcVlervX7j9E1eTI44nwkHr7EdsM9MfbsOyFevyKZoqxI1QrNIWeql-zg/s1600/controls.png) repeat-y -211px 0;}
#cboxContent{background:#fff; overflow:visible;}
#cboxLoadedContent{margin-bottom:5px;}
#cboxLoadingOverlay{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYNUi5m4qwf1ec65y-FrJ7bgB2cx7X1LGp6yYJY_9W8c1S5laAOP_9Smd5wyQuHR72YJQcSTyX97r7VxXo2C9QERxVO7xzC8gaOiZGo7cDL6Ql1LyFXpQeLYytXv7hvfb8pqtP5iFcmV8/s400/loadingbackground.png) no-repeat center center;}
#cboxLoadingGraphic{https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiP14M3q5RbYYPpNr-ujmK_VyWp74nSHvJqiz-9Yo91YMeGCZb3dAdtrqCqP9Nzs7sUuR3vdp2c9OJ2OxaQUJOyhQmVfOjQ3As4wBH92TOkF5aVpGKlpD9Q3_FFkEdoLqhkO97jBaoE9M/s400/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{position:absolute; bottom:-29px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxPiospmN5qApL9XeHDfFURCpQNLKkUASn2VhneJiR5Tcv0JFELHF1Lom_uDw_0bvoIL4ap4_68MZqhSC3W0AcVlervX7j9E1eTI44nwkHr7EdsM9MfbsOyFevyKZoqxI1QrNIWeql-zg/s1600/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;}


</style>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'></script>
<script src="http://yourjavascript.com/3093182329/btt_jquery.colorbox-min.js">"></script>
<script type="text/javascript">jQuery(document).ready(function(){if (document.cookie.indexOf('visited=false') == -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:"390px", 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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhn0B0RQ6NPyA6JNxkVJJeLSgvs3ozTce1j7NWHt7Snj3blvzifrrL48_P3g6I_FbbC3CfI-SZpXO-lecezcfmA0_06ailiqO7mLYqo9cKfJsmHgAaSm7C-Zt8FZDCpzhYD1Z4sSvdFImo/s1600/subscribe.gif'/></h3> </center>
<center>

<iframe src="//www.facebook.com/plugins/likebox.php?href=ΤΟ LINK ΤΗΣ ΣΕΛΙΔΑΣ ΣΑΣ ΣΤΟ FACEBOOK&amp;width=300&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23ffffff&amp;stream=false&amp;header=false&amp;height=270" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:270px;" allowtransparency="true"></iframe>
</center>

<!--Σας παρακαλώ να μη πειράξετε τον σύνδεσμο, είναι διακριτικός-->
<p style=" float:right; margin-right:10px;" > <a style=" font-size:7px; color:#3B78CD; text-decoration:none;" href="http://www.bloggertipsandtricks.net/2012/04/jquery-facebook-popup-like-box-v2.html" target='_blank'>Blogger Tips & Tricks</a></p>
</div>
</div>
  • Αντικαταστήστε ΤΟ LINK ΤΗΣ ΣΕΛΙΔΑΣ ΣΑΣ ΣΤΟ FACEBOOK με το δικό σας και πατήστε αποθήκευση.
Ο κώδικας αυτός είναι φτιαγμένος να δείχνει το gadget κάθε φορά που γίνεται ανανέωση Σελίδας. Αν δεν το θέλετε απλά αντικαταστήστε το τμήμα του κώδικα ('visited=false') με ('visited=true'). Πατήστε ξανά αποθήκευση και είστε έτοιμοι.

1 comment:

  1. I need to to thank you for this fantastic read!! I absolutely loved every bit of it. I have got you bookmarked to look at new things you post.
    website design


    ReplyDelete

 
back to top