jQuery Facebook Popup Like Box v2 (Update)

Είναι μια βελτίωση στον κώδικα της ανάρτησης που έκανε πάταγο. Η διαφορά με το 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/AVvXsEhYj20KLTq63mwPat3BMj-yllYG3dwNr2B2KAkh3bGHGlLreK2z5TUH38felMWVW9cjcck6oZdHJoG6dF41AaQFadM7C24J5hkWSFy0xrG3WYYZgj6-_r6QMtecLjb51WEkv07-1mYI3sY/s1600/controls.png) no-repeat 0 0;}

#cboxTopCenter{height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3-uA1OXMXW7L8DOS48Ap89p1TMiLd40dUvqYWLNmQHC1P_ZBFSzSy9FnB19IFYglRMqtDFdTXyKKg81dLyrztO6UgL3GEB9M7Zrlrs0_QSvzlZbkR4v9qezWpiaPAA9m7_3KnZtz-UG4/s400/border.png) repeat-x top left;}

    #cboxTopRight{width:14px; height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYj20KLTq63mwPat3BMj-yllYG3dwNr2B2KAkh3bGHGlLreK2z5TUH38felMWVW9cjcck6oZdHJoG6dF41AaQFadM7C24J5hkWSFy0xrG3WYYZgj6-_r6QMtecLjb51WEkv07-1mYI3sY/s1600/controls.png) no-repeat -36px 0;}

    #cboxBottomLeft{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYj20KLTq63mwPat3BMj-yllYG3dwNr2B2KAkh3bGHGlLreK2z5TUH38felMWVW9cjcck6oZdHJoG6dF41AaQFadM7C24J5hkWSFy0xrG3WYYZgj6-_r6QMtecLjb51WEkv07-1mYI3sY/s1600/controls.png) no-repeat 0 -32px;}

    #cboxBottomCenter{height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3-uA1OXMXW7L8DOS48Ap89p1TMiLd40dUvqYWLNmQHC1P_ZBFSzSy9FnB19IFYglRMqtDFdTXyKKg81dLyrztO6UgL3GEB9M7Zrlrs0_QSvzlZbkR4v9qezWpiaPAA9m7_3KnZtz-UG4/s400/border.png) repeat-x bottom left;}

    #cboxBottomRight{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYj20KLTq63mwPat3BMj-yllYG3dwNr2B2KAkh3bGHGlLreK2z5TUH38felMWVW9cjcck6oZdHJoG6dF41AaQFadM7C24J5hkWSFy0xrG3WYYZgj6-_r6QMtecLjb51WEkv07-1mYI3sY/s1600/controls.png) no-repeat -36px -32px;}

    #cboxMiddleLeft{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYj20KLTq63mwPat3BMj-yllYG3dwNr2B2KAkh3bGHGlLreK2z5TUH38felMWVW9cjcck6oZdHJoG6dF41AaQFadM7C24J5hkWSFy0xrG3WYYZgj6-_r6QMtecLjb51WEkv07-1mYI3sY/s1600/controls.png) repeat-y -175px 0;}

    #cboxMiddleRight{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYj20KLTq63mwPat3BMj-yllYG3dwNr2B2KAkh3bGHGlLreK2z5TUH38felMWVW9cjcck6oZdHJoG6dF41AaQFadM7C24J5hkWSFy0xrG3WYYZgj6-_r6QMtecLjb51WEkv07-1mYI3sY/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/AVvXsEhIEiEmv96WS_S5ElMwhKnOWgHLalm_K4D4KwqHIQwoliCn9rxcaecITVm9h6GXLPGhVFb67KQDOOrMXXf3jiokuFHrZ2ay6W4prZRnQhG5tJZSIxDUOMT_X93ckZxElGGKzh-J3fTZytA/s400/loadingbackground.png) no-repeat center center;}

        #cboxLoadingGraphic{https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZrC56HR_XPXGy6FFOjbITL2GAXcMQ-gMriWqmMlZpcc833umfK3gkh60ITyLp_IuLar89fHxJLQ6Z3zwQwt1FGoiy6AA-jaTM6QreaFTtHpDRsaeYiOeeKd71ngQM9s6zkv_46ivdijc/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/AVvXsEhYj20KLTq63mwPat3BMj-yllYG3dwNr2B2KAkh3bGHGlLreK2z5TUH38felMWVW9cjcck6oZdHJoG6dF41AaQFadM7C24J5hkWSFy0xrG3WYYZgj6-_r6QMtecLjb51WEkv07-1mYI3sY/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/AVvXsEglCP6XdEoibHcg-zWgFZbL4zrULpmGTqzVXC2LC-t6bKAk-IH18T4pOBucrwODfpxjNypooZ7GWN5YuabcUM7gixZ0yrht8cqXNau-88iL9Aqpa_9EqFz2af_7XdmTdGD_kP1krmIg4Lk/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'). Πατήστε ξανά αποθήκευση και είστε έτοιμοι.