كيفية إضافة صندوق الإشعارات عائم إلى مدونات بلوجر

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

إذاً طريقة الإضافة سهل وبسييطة للغاية، ماعليك فعله سوى التوجه إلى صفحة التخطيط > إضافة أداة (في أي مكان لايهم) > HTML/JavaScript بعدها تقوم بنسخ الكود الموجود بالأسفل ولصقه في الأداة.

<style>
table.imp-db-thks {
background-color: #34495E;
border-top: 6px solid white;
}
i.fa.fa-smile-o {
margin: -1px 10px 0px 0px;
}
table.imp-txt-db {
background-color: #E8E8E9;
border-top: 6px solid white;
width: 217px;
}
@-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='divName' style='
position:  fixed;
border: 5px solid;
top: 25px;
box-shadow: 0 1px 10px 1px rgba(0,0,0,0.2);
right: 25px;
background:  none repeat scroll 0 0 #ffffff;
border-radius: 4px;
padding:5px;
text-align:right;
-webkit-animation: fadeOutnotif 20s linear forwards;
-moz-animation: fadeOutnotif 20s linear forwards;
-o-animation: fadeOutnotif 20s linear forwards;
-ms-animation: fadeOutnotif 20s linear forwards;
animation: fadeOutnotif 20s linear forwards;'>
<table class="imp-db" align='center' bgcolor='#dddddd' border='0' cellpadding='1' cellspacing='2' width='218'>
<tbody>
<tr>
<td align='center' bgcolor='#DDDDDD' style='font-size: 14px; color: #34495E; text-align: center; width: 100%; margin: 0 auto; font-weight: 700;' valign='middle' width='179'>ملحوظة! <span style='color: #060;  font-size: 14px;'></span></td>
<td align='right' bgcolor='#dddddd' valign='middle' width='30'>
</td>
</tr>
</tbody></table>
<table class="imp-txt-db" border='0' cellpadding='5' cellspacing='1' width='240'>
<tbody>
<tr>
<td align='center' bgcolor='#eeeeee' valign='middle'><span style='color: #000;font-size: 14px;'>
ضع هنا الرسالة التي تريدها أن تظهر للزوار  
</span>
</td></tr>
</tbody></table>
</div>

رابط المعاينة

جاري تحميل المقالات المميزة...

كيفية إضافة صندوق الإشعارات عائم إلى مدونات بلوجر

أيمن تك

التعليقات (0)

اترك تعليقاً

جاري تحميل المقالات المميزة...

كيفية إضافة صندوق الإشعارات عائم إلى مدونات بلوجر

أيمن تك

مقالات ذات صلة

التعليقات (0)

اترك تعليقاً