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

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

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

بالملاحظات لزوار مدونتك بشكل احترافي عرضها مبهرة بلونها الأبيض الشفاف مريحة للعين

وتظهر مرة واحدة عند دخولك للمدونة
 وتختفي تلقائيا وكلها بتصميم 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;
}
/* ti9nifour.blogspot.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> Ti9niFour | تقني فور </p>
<p>السلام عليكم , نود بدايتاً أن نشكركم لأختياركم مدونتنا , ثانيا

 نود أن نعلم حضراتكم أن المشرف عللى المدونة غائب بسبب الدراسة

 , وسوف يكون قادر على الرد على إستفسراتكم وتعليقاتكم ومساعدتكم يوم 

الأحد من كل أسبوع , أدعو لي بالتوفيق .

 </p>
</h2>
</span>
</div> 

تخصيص الإضافة :

* المحدد باللون الأحمر لتغيير الإتجاه ضع : left
* المحدد باللون الأخضر لوضع الصندوق بالأسفل ضع : bottom

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