04‏/10‏/2014

إضافات صندوق التنبيهات او الملاحظات بشكل اخر مختلفة عن الأولى لا في التصميم ولا طريقة عرضها مبهرة بلونها الأبيض الشفاف مريحة للعين وتظهر مرة واحدة فقط تختفي تلقائيا وكلها بتصميم 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;
}
/* 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>1. اهلا وسهلا.</p>
<p>2. كيف حالك.</p>
<p>3. أسعد الله أوقاتك.</p>
<p>4. نشكرك لزيارتك لموقعنا.</p>
</h2>
</span>
</div>
تخصيص الإضافة
* المحدد باللون الأحمر لتغيير الإتجاه ضع : left
* المحدد باللون الأخضر لوضع الصندوق بالأسفل ضع : bottom
* المحدد باللون الأصفر غيرهم بكلماتك
إضافات صندوق التنبيهات او الملاحظات بشكل اخر مختلفة عن الأولى لا في التصميم ولا طريقة عرضها مبهرة بلونها الأبيض الشفاف مريحة للعين وتظهر مرة واحدة فقط تختفي تلقائيا وكلها بتصميم 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;
}
/* 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>1. اهلا وسهلا.</p>
<p>2. كيف حالك.</p>
<p>3. أسعد الله أوقاتك.</p>
<p>4. نشكرك لزيارتك لموقعنا.</p>
</h2>
</span>
</div>
تخصيص الإضافة
* المحدد باللون الأحمر لتغيير الإتجاه ضع : left
* المحدد باللون الأخضر لوضع الصندوق بالأسفل ضع : bottom
* المحدد باللون الأصفر غيرهم بكلماتك
12 Blogger تعليقات
Disqus
12 التعليقات
المشرف
avatar

جميلة ، شكراً لك حسسام :D

سؤال لو سمحت ، هل يمكنني برمجة أداة مثل هذه في تويتر بحيث عند زيارة موضوع من مواضيع مدونتي تظهر له مثل هذه النافذة لكنها تحوي مكان للإسم والبريد الإلكتروني للأشتراك في النشرة البريدية الخاصة بي .

ويمكنه اغلاقها من اشارة الاكس مع مكان في الأعلى لكتابة بضع كلمات تشجيعية تماماً مثل هذه الأداة في تويتر شاهدها من هنا http://im77.gulfup.com/23FEMB.png

هل فهمت الفكرة أخي حسام @@, اذا فهمت الفكرة هل يمكنك برمجة أداة بلوجر لي بمثل الوصف الذي وصفته لك ؟ طبعاً كل شيء بثمنه مع احترامي لك .

اذا كنت قد فهمت الفكرة وتستطيع القيام بها كم يبلغ ثمن هذه الأداة ؟ وكم تستغرق من الوقت لـ الانتهاء من برمجتها ؟

المشرف
avatar

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

المشرف
avatar

الله يعطيك العافية أخ حسام أتمنى الإستعجال بها :-bd

المشرف
avatar

شكـــــــــــــــــــــــــــــــــــــــــــــــــــــــرا ، ممكن طلب ؟

المشرف
avatar
المشرف
avatar
عماد الضمراني اشرف 1/08/2015
delete

تكرم اخي العزيز حسام انا لا اعرف اعدل عليه بس انا حبيت ان ابعتلك الرساله علشان تسعدني انا اسف شكرا اخي العزيز اسف جدا

المشرف
avatar

ماذا أي تعديل؟

المشرف
avatar

ممكن طريقة لاظهار هذه الاداة في الصفحة الرئيسية فقط ،

المشرف
avatar

ممكن تعطينا الاداة نتاع احصائيات المدونة التي انت تستعملها ، ارجووك

المشرف
avatar

كيف اضف اداة جافا

المشرف
avatar

من التخطيط أضف أداة بأي مكان ثم ستظهر لك جميع الأدوات إختر HTML/JAVASCRIPT

المشرف
avatar

شكرا لك علي الاضافةة الرائعه
نيرونت

يسعدنا تفاعلكم بالتعليق، لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق
1أن يكون التعليق خاص بمحتوى التدوينة
2أن لا تضع أي روابط خارجية
3لإضافة كود حوله أولاً بمحول الأكواد
4أي سؤال خارج محتوى التدوينة يرجى استخدام ركن الأسئلة