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

إضافات صندوق التنبيهات او الملاحظات بشكل اخر مختلفة عن الأولى لا في التصميم ولا طريقة عرضها مبهرة بلونها الأبيض الشفاف مريحة للعين وتظهر مرة واحدة فقط تختفي تلقائيا وكلها بتصميم Css مما يجعلها خفيفة سريعة كليا 

معاينة

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

1. مباشرة من التخطيط أضف أداة 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.ar1web.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>

* المحدد باللون الأحمر لتغيير الإتجاه ضع : left

* المحدد باللون الأخضر لوضع الصندوق بالأسفل ضع : bottom

* المحدد باللون الأصفر غيرهم بكلماتك

المصدر: عرب ويب