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

في هذه التدوينة نشرح لكم إضافه رساله تنبيه وكما موضحة في الصورة أعلاه على يمين الشاشة 

معاينة

بعد معاينتها نأتي الى الإن الى

 شرح إضافتها .. 

المدونة > التخطيط > أضافة أداة > HTML/JavaScript 

ونضع هذا الكود

<style>
#notifjo {
right: 10px; 
top: 10px; 
width: 320px; 
height: auto; 
overflow: hidden;
background: rgba(255,255,255,0.9); 
border-radius: 5px; 
border: 1px solid #ddd; 
z-index: 999999;
position: fixed; 
-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;
}
#notifjo a {
display:block;
text-decoration:none;}
#notifjo span {
display: block;
padding: 15px 15px;
pointer-events: none;
text-align: right;
float: right;
}
#notifjo span h2 {
font-size: 12px; 
line-height: 21px;
color: #222; 
font-family: Electrolize,ge_dinar_oneregular;
font-weight: normal;
letter-spacing: 0px;
}
/* www.saif-info.com */
@-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='notifjo'>
<span>
<h2><b>سيف المالكي : العنوان :</b> 
<p>1. النص الأول.</p>
<p>2. وهذا الثاني.</p>
<p>3. التجربة الثالثة.</p>
<p>4.يمكن هنا كتابة ما تشاء.</p>
</h2>
</span>
</div>




لتعديل الأضافة 

كلمة right هي أتجاه الأضافة يمكن تغييره إلى Left

كلمة Top يعني أنها في الأعلى يمكن وضعها في الأسفل bottom 

النصوص الحمراء يمكن تغييرها بما تشاء 
الكود #ddd هو لون الخلفية و #222 لون النص ( غيرها دون حذف #الهاشتاق)

جعل الأضافة في صفحة ثابته او تدوينة فقط

إذا أردت إن تظهر هذه الرساله فقط في صفحة ثابتة أو في تدوينة معينة كل ما عليك هو نسخ الكود السابق ولصقه داخل التدوينة إو الصفحة 

كل ما عليك فقط هو التحويل إلى توليف HTML داخل الصفحة 
ولصق الكود الكامل فيها ...