صفحة خطأ ): الصفحة التي تبحث/ي عنها غير موجودة يمكنك محاولة كتابة كلمة البحث مضبوطه أو الضغط على الزر التالي للعودة للرئيسية الرئيسية

13‏/12‏/2016

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

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


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

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


تفضّل مشكوراً بمشاركة الموضوع

اظهر تعليقات : جوجل بلس أو بلوجر

هناك 4 تعليقات:

  1. شكراا أخي على الاضافة الجميلة

    ردحذف
    الردود
    1. لاشكر على واجب أخي, زرنا مجددا ♥

      حذف
  2. لا يمكن نسخ الكود ممكن تعمل رد لتعليق بذلك الكود كي أستطيع نسخه و شكرا.

    ردحذف

جميع الردود تعبّر عن رأي كاتبيها فقط. حريّة النقد والرد متاحة لجميع الزوار بشرط أن لا يكون الرد خارج نطاق الموضوع وأن يكون خال من الكلمات البذيئة.

تذكّر قول الله عز وجل (مَا يَلْفِظُ مِن قَوْلٍ إِلاَّ لَدَيْهِ رَقِيبٌ عَتِيد).

جميع الحقوق محفوظة لــ Ti9niFour 2017 ©
تصميم :

بضغطة زر تدعمنا وتشارك الفائدة