Facebook LikeBox Popup - V2 الصندوق المنبثق
السلام عليكم ورحمة الله وبركاته.
أسعد الله مساءكم بكل خير أعزائي .. !
الكثير من متتبعي مدونة "نوردكسْ" سيلاحظون مؤخراً أنني نشرتُ موضوع عن إضافة رائعة لمدونات بلوجر تتعلق بصندوق إعجاب بصفحة الفيسبوك ينبثق لزائر مدونتك للمرة الأولى، ويطلب منهم الإلتحاق بالصفحة بالظغط على زر "أعجبني"، حتى يتسنى لهم تتبع جديد المدون عبر صفحة الفايسبوكْ.
اليوم أتيتكم بنسخة ثانية لإصدار الإضافة Facebook LikeBox Popup V2
الجديد في النسخة الثاني، أن صندوق الفيسبوكْ يكون مرفقـاً بخذمة المتابعة عبر البريد الإلكتروني، فعندما يطلب من الزائر الإشتراك في الصفحة عبر الظغط على زر "أعجبني"، يُقترحُ كذلك علبه الزائر إضافة بريده الإلكتروني، ليصله جديد ماينشر بالمدونة عبر الإيميل و بشكل مجاني, و هذه صوة توضح الشكل الجديد للإضافة
الآن نأتي إلى الإضافة .
توجه إلى لوحة التحكم في مدونتك
1. تم اظغط على "تصميم"
2. تم "إضافة أداة جديدة"
3ّ. اختر "HTML/javascript widget"
4. تم أضف الكود التالي :
<style>
/* Jquery Facebook Likebox Popup Version 2.0 */
#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 Version 2.0
/*-----------------------------------------------------------------------------------*/
#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: 18px !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;
}
/* ---------Nordax Subscribe Form---------- */
.box-title1 {
border:1px solid #ddd;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
box-shadow: 5px 5px 5px #CCCCCC;
padding:10px;
margin: 10px 0;
}
.enteryouremail{
background: #fff !important;
border: 1px solid #d2d2d2;
padding: 0px 8px 0px 8px;
color: #a19999; font-size: 12px;
height: 25px; width: 165px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
margin:0px;
}
.submitbutton{
background:#F66303;
border: 1px solid #F66303;
text-shadow: 1px 1px 1px #333;
box-shadow: 3px 3px 3px #666;
font:bold 12px Arial, sans-serif;
color: #fff;
height: 25px;
padding: 0 12px 0 12px;
margin: 0 0 0 5px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
cursor:pointer;}
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js'></script>
<script src="http://mybloggertricks.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:"#subscribe"});
}
});
</script>
<div style='display:none'>
<div id='subscribe' style='padding:10px; background:#fff;'>
<h3 class="box-title">إظغط على زر "أعجبني" حتى يتسنى لك متابعة جديد المدونة عبر الفايسبوك<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%2Fnordax.ma&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>
<div class="box-title1 ">
<center>
<h3 style="color:#F66303;">يمكنك كذلك متابعة جديد المدونة عبر البريد الإلكتروني - الخذمة مجانية</h3>
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=cba9s78j7o1qu6gkvui13tmn90', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input gtbfieldid="10" class="enteryouremail" name="email" value="Enter your email here..." onblur="if (this.value == '') {this.value = 'أضف بريدك الإلكتروني هنا... ';}" onfocus="if (this.value == 'أضف بريدك الإلكتروني هنا...') {this.value = '';}" type="text" /><input value="cba9s78j7o1qu6gkvui13tmn90" name="uri" type="hidden" /><input value="إشترك الآن" class="submitbutton" type="إشترك الآن" /></form>
</center>
</div></div></div>
نأتي الآن إلى التغييرات .. !
بالنسبة للكتابة الملونة بالأحمر يمكنك تغييرها بالجمل التي تراها مناسبة لك، لدعوة الزوار للإشتراك في تحديثات مدونتك.
بالنسبة لِـ "nordax.ma"
عليك تغييره باسم صفحتك على الفيسبوكْ.
إذا أردت أن يتكرر ظهور صندوق الإعجاب لزوار مدونتك، في كل مرة يزورون فيها مدونتك، ماعليكَ سوى حذف "*30" من الكود، و الذي يمثل عدد الأيام بين كل ظهور.
بالنسبة للرموز التالية " cba9s78j7o1qu6gkvui13tmn90"
عليك تغييره برمز الفيد الخاص بك، و يمكنك الحصول عليه من رابط الفيد الخاص بمدونتك،
مثلاً بالنسبة لي هذا هو رابط الفيد الخاص بي
http://feedburner.google.com/fb/a/mailverify?uri=cba9s78j7o1qu6gkvui13tmn90
بعد ذلك اظغط "حفظ" ، ومبروك عليك الإضافة الرائعة.
أي استفساراتْ أنا دائما رهن الإشارة، فلا تبخلو عني بتعليقاتكم,, !
إلى موضوغ آخر و فكرة أخرى
دمتم بود :)
ليست هناك تعليقات :
إرسال تعليق