مساحة إعلانية

الأربعاء، 31 ديسمبر، 2014

الأربعاء، 31 ديسمبر، 2014

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

Lightbox Popup
طبعا اول شئ لاحظته مع دخولك الموضوع هو ظهور رسالة منبثقه وهذه هي المعاينة الخاصة بموضوعنا هذه الرسالة يمكنك تخصيصها بأى شئ لعرضه ادوات صور كلمات كل ما تريد يمكنك ان تضيفه في الآداة وصندوق المتابعة ما هو الا مثال واحد مما يمكن عمله بتلك الإضافة لكن يجب ان اعرفك بالإضافة وتقنيتها هي إضافة تعمل بتقينة 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 لون الإطار
واترك لك الإبداع في تخصيص رسالتك تحياتي

هناك 30 تعليقًا:

  1. موضوع جميل شكرا لك اخي عمرو
    =r

    ردحذف
    الردود
    1. شكراً يا غالي مرورك يسعدني دائماً =r

      حذف
  2. الله الله علي الابداع
    راقي من يومك بسم الله ماشاء الله
    جميله جدا
    ولكني كيف اجعلها كما عندك تعرض شيئ في الرئيسية وشيء في المواضيع
    هذا سيكون مساعد في التسويق وهو عامل مهم عامل الاستهداف
    تحياتي علي المجهود الرائع

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

      حذف
    2. هعرض صورة مرة والمرة الثانية اضافة

      حذف
  3. وكيف يمكن جعلها تظهر مرة واحدة فقط ؟

    ردحذف
    الردود
    1. هي تظهر مرة واحدة بالفعل وانا وضحت طريقة اظهارها كثيراً في الموضوع
      اما في الموضوع انا اخترت ان تظهر كثيراً لضمان رؤيتها لمن يتصفح الموضوع

      حذف
  4. علي فكره لو خلتها تختفي بمجرد الضغط خارج المحتوى يكون افضل طبعا
    وسؤال اخير اخي
    كيف اجعل الفيديو يظهر علي شكل شاشه كما عندك بالمدونة ؟
    وشكرا

    ردحذف
    الردود
    1. اخفائها خارج الإطار ليس مناسباً لانه قد يضغط خطأ اثناء تحميل الصفحة وان كانت ستظهر مرة واحدة للزائر ربما لا يراها اما ظهورها مرة واحده والضغط على زر الإخفاء لإلغائها هذا يضمن رؤيتها

      حذف
    2. رائع
      انت رائع
      تحياتي واطيب امنياتي

      حذف
  5. الردود
    1. ربنا يعزك اخي الغالي نروت الموضوع =r

      حذف
  6. الردود
    1. وجزاكم الله بالمثل
      ودي وتقديري =r

      حذف
  7. الف شكر أخي الفاضل وجزاك الله كل خير

    ردحذف
  8. مبدع كالعادة اخي الكريم عمرو q=

    ردحذف
  9. السلام عليكم اخي ;)
    الاضافة ما تشتغل عندي ما الحل !!
    http://th3proalgeriablog.blogspot.com

    ردحذف
    الردود
    1. وعليكم السلام ورحمة الله وبركاته
      تأكد من عدم تكرار كود مكتبة جي كويري , تأكد أيضا انه لا يوجد لديك اضافة بتقنية lightbox ان ما زالت لا تعمل معك فغالبا سيكون تعارض مع احد اكواد القالب

      حذف
    2. شكراا
      الف شكراااااااااااا

      حذف
  10. بارك الله فيك دئما انت معلمنا
    متحيات
    الفرعون نت
    http://aboal5er.blogspot.com

    ردحذف
  11. اولا لونها شبه لون خلفية المدونة ثانيا ثابتة مش متحركة

    ردحذف
    الردود
    1. هي ليست لها لون خلفية واضح هي نوع من الشفافية والضبابية على ما خلفها
      هي ليست متحركة فهذا النوع من الرسائل يكون ثابت
      هناك نوع آخر متحرك يمكنك رؤيته من هنا
      http://cnmu.blogspot.com/2013/03/ads-window.html

      حذف
  12. ازاى حضرتك بتضيف فيها صورة

    ردحذف
    الردود
    1. عادي بإضافة كود الصورة مثال
      <a href='#'><img src='*'/></a>
      رمز # يستبدل بالرابط ورمز * يستبدل برابط الصورة
      يضاف الكود بدلا من جملة هنا اكتب ما تشاء

      حذف
  13. السلام عليكم كيف يمكن جعل الاضافة مثل المعاينة التي في الموضوع انا عندما فعلت الاضافة ظهر لي صندوق فارغ انا اريد ان تظهر صفحة المتابعة على الفيس بوك مثل التي معك من اين اجلب الكود وهل هو كود فقط ام صورة ارجو شرح الطريقة وشكرا

    ردحذف
    الردود
    1. وعليكم السلام ورحمة الله وبركاته
      اخي انا موضح مكان اضافة الاكواد او الصور داخل الرسالة
      يمكنك وضع كود الإعجاب الخاص بالفيس بوك بها
      ويمكنك الحصول على الكود من هذا الرابط
      http://bit.ly/1oStaBf

      حذف

نسعد ونتشرف بتعليقاتكم
لكن هناك شروط يجب اتباعها لضمان نشر التعليقات
1ان يكون التعليق يخص محتوى الموضوع
2ان لا يحتوي التعليق اى روابط دون داعي
3إن أردت إضافة كود حوله اولا بمحول الأكواد
4أن لا يحتوي التعليق اي الفاظ او اساءات لاى احد
5أى سؤال بعيد عن محتوى الموضوع يرجى استخدام ركن الأسئلة

جميع الحقوق محفوظة لــ كن مدون 2013-2015 ©