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

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

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

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 10slinear 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;} } @keyframesfadeOutnotif { 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

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

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