إضافة صندوق الملاحظات بتأثيرات احترافية

إضافة صندوق الملاحظات بتأثيرات احترافية
إضافة صندوق الملاحظات بتأثيرات احترافية
حصرياً على مدونة احتراف عربي إضافة صندوق الملاحظات بتأثيرات احترافية

يمكنك معاينة الإضافة على قالب مدونتي الحالي بالضغط على زر التعجب في القائمة

شرح تركيب الإضافة

أولا قيل كل شيء قم بأخذ نسخة احتياطية من القالب
الأن اتجه الى قالب و من ثم تحرير HTML 
1.... ابحث عن الوسم <body>
وقم بوضع الكود التالي اسفله/بعده

<div id='MBT-REDIRECTION'>
<div class='topwrapper'>
<div id='dialogoverlay'/>
<div id='dialogbox'>
<div>
<div id='dialogboxhead'/>
<div id='dialogboxbody'/>
<div id='dialogboxfoot'/>
</div>
</div>
</div>

2.... ابحث عن الوسم ]]></b:skin>
وقم بوضع الكود التالي اعلاه/قبله

/* CSS Alert */
#dialogoverlay{display:none;opacity:.5;position:fixed;top:0px;left:0px;background:#000;
width:100%;z-index:10;}
#dialogbox{top:-300px;position:fixed;background:#222;width:350px;z-index:10;transition:all 400ms ease-in-out;}
#dialogbox > div{background:#fff;margin:8px;text-align:center}
#dialogbox > div > #dialogboxhead{position:relative;background:#FC5039;font-size:18px;font-weight:400;padding:10px;color:#fff;font-family:Electrolize,ge_ss_threeregular;text-transform:uppercase;}
#dialogboxhead:before {top:100%;left:50%;border:solid transparent;content:" ";height:0;
width:0;position:absolute;pointer-events:none;border-color:rgba(0,0,0,0);border-top-color:#FC5039;border-width:10px;margin-left:-10px;}
#dialogbox > div > #dialogboxbody{background:#111;padding:20px;color:#e9e9e9;font-size:14px;font-weight:400;line-height:20px;font-family: Electrolize,ge_ss_threeregular;}
#dialogbox > div > #dialogboxfoot{background:#222;padding:0px;text-align:right;}
#dialogbox > div > #dialogboxfoot button{position:absolute;top:-10px;right:-10px;
background:#222;border:none;height:30px;width:30px;outline:none;color:#fff;
line-height:25px;font:bold 16px Arial;text-align:center;cursor:pointer;border-radius:50%;}



3... ابحث عن الوسم </body>
قم بوضع الكود التالي اعلاه/قبله


 <script type='text/javascript'>
//<![CDATA[
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>


4.... الأن قم بالبحث عن الأكواد الخاصة بالقائمة لديك
غالباً تكون بعد الوسم <nav id='menu'>  أو قم بالبحث عن أي كلمة أو تصنيف موجود لديك
وقم بلصق هذا الكود بداخل الأكواد

<li class='buttonalert' onclick='Alert.render(&#39;هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة، لقد تم توليد هذا النص من مولد النص العربى الوقت واضحة. هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة، لقد تم توليد هذا النص من مولد النص العربى.&#39;)' text='ملاحظة؟'><i class='fa fa-info-circle fa-lg'></i></li>


قم بتغيير الكلمات بخاصتك

5.... الأن يتبقى لدينا تخصيص زر التعجب
ابحث عن اكواد CSS الخاصة بالقائمة لديك غالباً تكون menu#
وقم بإضافة الكود التالي
كما في الصورة


 #menu li.buttonalert {font-size:16px;color:#D24747;padding:0 30px;cursor:pointer;margin-top: 15px;}

الكود الخاص بخط الأيقونات
قم بلصق الكود قبل/بعد الوسم </head>

 <link href='//netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css' rel='stylesheet'/>
الكود الخاص بالخط المستخدم في الاداة
قم بلصق الكود قبل/بعد الوسم </head>

 <link href="http://cdn.jsdelivr.net/darfonts/0.1/dinone-dintwo-sstext-ssthree/stylesheet.css" rel="stylesheet"/>


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

ليست هناك تعليقات:

إرسال تعليق

الاشتراك في: تعليقات الرسالة (Atom)