إضافة صندوق المعجبين الخاص بالفيسبوك على شكل نافذة منبثقة popup

في درس اليوم سنشرح كيفية إضافة نافذة منبثقة

بها صندوق الإعجاب الخاص بصفحتك على الفيسبوك

حيث بمجرد دخول الزائر للمدونة ستظهر له هذه النافذة

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

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

نذهب إلى تصميم |عناصر الصفحة| إضافة أداة HTML javascript

نلصق الكود التالي في الأداة

<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(http://imgboot.com/images/cybersidh/controls.png) no-repeat 0 0;}

#cboxTopCenter{height:14px; background:url(http://imgboot.com/images/cybersidh/border.png) repeat-x top left;}

#cboxTopRight{width:14px; height:14px; background:url(http://imgboot.com/images/cybersidh/controls.png) no-repeat -36px 0;}

#cboxBottomLeft{width:14px; height:43px; background:url(http://imgboot.com/images/cybersidh/controls.png) no-repeat 0 -32px;}

#cboxBottomCenter{height:43px; background:url(http://imgboot.com/images/cybersidh/border.png) repeat-x bottom left;}

#cboxBottomRight{width:14px; height:43px; background:url(http://imgboot.com/images/cybersidh/controls.png) no-repeat -36px -32px;}

#cboxMiddleLeft{width:14px; background:url(http://imgboot.com/images/cybersidh/controls.png) repeat-y -175px 0;}

#cboxMiddleRight{width:14px; background:url(http://imgboot.com/images/cybersidh/controls.png) repeat-y -211px 0;}

#cboxContent{background:#fff; overflow:visible;}

#cboxLoadedContent{margin-bottom:5px;}

#cboxLoadingOverlay{background:url(http://imgboot.com/images/cybersidh/loadingbackground.png) no-repeat center center;}

#cboxLoadingGraphic{background:url(http://imgboot.com/images/cybersidh/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(http://imgboot.com/images/cybersidh/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: #F66303;

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>

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>

<h3 class="box-title">Receive all updates via Facebook. Just Click the Like Button Below<center><p style="line-height:3px;" >▼</p></center></h3>

</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.mybloggertricks.com">Blogger Widgets</a></p>

</div>

.................................................................

إسم صفحتك على الفيسبوك:إسم صفحتنا على الفيسبوك هوm3lomadelivery

إضافة صندوق المعجبين الخاص بالفيسبوك على شكل نافذة منبثقة popup

1 التعليقات:

إرسال تعليق

اتبعني

التدوينات RSS

صفحتنا على FACEBOOK

spo

الأقسام العامة

شروحات واضافات بلوجر

أقسام الكتب

طلبات البحث