طريقة تصميم مربع يظهر للزائر كرسالة عندما يدخل للمدونة

طريقة تصميم مربع يظهر للزائر كرسالة عندما يدخل للمدونة
طريقة تصميم مربع يظهر للزائر عندما يدخل للمدونة لتنبيهه لشئ او اعجاب بالصفحة عل الفيس بوك وما الى ذلك اليكم الطريقة لفعل ذلك اولا بعد تسجيل الدخول للوحة التحكم لدى بلوجر ادخل على التخططيط بعد ذلك قم باضافة اداة 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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxAg200b0FQzFqPJBBsvI-HLhKPZjpBhw6JCX6v8YT9ZW1BhTNBAuwgSBDtZRJL_WiwWfabZJWI8v1oLcLJvaNIbSTW86kBG1mcwiTS58oGVUHuZbmtiFcHFI5jmM3uI3t2jKDmmwrOgV8/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 هو الإرتفاع الخاص بمحتوى الرسالة
تحتاج ان يكون هناك اختلاف بين حجم الصندوق وحجم المحتوى الأمر يعود الك في ضبط المحتوى
يمكنك استبدال هنا أكتب  ما  تشاء بأى شئ تريد كود اضافة صورة كتابة طبعا يعود الأمر لك في تنسيقها بحسب ذوقك


هذا #bbb  لون الخلفية
وهذا #fff لون خلفية الرسالة
وهذا #000 لون الإطار
واترك لك الموضوع الاصلى

طريقة تصميم مربع يظهر للزائر كرسالة عندما يدخل للمدونة
http://cnmu.blogspot.com/2014/12/Lightbox-Popup.htm

لا تنسى المشاركة