POP UP FACEBOOK LIKE BOX



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






 <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/AVvXsEil-HbK7SdZgPddAwKsURvma9lOkEVK9ksgjAMxpNyoS9SXyDpZr_UrZaVZ8OQmrCoeC-Jx4F9vbyKqiVFhjptpT-XIDTm7Z5vNDy5YT23Oq47SfI1LdsgAPkw23up3aJLpP3uwTcyVt9xr/s1600/controls.png) no-repeat 0 0;}
    #cboxTopCenter{height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi37sgXR1tUfVAaCb-VZUdPE0QmieOBcaIP2cRIyfRhidjGoqFSgItpP7RWcj5Smo4qg5lrcW7R4PhPTBgZ43SDJYg9HDQdHLlNBWSrRHk4qQ6srByXtt7QhYX5XP3G-jCQZ7HxjLbnFlz7/s1600/border.png) repeat-x top left;}
    #cboxTopRight{width:14px; height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEil-HbK7SdZgPddAwKsURvma9lOkEVK9ksgjAMxpNyoS9SXyDpZr_UrZaVZ8OQmrCoeC-Jx4F9vbyKqiVFhjptpT-XIDTm7Z5vNDy5YT23Oq47SfI1LdsgAPkw23up3aJLpP3uwTcyVt9xr/s1600/controls.png) no-repeat -36px 0;}
    #cboxBottomLeft{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEil-HbK7SdZgPddAwKsURvma9lOkEVK9ksgjAMxpNyoS9SXyDpZr_UrZaVZ8OQmrCoeC-Jx4F9vbyKqiVFhjptpT-XIDTm7Z5vNDy5YT23Oq47SfI1LdsgAPkw23up3aJLpP3uwTcyVt9xr/s1600/controls.png) no-repeat 0 -32px;}
    #cboxBottomCenter{height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi37sgXR1tUfVAaCb-VZUdPE0QmieOBcaIP2cRIyfRhidjGoqFSgItpP7RWcj5Smo4qg5lrcW7R4PhPTBgZ43SDJYg9HDQdHLlNBWSrRHk4qQ6srByXtt7QhYX5XP3G-jCQZ7HxjLbnFlz7/s1600/border.png) repeat-x bottom left;}
    #cboxBottomRight{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEil-HbK7SdZgPddAwKsURvma9lOkEVK9ksgjAMxpNyoS9SXyDpZr_UrZaVZ8OQmrCoeC-Jx4F9vbyKqiVFhjptpT-XIDTm7Z5vNDy5YT23Oq47SfI1LdsgAPkw23up3aJLpP3uwTcyVt9xr/s1600/controls.png) no-repeat -36px -32px;}
    #cboxMiddleLeft{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEil-HbK7SdZgPddAwKsURvma9lOkEVK9ksgjAMxpNyoS9SXyDpZr_UrZaVZ8OQmrCoeC-Jx4F9vbyKqiVFhjptpT-XIDTm7Z5vNDy5YT23Oq47SfI1LdsgAPkw23up3aJLpP3uwTcyVt9xr/s1600/controls.png) repeat-y -175px 0;}
    #cboxMiddleRight{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEil-HbK7SdZgPddAwKsURvma9lOkEVK9ksgjAMxpNyoS9SXyDpZr_UrZaVZ8OQmrCoeC-Jx4F9vbyKqiVFhjptpT-XIDTm7Z5vNDy5YT23Oq47SfI1LdsgAPkw23up3aJLpP3uwTcyVt9xr/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/AVvXsEjm2oiw1igx4_c8aNpRhZmLtGaDBBQHtjmbdtUs4IscA_tf7Qv7o53cvjcDk-Rohx9nGc_ooZY1_qNNwpxFuNo0rPSmETtyREn5ExGf95U9vXhlRsvKnUnZPZxO475W-9ftk30YBXDRtO0-/s1600/loading-background.png) no-repeat center center;}
    #cboxLoadingGraphic{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1oWjZQRwvRyG6DKoEz55lrcRn2lwPId9MunE9U996_GKy9hlpnad7Q1sgfHJe9GAAv9i9ncvXZ_-ydSCLOKKM5dOcY1B0-CoCGWcNs2lw7uGf4xCCgS1PGWz7d-moIY_ncdOMpYtPpKxo/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/AVvXsEil-HbK7SdZgPddAwKsURvma9lOkEVK9ksgjAMxpNyoS9SXyDpZr_UrZaVZ8OQmrCoeC-Jx4F9vbyKqiVFhjptpT-XIDTm7Z5vNDy5YT23Oq47SfI1LdsgAPkw23up3aJLpP3uwTcyVt9xr/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%2Ffanpageyour&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>
 
Η διαδικασία είναι η εξής:
Σχεδίαση ►Προσθήκη gadget►Επιλέξτε HTML/Javascript►Αντιγραφή-Επικόλληση τον παρακάτω κωδικό

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

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



ΑΠΟΘΗΚΕΥΣΗ




POP UP FACEBOOK LIKE BOX Reviewed by Live Tv on 6:55 π.μ. Rating: 5
All Rights Reserved by Blogger Tips Hacks © 2014 - 2015
Powered By Blogger, Designed by Sweetheme

Φόρμα επικοινωνίας

Όνομα

Ηλεκτρονικό ταχυδρομείο *

Μήνυμα *

Εικόνες θέματος από imacon. Από το Blogger.