إضافة تنبيه منبثق إلى مدونة بلوجر

---- your ads -----

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

معاينة الإضافة

اتجه الى بلوجر وقم بتسجيل الدخول الى مدونتك
إختر المظهر ثم اختر تعديل HTML
ابحث عن احد الوسمين ]]></b:skin> أو </style> ثم ألصق الكود التالي قبله/فوقه

 #dialogoverlay{
 display: none;
 opacity: .7;
 position: fixed;
 top: 0px;
 left: 0px;
 background: #000;
 width: 100%;
 z-index: 10;
}
#dialogbox{
  font-family: 'Tajawal', sans-serif;
 top: -300px;
 position: fixed;
 background: #eee; 
 width:350px;
 z-index: 10;transition:all 400ms ease-in-out;box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.75);
}
#dialogbox > div{ 
    background:#FFF; 
    margin:8px;
    text-align:center 
}
#dialogbox > div > #dialogboxhead{ 
    background: #f7113b; 
    font-size:18px; 
    font-weight:600;
    padding:10px; 
    color:#efefef; 
  font-family: 'Tajawal', sans-serif;
}
#dialogbox > div > #dialogboxbody{ 
    background:#fff; 
    padding:20px; 
    color:#f7113b; 
    font-size:14px ; 
    font-weight:500;
    font-family: 'Tajawal', sans-serif;
}
#dialogbox > div > #dialogboxfoot{ 
    background:#fff; 
    padding:0px; 
    text-align:right; 
}
#dialogbox > div > #dialogboxfoot button{
    position:absolute;
    top:-10px;
    left:-10px;
    background:#fff;
    border:none;
    border-radius:50%;
    height:25px;
    width:25px;
    outline:none;
    color:#f7113b;
    line-height:25px;
    font:bold 16px ;
    text-align:center;
    cursor:pointer;
}
.buttonalert{
    background:#f7113b;
    border:1px solid #fff;
    margin:0 auto;
    padding:5px 18px;
    font:14px ;
    font-weight:600;
    color:#fff;
    text-align:center;
    display:inline-block;
    border-radius:20px;
    cursor:pointer;
}

الأن إبحث عن الوسم </body> والصق الكود التالي قبله/فوقه

 <script type='text/javascript'>
function CustomAlert(){
 this.render = function(dialog){
  var winW = window.innerWidth;
     var winH = window.innerHeight;
  var dialogoverlay = document.getElementById('dialogoverlay');
     var dialogbox = document.getElementById('dialogbox');
  dialogoverlay.style.display = "block";
     dialogoverlay.style.height = winH+"px";
  dialogbox.style.left = (winW/2) - (350 * .5)+"px";
     dialogbox.style.top = "150px";
     dialogbox.style.display = "block";
  document.getElementById('dialogboxhead').innerHTML = "ملاحظة هامة";
     document.getElementById('dialogboxbody').innerHTML = dialog;
  document.getElementById('dialogboxfoot').innerHTML = '<button onclick="Alert.ok()" title="أغلق">&#215;</button>';
 }
 this.ok = function(){
  document.getElementById('dialogbox').style.top = "-300px";
  document.getElementById('dialogoverlay').style.display = "none";
 }
}
var Alert = new CustomAlert();
</script>

الأن تم تثبيت أكوا تنسيق الأداة في القالب, كل ما عليك هو وضع كود Html هذا في المكان الذي تريد تطبيق الاداة فيه

 <div id="dialogoverlay"></div>
<div id="dialogbox">
  <div>
    <div id="dialogboxhead"></div>
    <div id="dialogboxbody"></div>
    <div id="dialogboxfoot"></div>
  </div>
</div>
<div class='buttonalert' onclick="Alert.render('.إن نظرة خاطفة نحو جرم سماوي يمكن أن تسمو بعقولنا وتنقيها')"> ! تنبيه</div>

إستبدل ما هو مظلل بالمحتوى الذي تريد

أتمنى أن أكون ق وفقت في طرح الإضافة إن كانت لديكم اي استفسارات يرجى طرحها في التعليقات

شكرا لكم.

---- your ads -----

CSS