رسالة منبثقة بتقنية Lightbox مع الاعدادات

طبعا اول شئ لاحظته مع دخولك الموضوع هو ظهور رسالة منبثقه وهذه هي المعاينة الخاصة بموضوعنا هذه الرسالة يمكنك تخصيصها بأى شئ لعرضه ادوات صور كلمات كل ما تريد يمكنك ان تضيفه في الآداة وصندوق المتابعة ما هو الا مثال واحد مما يمكن عمله بتلك الإضافة لكن يجب ان اعرفك بالإضافة وتقنيتها هي إضافة تعمل بتقينة JQuery Lightbox والتي سبق أن شرحناها في هذا الموضوع وهذا هو تطبيق اضافي على الخاصية التي تتعدد مزاياها واستخداماتها انا لن اطيل عليكم وسانقلكم مباشرة للجانب العملي
فقط اضف الكود التالي داخل آداة HTML/JavaScript
<style>
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:999999; overflow:hidden;}
#colorbox {z-index: 99999999;}
#cboxWrapper {max-width:none;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none; -ms-interpolation-mode:bicubic;}
.cboxIframe{width:100%; height:100%; display:block; border:0; padding:0; margin:0;}
#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;}
#cboxOverlay{background:#bbb; opacity: 0.9; filter: alpha(opacity = 90);}
#colorbox {
background-color:#fff;
border: 5px solid #000;
border-radius: 2px;
outline: 0 none;
}
#cboxClose {
background: url("https://lh4.googleusercontent.com/-QY-kdg8gIgM/VHxMypqxcrI/AAAAAAAAFHo/-TyH4brIxrE/s16/close.png") no-repeat scroll 0 0 #ccc;
border: 0 none;
display: block;
font: 14px arial;
height: 16px;
position: absolute;
right: 0;
text-indent: -1e+7px;
top: 0;
width: 16px;
z-index: 99999;
}
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'></script>
<script src="https://cnmu.googlecode.com/svn/trunk/ColorBox/colorbox.js" type="text/javascript"></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:"500px",height:"400px",inline:true, href:"#cnmuligmes"});
}
});
</script>
<div style='display:none;'>
<div id='cnmuligmes' style='width: 450px; height: 350px; overflow: hidden;'>
هنا أكتب ما تشاء
</div>
</div>
اعدادات أولية
في حالة كان لديك مكتبة جي كويري احذف الكود الاحمرفي حالة لديك خاصية Lightbox احذف الكود الأخضر والاكواد السابقه له كلها
الإضافة معدة لتظهر للزائر مرة واحده فقط حتى لا تكون مزعجة لكن ان اردتها تظهر له في كل زيارة احذف الأكواد الزهرية
الرقم 500 هو العرض الاساسي للرسالة
الرقم 400 هو الإرتفاع الأساسي للرسالة
الرقم 450 هو العرض الخاص بمحتوى الرسالة
الرقم 350 هو الإرتفاع الخاص بمحتوى الرسالة
يمكن ان تجعل الارقام متشابهه لكن انا معدلهم لانه ان كنت تستخدم المظهر الأصلي للإضافة Lightbox قد تحتاج ان يكون هناك اختلاف بين حجم الصندوق وحجم المحتوى الأمر يعود الك في ضبط المحتوى
يمكنك استبدال هنا أكتب ما تشاء بأى شئ تريد كود اضافة صورة كتابة طبعا يعود الأمر لك في تنسيقها بحسب ذوقك
كا ترى في المعاينة انا اضفت كود متابعة الفيس بوك كنوع من التوضيح
تنسيقات
هذا #bbb هو لون الخلفية الذي يغطي على مظهر المدونةوهذا #fff لون خلفية الرسالة نفسها
وهذا #000 لون الإطار
واترك لك الإبداع في تخصيص رسالتك تحياتي
موضوع جميل شكرا لك اخي عمرو
ردحذف=r
شكراً يا غالي مرورك يسعدني دائماً =r
حذفالله الله علي الابداع
ردحذفراقي من يومك بسم الله ماشاء الله
جميله جدا
ولكني كيف اجعلها كما عندك تعرض شيئ في الرئيسية وشيء في المواضيع
هذا سيكون مساعد في التسويق وهو عامل مهم عامل الاستهداف
تحياتي علي المجهود الرائع
حياك الله أخي الكريم
حذفانا في الرئيسية استخدم نفس الرسالة غيرت فقط لون الإطار ووضعت صورة في المحتوى كما هو مشروح في الموضوع
انت فقط صمم صورة واضفها في المحتوى وستكون مثل التي لدي
هعرض صورة مرة والمرة الثانية اضافة
حذفوكيف يمكن جعلها تظهر مرة واحدة فقط ؟
ردحذفهي تظهر مرة واحدة بالفعل وانا وضحت طريقة اظهارها كثيراً في الموضوع
حذفاما في الموضوع انا اخترت ان تظهر كثيراً لضمان رؤيتها لمن يتصفح الموضوع
علي فكره لو خلتها تختفي بمجرد الضغط خارج المحتوى يكون افضل طبعا
ردحذفوسؤال اخير اخي
كيف اجعل الفيديو يظهر علي شكل شاشه كما عندك بالمدونة ؟
وشكرا
اخفائها خارج الإطار ليس مناسباً لانه قد يضغط خطأ اثناء تحميل الصفحة وان كانت ستظهر مرة واحدة للزائر ربما لا يراها اما ظهورها مرة واحده والضغط على زر الإخفاء لإلغائها هذا يضمن رؤيتها
حذفرائع
حذفانت رائع
تحياتي واطيب امنياتي
مشكور =r
ردحذفدائما مبدع اخى
ردحذفربنا يعزك اخي الغالي نروت الموضوع =r
حذفجزاكم الله كل خير
ردحذفوجزاكم الله بالمثل
حذفودي وتقديري =r
الف شكر أخي الفاضل وجزاك الله كل خير
ردحذفm =a =e =r
ردحذفمبدع كالعادة اخي الكريم عمرو q=
ردحذفالسلام عليكم اخي ;)
ردحذفالاضافة ما تشتغل عندي ما الحل !!
http://th3proalgeriablog.blogspot.com
وعليكم السلام ورحمة الله وبركاته
حذفتأكد من عدم تكرار كود مكتبة جي كويري , تأكد أيضا انه لا يوجد لديك اضافة بتقنية lightbox ان ما زالت لا تعمل معك فغالبا سيكون تعارض مع احد اكواد القالب
شكراا
حذفالف شكراااااااااااا
رائع
ردحذفبارك الله فيك دئما انت معلمنا
ردحذفمتحيات
الفرعون نت
http://aboal5er.blogspot.com
اولا لونها شبه لون خلفية المدونة ثانيا ثابتة مش متحركة
ردحذفهي ليست لها لون خلفية واضح هي نوع من الشفافية والضبابية على ما خلفها
حذفهي ليست متحركة فهذا النوع من الرسائل يكون ثابت
هناك نوع آخر متحرك يمكنك رؤيته من هنا
http://cnmu.blogspot.com/2013/03/ads-window.html
ازاى حضرتك بتضيف فيها صورة
ردحذفعادي بإضافة كود الصورة مثال
حذف<a href='#'><img src='*'/></a>
رمز # يستبدل بالرابط ورمز * يستبدل برابط الصورة
يضاف الكود بدلا من جملة هنا اكتب ما تشاء
السلام عليكم كيف يمكن جعل الاضافة مثل المعاينة التي في الموضوع انا عندما فعلت الاضافة ظهر لي صندوق فارغ انا اريد ان تظهر صفحة المتابعة على الفيس بوك مثل التي معك من اين اجلب الكود وهل هو كود فقط ام صورة ارجو شرح الطريقة وشكرا
ردحذفوعليكم السلام ورحمة الله وبركاته
حذفاخي انا موضح مكان اضافة الاكواد او الصور داخل الرسالة
يمكنك وضع كود الإعجاب الخاص بالفيس بوك بها
ويمكنك الحصول على الكود من هذا الرابط
http://bit.ly/1oStaBf