السلام عليكم ورحمة الله .
درس اليوم هو عن طريقة إضافة نافذة منبثقة لصندوق إعجابات الفيسبوك لمدونات بلوجر بتقنية 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 - 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/AVvXsEgbDZEA3GjAFHUNMDGA_2mRZWvD_CPX9hzgEzBCjHSlHtWtkDHsv3iPRbC37RpBegZP9QhZP4hYrEASgUbdSFPiBGl0G6_nkv9ciYY6DoVsjCbm12HFD9aZ6_zNuP5ecusExSes38xFvok/s1600/controls.png)
no-repeat 0
0}#cboxTopCenter{height:14px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgF2_xKEhk3HuJmU9cCczHDqKiwIMT-nb_GjbdN99vHJeBICdEP_3NrILClrxFEOfNYR0tIlJ8S25uRadKblx25klpMQTOjPhjrrvWoFXkRRZ6-Qvn9YDu_0KyB3hF-TnxMheDIIdiCDUY/s400/border.png)
repeat-x top
left}#cboxTopRight{width:14px;height:14px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbDZEA3GjAFHUNMDGA_2mRZWvD_CPX9hzgEzBCjHSlHtWtkDHsv3iPRbC37RpBegZP9QhZP4hYrEASgUbdSFPiBGl0G6_nkv9ciYY6DoVsjCbm12HFD9aZ6_zNuP5ecusExSes38xFvok/s1600/controls.png)
no-repeat -36px
0}#cboxBottomLeft{width:14px;height:43px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbDZEA3GjAFHUNMDGA_2mRZWvD_CPX9hzgEzBCjHSlHtWtkDHsv3iPRbC37RpBegZP9QhZP4hYrEASgUbdSFPiBGl0G6_nkv9ciYY6DoVsjCbm12HFD9aZ6_zNuP5ecusExSes38xFvok/s1600/controls.png)
no-repeat 0
-32px}#cboxBottomCenter{height:43px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgF2_xKEhk3HuJmU9cCczHDqKiwIMT-nb_GjbdN99vHJeBICdEP_3NrILClrxFEOfNYR0tIlJ8S25uRadKblx25klpMQTOjPhjrrvWoFXkRRZ6-Qvn9YDu_0KyB3hF-TnxMheDIIdiCDUY/s400/border.png)
repeat-x bottom
left}#cboxBottomRight{width:14px;height:43px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbDZEA3GjAFHUNMDGA_2mRZWvD_CPX9hzgEzBCjHSlHtWtkDHsv3iPRbC37RpBegZP9QhZP4hYrEASgUbdSFPiBGl0G6_nkv9ciYY6DoVsjCbm12HFD9aZ6_zNuP5ecusExSes38xFvok/s1600/controls.png)
no-repeat -36px
-32px}#cboxMiddleLeft{width:14px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbDZEA3GjAFHUNMDGA_2mRZWvD_CPX9hzgEzBCjHSlHtWtkDHsv3iPRbC37RpBegZP9QhZP4hYrEASgUbdSFPiBGl0G6_nkv9ciYY6DoVsjCbm12HFD9aZ6_zNuP5ecusExSes38xFvok/s1600/controls.png)
repeat-y -175px
0}#cboxMiddleRight{width:14px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbDZEA3GjAFHUNMDGA_2mRZWvD_CPX9hzgEzBCjHSlHtWtkDHsv3iPRbC37RpBegZP9QhZP4hYrEASgUbdSFPiBGl0G6_nkv9ciYY6DoVsjCbm12HFD9aZ6_zNuP5ecusExSes38xFvok/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/AVvXsEi7Xo9sM_3YQ3sLW2F2I-EIgKmG_0EpOQhp9xTNc3wUj8UocV51mz6mdLT9rbvkZd3cCWriyKIIDW95b1If4pY6gD1Oixil6ma5-mu9CjbwakTgtRbRYpJ3bsU23jz3pyBiH6Gpc4jG6vk/s400/loadingbackground.png)
no-repeat center
center}#cboxLoadingGraphic{https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKfeXOFA879AVfA48Wjo2OMwkOoz-zfqInD-Ej4f9GaQBLhftPJvYnrJkTImyuX7QLNxNGYaD2WGx7K1aIH4TB7JlQDEdg4l6NtnDXAtFvhIbUh0-vPVv312Jd9TUIXEYjL5XjX_d_6lY/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/AVvXsEgbDZEA3GjAFHUNMDGA_2mRZWvD_CPX9hzgEzBCjHSlHtWtkDHsv3iPRbC37RpBegZP9QhZP4hYrEASgUbdSFPiBGl0G6_nkv9ciYY6DoVsjCbm12HFD9aZ6_zNuP5ecusExSes38xFvok/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&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://www.4we-eb.blogspot.com">4we-eb</a></p>
</div></div>
6.قم بتغير ما كتب باللون الأحمر بإسم صفحتك على Facebook.
7.قم بحفظ الآداة.
أتمنى أن يكون الدرس في متناول الجميع,في حال كان هنالك أي إستفسار لا تترددوا في وضع إستفساراتكم في تعليق.
المرجو دعم الموقع من خلال الإشتراك على صفحاتنا على المواقع الإجتماعية و مشاركة الدروس مع أصدقاءكم.
ازاي اغير رابط صفحتي
ردحذف