8 POP UP FACEBOOK LIKE BOX

Σε προηγούμενη ανάρτηση σας έδειξα πως μπορείτε να προσθέσετε στο Blog σας FLOATING FACEBOOK LIKE BOX.
Σε αυτή την ανάρτηση θα σας  δείξω πως να τοποθετήσετε ένα επίσης μοναδικό και όμορφο Facebook gadget.Ότταν εισέρχεται κάποιος επισκέπτης στο blog σας θα εμφανίστει ένα αναδυόμενο παράθυρο  του facebook like box.Επιπλέον το gadget θα εμφανιστεί μόνο στην πρώτη επίσκεψη ώστε οι αναγνώστες ή εσείς να μην χρειαστεί να το βλέπετε κάθε φορά

Η διαδικασία είναι η εξής:
Σχεδίαση ►Προσθήκη gadget►Επιλέξτε HTML/Javascript►Αντιγραφή-Επικόλληση τον παρακάτω κωδικό

<style>

    /*

    ColorBox Core Style:

    The following CSS is consistent between example themes and should not be altered.

    */

    #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/AVvXsEjej6AjuoM7G_3CJPOy9cvmecUuzOF2wb4K8QZM-9dR6ZejfdOTE_jUxi1x0Qb7IJIl4hv87vYx_KRZHh_rNXwt_rC7UN_Y-PZIEKuGba6cVKqsRx_lPc32a_INY7_3OhRQrBNTOiJ5DTDF/s1600/controls.png) no-repeat 0 0;}

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

    #cboxTopRight{width:14px; height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjej6AjuoM7G_3CJPOy9cvmecUuzOF2wb4K8QZM-9dR6ZejfdOTE_jUxi1x0Qb7IJIl4hv87vYx_KRZHh_rNXwt_rC7UN_Y-PZIEKuGba6cVKqsRx_lPc32a_INY7_3OhRQrBNTOiJ5DTDF/s1600/controls.png) no-repeat -36px 0;}

    #cboxBottomLeft{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjej6AjuoM7G_3CJPOy9cvmecUuzOF2wb4K8QZM-9dR6ZejfdOTE_jUxi1x0Qb7IJIl4hv87vYx_KRZHh_rNXwt_rC7UN_Y-PZIEKuGba6cVKqsRx_lPc32a_INY7_3OhRQrBNTOiJ5DTDF/s1600/controls.png) no-repeat 0 -32px;}

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

    #cboxBottomRight{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjej6AjuoM7G_3CJPOy9cvmecUuzOF2wb4K8QZM-9dR6ZejfdOTE_jUxi1x0Qb7IJIl4hv87vYx_KRZHh_rNXwt_rC7UN_Y-PZIEKuGba6cVKqsRx_lPc32a_INY7_3OhRQrBNTOiJ5DTDF/s1600/controls.png) no-repeat -36px -32px;}

    #cboxMiddleLeft{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjej6AjuoM7G_3CJPOy9cvmecUuzOF2wb4K8QZM-9dR6ZejfdOTE_jUxi1x0Qb7IJIl4hv87vYx_KRZHh_rNXwt_rC7UN_Y-PZIEKuGba6cVKqsRx_lPc32a_INY7_3OhRQrBNTOiJ5DTDF/s1600/controls.png) repeat-y -175px 0;}

    #cboxMiddleRight{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjej6AjuoM7G_3CJPOy9cvmecUuzOF2wb4K8QZM-9dR6ZejfdOTE_jUxi1x0Qb7IJIl4hv87vYx_KRZHh_rNXwt_rC7UN_Y-PZIEKuGba6cVKqsRx_lPc32a_INY7_3OhRQrBNTOiJ5DTDF/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/AVvXsEhEQoQOpVBNnOiBarRKddvcnv07rEsgtzkDFQEpDfn48-qKWPZ1kf8dlpsbouaLaiPxBELpFETUZ326jjy8O0KAVe72-_VjQvRn6BDeJ4aHl4xjedB444OyPYGIS4vlIdXFJ0E3T8QYkluo/s1600/loading-background.png) no-repeat center center;}

    #cboxLoadingGraphic{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTxWEh7M-bp069DlvH34aeKMHVZ2It8R2LRkqc_W31dGEEsHYFtvCpBsFWzQnKTjTuRFXdEQsuPt5T_4otYV4q910taLi7AaS7WJ9Sot_Wl-n6UPRMvtj6HbczW2w_79nsu2Im9VI2PQ58/s1600/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/AVvXsEjej6AjuoM7G_3CJPOy9cvmecUuzOF2wb4K8QZM-9dR6ZejfdOTE_jUxi1x0Qb7IJIl4hv87vYx_KRZHh_rNXwt_rC7UN_Y-PZIEKuGba6cVKqsRx_lPc32a_INY7_3OhRQrBNTOiJ5DTDF/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;}

    /*-----------------------------------------------------------------------------------*/

    /* Facebook Likebox popup For Blogger

    /*-----------------------------------------------------------------------------------*/

    #subscribe {

    font: 12px/1.2 Arial,Helvetica,san-serif; color:#666;

    }

    #subscribe a,

    #subscribe a:hover,

    #subscribe a:visited {

    text-decoration:none;

    }

    .box-title {

    color: #3B5998;

    font-size: 20px !important;

    font-weight: bold;

    margin: 10px 0;

    border:1px solid #ddd;

    -moz-border-radius:6px;

    -webkit-border-radius:6px;

    border-radius:6px;

    box-shadow: 5px 5px 5px #CCCCCC;

    padding:10px;

    line-height:25px; font-family:arial !important;

    }

    .box-tagline {

    color: #999;

    margin: 0;

    text-align: center;

    }

    #subs-container {

    padding: 35px 0 30px 0;

    position: relative;

    }

    a:link, a:visited {

    border:none;

    }

    .demo {

    display:none;

    }

    </style>

    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js'></script>

    <script src="http://yourjavascript.com/11215013191/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>

    <!-- This contains the hidden content for inline calls -->

    <div style='display:none'>

    <div id='subscribe' style='padding:10px; background:#fff;'>

    <h3 class="box-title">Για να λαμβάνετε όλες τις ενημερώσεις μέσω Facebook.Απλά κάντε κλίκ στο like button και γίνετε μέλη<center><p style="line-height:3px;" >▼</p></center></h3>

    <center>

    <iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FJMakeup4you&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>

    <p style=" float:right; margin-right:35px; font-size:9px;" >Powered By | <a style=" font-size:9px; color:#3B78CD; text-decoration:none;" href="http://blog-act-design.blogspot.com/">Useful Gadgets</a>

    </div>

    </div>

Αντικαταστήστε το JMakeup4you με το δικό σας username της σελίδας σας στο facebook.Αν η σελίδα σας δεν έχει ένα απλό username τότε δημιουργήστε ένα Like box εδώ

Μόλις το δημιουργήσετε αντιγράψτε τον i-frame κωδικό 
και επικολλήστε τον στον κωδικό με το θαλασσί χρώμα

ΑΠΟΘΗΚΕΥΣΗ

                                         





ΑΝ ΣΑΣ ΑΡΕΣΕ ΤΟ ΑΡΘΡΟ ΒΑΘΜΟΛΟΓΗΣΤΕ Ή ΑΦΗΣΤΕ ΤΟ ΣΧΟΛΙΟ ΣΑΣ!!!