»نشرت فى : الثلاثاء، 13 ديسمبر، 2016»بواسطة : »هناك تعليقان (2)

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


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

وتظهر مرة واحدة عند دخولك للمدونة
 وتختفي تلقائيا وكلها بتصميم 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
* المحدد باللون البرتقالي للتحكم في حجم الرسالة
* المحدد باللون الأصفر غيرهم بكلماتك


بقلم :Mohamed Jiari

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

    اضف تعليقاً عبر:

  • blogger
  • disqus

الابتسامات

0102030405060708091011121314151617181920212223242526272829303132333435363738394041424344

كافة الحقوق محفوظة لمدونة Ti9niFour | تقني فور | دليلك التقني 2017