إضافة صندوق الترحيب او التعريف بالمدونة بشكل منبثق

إضافة صندوق الترحيب او التعريف بالمدونة بشكل منبثق

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

تخطيط - أضف اداة - 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 3s linear forwards; -moz-animation: fadeOutnotif 3s linear forwards;-o-animation: fadeOutnotif 3s linear forwards;-ms-animation: fadeOutnotif 3s linear forwards;animation: fadeOutnotif 3s 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>ستجد بالمدونة اضافات احترافية</p><p>وقوالب بلوجر وخطوط عربي وانجليزي</p><p>وخلفيات فديو وخلفيات صور</p><p>وكل ماتحتاجة..</p></h2></span></div>

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

لتغيير الاتجاه لليسار غير right  بهذه left

لوضع الصندوق بالاسفل غير top بهذه bottom

والكتابة بالأسفل غيرها بما تشاء 

المصدر مدونة خالد الميلبي