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

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

نمر لشرح الطريقة:


1.اذهب للوحة التحكم الخاصة بمدونك
2. تخطيط.
3.عناصر الصفحة.
3.إضافة أداة.
4.اختار  Html/Javascript.
5.أضف الكود التالي:

<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 - [email protected])

*/

#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/AVvXsEgogaBuH21xddRkRqE8QYYb7U8G6Ze90Cr2uzMGKWlOCM5JEoc2htfdYL2ItRqnH-jfOkQR7GHPivn5CtqJagzsth9qWtKeyXHFdcZLiVXKVtMErM9P4R7Z6o9pj7VbHH6qKp0QDmnpU68/s1600/controls.png) no-repeat 0 0}#cboxTopCenter{height:14px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglbMFRSAVS6sk-VdzTmZibe49dGcqVPkF_C2g0TfJn2s2KYp2Tb9IUwiD_yTDaVndJN8MEkv1VA69aIZj6dccthriHU4OwWmHByYNJwopFYVpDTmLVc5lwXho53oogSvRNh7LuZXCDHr4/s400/border.png) repeat-x top left}#cboxTopRight{width:14px;height:14px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgogaBuH21xddRkRqE8QYYb7U8G6Ze90Cr2uzMGKWlOCM5JEoc2htfdYL2ItRqnH-jfOkQR7GHPivn5CtqJagzsth9qWtKeyXHFdcZLiVXKVtMErM9P4R7Z6o9pj7VbHH6qKp0QDmnpU68/s1600/controls.png) no-repeat -36px 0}#cboxBottomLeft{width:14px;height:43px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgogaBuH21xddRkRqE8QYYb7U8G6Ze90Cr2uzMGKWlOCM5JEoc2htfdYL2ItRqnH-jfOkQR7GHPivn5CtqJagzsth9qWtKeyXHFdcZLiVXKVtMErM9P4R7Z6o9pj7VbHH6qKp0QDmnpU68/s1600/controls.png) no-repeat 0 -32px}#cboxBottomCenter{height:43px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglbMFRSAVS6sk-VdzTmZibe49dGcqVPkF_C2g0TfJn2s2KYp2Tb9IUwiD_yTDaVndJN8MEkv1VA69aIZj6dccthriHU4OwWmHByYNJwopFYVpDTmLVc5lwXho53oogSvRNh7LuZXCDHr4/s400/border.png) repeat-x bottom left}#cboxBottomRight{width:14px;height:43px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgogaBuH21xddRkRqE8QYYb7U8G6Ze90Cr2uzMGKWlOCM5JEoc2htfdYL2ItRqnH-jfOkQR7GHPivn5CtqJagzsth9qWtKeyXHFdcZLiVXKVtMErM9P4R7Z6o9pj7VbHH6qKp0QDmnpU68/s1600/controls.png) no-repeat -36px -32px}#cboxMiddleLeft{width:14px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgogaBuH21xddRkRqE8QYYb7U8G6Ze90Cr2uzMGKWlOCM5JEoc2htfdYL2ItRqnH-jfOkQR7GHPivn5CtqJagzsth9qWtKeyXHFdcZLiVXKVtMErM9P4R7Z6o9pj7VbHH6qKp0QDmnpU68/s1600/controls.png) repeat-y -175px 0}#cboxMiddleRight{width:14px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgogaBuH21xddRkRqE8QYYb7U8G6Ze90Cr2uzMGKWlOCM5JEoc2htfdYL2ItRqnH-jfOkQR7GHPivn5CtqJagzsth9qWtKeyXHFdcZLiVXKVtMErM9P4R7Z6o9pj7VbHH6qKp0QDmnpU68/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/AVvXsEio8QJMi9iPCgba7uDwj-Eswt78mflnY2BU8f7X9b9J3MZPYK_rWHPBOimxncHAtYHFwDuPRcAIfwiFKsOS8IbtZJIVwmv1kYEhxGaRMzMZMCHCP1HcOD9oyt06KihV7wJxsKEZAK2fw58/s400/loadingbackground.png) no-repeat center center}#cboxLoadingGraphic{https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhA5jn-kMPxRW_ByHT55nKRf8NWdPssat7AodIx3Fp6c0GKlQRJ5b6bCzbzNmYiuhpxMGdRF6X6ysKbeOSV3nyH505An2Ndd7Ekm7SNS8iVjsxRn588INs1I4tXTz_-64_FtRacK-ffORM/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/AVvXsEgogaBuH21xddRkRqE8QYYb7U8G6Ze90Cr2uzMGKWlOCM5JEoc2htfdYL2ItRqnH-jfOkQR7GHPivn5CtqJagzsth9qWtKeyXHFdcZLiVXKVtMErM9P4R7Z6o9pj7VbHH6qKp0QDmnpU68/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">كن من متتبعي الموقع وتوصل بجديد الموقع فقط بأضغط على زر الإعجاب</h3></center><center>

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

6.قم بتغير ما كتب باللون الأحمر بإسم صفحتك على Facebook.
7.قم بحفظ الآداة.


أتمنى أن يكون الدرس في متناول الجميع,في حال كان هنالك أي إستفسار لا تترددوا في وضع  إستفساراتكم في تعليق.

المرجو دعم الموقع من خلال الإشتراك على صفحاتنا على المواقع الإجتماعية و مشاركة الدروس مع أصدقاءكم.