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&width=300&colorscheme=light&show_faces=true&border_color=%23ffffff&stream=false&header=false&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: