اضافة صندوق الملاحظات بشكل جديد واحترافي للبلوجر

السلام عليكم ورحمة

الله وبركاته

--

اقدم لكم في هذه التدوينة اضافة صندوق الملاحظات بشكل جديد وبتاثير احترافي للبلوجر وتكمن اهمية هذه الاضافة في ابراز شيئ ما او ايصال ملاحظة او تنويه للزائر بشكل افضل

ويمكنك معاينتها من خلال المدونة وذلك باعادة تحديث الصفحة لتظهر لك في الاعلى

-----------------------------------------------

• 
  

طريقة التركيب:

1. توجه الى التخطيط ثم اضف اداة html/javascript
2. وضع الكود التالي داخل الاداة

<div class='widget-content'>
<style>
table.imp-ort-thks {
    background-color: #34495E;
    border-top: 6px solid white;
}
i.fa.fa-smile-o {
    margin: -1px 10px 0px 0px;
}
table.imp-ort {
    background-color: #0894D8;
}
table.imp-txt-ort {
    background-color: #E8E8E9;
    border-top: 6px solid white;
    width: 217px;
}
@-webkit-keyframes fadeOutnotif {
0% { opacity: 1;}
10% { opacity: 1;}
90% { opacity: 1; -webkit-transform: translateY(0px);}
99% { opacity: 0; -webkit-transform: translateY(-30px);}
100% { opacity: 0;}
}
@-moz-keyframes fadeOutnotif {
0% { opacity: 1;}
10% { opacity: 1;}
90% { opacity: 1; -moz-transform: translateY(0px);}
99% { opacity: 0; -moz-transform: translateY(-30px);}
100% { opacity: 0;}
}
@-o-keyframes fadeOutnotif {
0% { opacity: 1;}
10% { opacity: 1;}
90% { opacity: 1; -moz-transform: translateY(0px);}
99% { opacity: 0; -moz-transform: translateY(-30px);}
100% { opacity: 0;}
}
@-ms-keyframes fadeOutnotif {
0% { opacity: 1;}
10% { opacity: 1;}
90% { opacity: 1; -moz-transform: translateY(0px);}
99% { opacity: 0; -moz-transform: translateY(-30px);}
100% { opacity: 0;}
}
@keyframes fadeOutnotif {
0% { opacity: 1;}
10% { opacity: 1;}
90% { opacity: 1; -moz-transform: translateY(0px);}
99% { opacity: 0; -moz-transform: translateY(-30px);}
100% { opacity: 0;}
}
</style>
<div id='divName' style='position:  fixed; top: 25px;     box-shadow: 0 1px 10px 1px rgba(0,0,0,0.2); right: 25px; background:  none repeat scroll 0 0 #ffffff;border-radius: 2px;padding:5px;text-align:right;-webkit-animation: fadeOutnotif 10s linear forwards; 
-moz-animation: fadeOutnotif 10s linear forwards;
-o-animation: fadeOutnotif 10s linear forwards;
-ms-animation: fadeOutnotif 10s linear forwards;
animation: fadeOutnotif 10s linear forwards;'>

<table class="imp-ort" align='center' bgcolor='#dddddd' border='0' cellpadding='1' cellspacing='2' width='218'>
  <tbody><tr>
    <td align='center' bgcolor='#DDDDDD' style='font-size: 14px; color: #34495E; text-align: center; width: 100%; margin: 0 auto; font-weight: 700;' valign='middle' width='179'>
    تنويه! <span style='color: #060;  font-size: 14px;'></span></td>
    <td align='right' bgcolor='#dddddd' valign='middle' width='30'>
    </td>
  </tr>
</tbody></table>
<table class="imp-txt-ort" border='0' cellpadding='5' cellspacing='1' width='220'>
  <tbody><tr>
    <td align='center' bgcolor='#eeeeee' valign='middle'><span style='color: #333;font-size: 13px;'>تم وضع روابط التحميل لجميع القوالب المعروضة على المدونة</span>
    </td>
  </tr>
</tbody></table>
</div>
</div>

1. غير ما يناسبك