إضافة نافذة منبثقة بتقنية jQuery لصندوق إعجابات الفيسبوك للبـلوجر

السلام عليكم الإضافة هي عبارة عن نافذة منبثقة تلقائيا لتسجيل الإعجاب بصفحتك على الفيسبوك ، غير مزعجة نهائيا بحكم أنها تنبثق فقط مرة واحدة للأشخاص الذين لم يسجلوا بعد إعجابهم بصفحة مدونتك الخاصة على الفيسبوك، عكس بعض الإضافات الأخرى في نفس الإطار التي تجعل زائر مدونتك يغادرها دون الرجوع إليها ، لكونها تنبثق كلما فتح موضوع معين أو قسم معين على مدونتك الخاصة .

طريقة التركيب

.1 اذهب للوحة التحكم

2. تخطيط 

3.عناصر الصفحة

4. اضف اداة

6.اختار  Html/Javascript

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'></script>
<script src="http://exeideasinternational.googlecode.com/files/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:"#exestylepopups"});
}
});
</script>
<style type="text/css">
/*
ColorBox v1.3.16
(Copyright (c) 2011 Jack Moore - jack@colorpowered.com)
*/
#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}#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/AVvXsEjEGAjzZIwYYuHpSgxa4SvkP3wpO7NraKumi_D43KNzi_s8F8Xyx7sEAt867dS9jyyNOvHfwLs8hKU2Epi4dsaynKYMaU2tl56NtoVnmZ8NXOnw_GMrs5iDvrVpRUUg3xRZbJ4RApXcTls/s1600/controls.png) no-repeat 0 0}#cboxTopCenter{height:14px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjX8pBz0aULkUZou5RUTGdR_2NetfNEu2TmwJNqi_1kEbS2XCxBLYcd082_2lJ5ndvUhL0xZyswiJWKbHF9FpyFwGCwfTOsQqZCxl72EBhg4yLkMQRCF3Br1Ye4VE6A3EW-9U4yUy15n8/s400/border.png) repeat-x top left}#cboxTopRight{width:14px;height:14px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEGAjzZIwYYuHpSgxa4SvkP3wpO7NraKumi_D43KNzi_s8F8Xyx7sEAt867dS9jyyNOvHfwLs8hKU2Epi4dsaynKYMaU2tl56NtoVnmZ8NXOnw_GMrs5iDvrVpRUUg3xRZbJ4RApXcTls/s1600/controls.png) no-repeat -36px 0}#cboxBottomLeft{width:14px;height:43px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEGAjzZIwYYuHpSgxa4SvkP3wpO7NraKumi_D43KNzi_s8F8Xyx7sEAt867dS9jyyNOvHfwLs8hKU2Epi4dsaynKYMaU2tl56NtoVnmZ8NXOnw_GMrs5iDvrVpRUUg3xRZbJ4RApXcTls/s1600/controls.png) no-repeat 0 -32px}#cboxBottomCenter{height:43px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjX8pBz0aULkUZou5RUTGdR_2NetfNEu2TmwJNqi_1kEbS2XCxBLYcd082_2lJ5ndvUhL0xZyswiJWKbHF9FpyFwGCwfTOsQqZCxl72EBhg4yLkMQRCF3Br1Ye4VE6A3EW-9U4yUy15n8/s400/border.png) repeat-x bottom left}#cboxBottomRight{width:14px;height:43px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEGAjzZIwYYuHpSgxa4SvkP3wpO7NraKumi_D43KNzi_s8F8Xyx7sEAt867dS9jyyNOvHfwLs8hKU2Epi4dsaynKYMaU2tl56NtoVnmZ8NXOnw_GMrs5iDvrVpRUUg3xRZbJ4RApXcTls/s1600/controls.png) no-repeat -36px -32px}#cboxMiddleLeft{width:14px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEGAjzZIwYYuHpSgxa4SvkP3wpO7NraKumi_D43KNzi_s8F8Xyx7sEAt867dS9jyyNOvHfwLs8hKU2Epi4dsaynKYMaU2tl56NtoVnmZ8NXOnw_GMrs5iDvrVpRUUg3xRZbJ4RApXcTls/s1600/controls.png) repeat-y -175px 0}#cboxMiddleRight{width:14px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEGAjzZIwYYuHpSgxa4SvkP3wpO7NraKumi_D43KNzi_s8F8Xyx7sEAt867dS9jyyNOvHfwLs8hKU2Epi4dsaynKYMaU2tl56NtoVnmZ8NXOnw_GMrs5iDvrVpRUUg3xRZbJ4RApXcTls/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/AVvXsEik7qvt-SS2RaWTqYQvtyuZuuulVogDcHu0jbQ3z4QZ4It4Gz29devZTaoylNvgZEaNj9EYsgXxFsvEYfJWMyr0tf3MZcY7O4qgnORibfFMLgqfvCcERZgoQvYpbISJM42tBBES8FCg2Lk/s400/loadingbackground.png) no-repeat center center}#cboxLoadingGraphic{https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0Ha2QHqfzUFvVBHKgyVPDOwXrHfIeuxoQKVoKI1Iy2DXLaxu9rXYFAy0n2m-fEPRU8BvEXJ3gp1HOB_VnYXAL0TtDUZsd430qRKn6x-ee_Yb_I0_z1fK1oFI8ho13r2RKAhSp569L6Vo/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/AVvXsEjEGAjzZIwYYuHpSgxa4SvkP3wpO7NraKumi_D43KNzi_s8F8Xyx7sEAt867dS9jyyNOvHfwLs8hKU2Epi4dsaynKYMaU2tl56NtoVnmZ8NXOnw_GMrs5iDvrVpRUUg3xRZbJ4RApXcTls/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}#mdfb{font:12px/1.2 Arial,Helvetica,san-serif;color:#666}#mdfb a,#mdfb a:hover,#mdfb a:visited{text-decoration:none}.mdbox-title{background:#000;color:#fff;font-size:20px !important;font-weight:bold;margin:10px 0;border:20px solid #ddd;-moz-border-radius:6px;-webkit-border-radius:6px;border-radius:6px;box-shadow:5px 5px 5px #CCC;padding:10px;line-height:25px;font-family:arial !important}
</style>
<div style='display:none'>
<div id='exestylepopups' style='padding:10px; background:#fff;'>
<center><h3 class="mdbox-title">Receive all updates via Facebook. Just Click the Like Button Below...</h3></center><center>
<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fchahidna&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://www.4we-eb.blogspot.com">4we-eb</a></p>
</div></div>

 ملاحظة : الإسم التعريفي لصفحتك على الفيسبوك هو الإسم الأخير في رابط الصفحة

 مثلا : www.facebook.com/chahidna