أضافة صندوق التنبيهات لبلوجر

السلام عليكم .... �� , اليوم سأقدم لكم أضافة صندوق التنبيهات والملاحظات وغيرها لمدونتكم ببلوجر , هذه الاضافة مهمة لمدونات بلوجر , اذا كنت تريد اخبار �� زوار موقعك عن عطل �� في موقعك او عن غيابك لفترة محدودة او تخبرة انه قد بدأت مسابقة وعلية الاشتراك , هناك أستخدامات عديدة لهذه الاضافة المميزة ⭐ , دعونا نعاين هذه الاضافة قبل تركيبها .




شرح طريقة التركيب
1. مباشرة من التخطيط أضف أداة Html/JavaScript وضع  بها الكود التالي

الكود

<style type="text/css">.divMessageBox {
width:100%;
height:100%;
position:fixed;
top:0;
right:0;
background:rgba(0,0,0,0.6);
z-index:100000;
}
#divMiniIcons {
float:left;
position:fixed;
width:430px;
left:10px;
bottom:180px;
z-index:9999;
}
.botClose {
position:absolute;
left:10px;
height:15px;
width:15px;
cursor:pointer;
}
#divMiniIcons .cajita {
background-color:red;
width:30.5px;
height:30.5px;
float:left;
cursor:pointer;
display:block;
margin:2px 2px 0;
}
.cajita img {
width:23px;
height:23px;
padding-right:3px;
padding-top:3px;
}
.bigBox {
position:fixed;
left:10px;
bottom:10px;
background-color:#004d60;
width:390px;
height:150px;
color:#FFF;
font-family:AraJozoor-Regular;
z-index:99999;
padding:10px 10px 5px;
}
.bigBox p {
font-size:13px;
line-height: 20px;
font-family: 'bokra', sans-serif;
}
.botClose {
position:absolute;
left:10px;
height:15px;
width:15px;
cursor:pointer;
}
.bigBox .bigboxicon {
width:100px;
float:right;
margin:0;
}
.bigBox .bigboxnumber {
width:220px;
float:right;
text-align:left;
font-size:20px;
margin:2px 0 0;
font-family: 'bokra', sans-serif;
}
#pageslide {
display:none;
position:fixed;
top:0;
height:100%;
z-index:999999;
width:305px;
background-color:#004d60;
color:#FFF;
-webkit-box-shadow:inset 0 0 5px 5px #222;
-moz-shadow:inset 0 0 0 0 #222;
box-shadow:inset 0 0 0 0 #222;
padding:20px;
}
.purehtml {
color:#FFF;
font-family:AraJozoor-Regular;
font-size:16px;
}
@font-face {
font-family:Quattro;
src:url(Quattrocento-Regular.otf);
}
.animated {
-webkit-animation-duration:1s;
-moz-animation-duration:1s;
-o-animation-duration:1s;
animation-duration:1s;
-webkit-animation-fill-mode:both;
-moz-animation-fill-mode:both;
-o-animation-fill-mode:both;
animation-fill-mode:both;
}
.animated.fast {
-webkit-animation-duration:.4s;
-moz-animation-duration:.4s;
-ms-animation-duration:.4s;
-o-animation-duration:.4s;
animation-duration:.4s;
}
100% {
-webkit-transform:translateX(-20px);
-moz-transform:translateX(-20px);
-o-transform:translateX(-20px);
opacity:0;
transform:translateX(-20px);
}
.fadeIn {
-webkit-animation-name:fadeIn;
-moz-animation-name:fadeIn;
-o-animation-name:fadeIn;
animation-name:fadeIn;
}
.fadeInleft {
-webkit-animation-name:fadeInleft;
-moz-animation-name:fadeInleft;
-o-animation-name:fadeInleft;
animation-name:fadeInleft;
}
.fadeInUp {
-webkit-animation-name:fadeInUp;
-moz-animation-name:fadeInUp;
-o-animation-name:fadeInUp;
animation-name:fadeInUp;
}
.fadeOut {
-webkit-animation-name:fadeOut;
-moz-animation-name:fadeOut;
-o-animation-name:fadeOut;
animation-name:fadeOut;
}
.fadeOutright {
-webkit-animation-name:fadeOutright;
-moz-animation-name:fadeOutright;
-o-animation-name:fadeOutright;
animation-name:fadeOutright;
}
.bigBox span,.SmallBox span {
font-family: 'bokra', sans-serif;
font-size:22px;
}
@media screen and max-width 450px and max-width 767px{
.bigBox {
position:fixed;
left:10px;
bottom:10px;
background-color:#004d60;
width:88%;
height:150px;
color:#FFF;
font-family:'Segoe UI', Tahoma, Helvetica, Sans-Serif;
z-index:99999;
padding:10px 10px 5px;
}
.bigBox span {
font-size:19px;
}
.botClose {
position:absolute;
left:10px;
height:20px;
width:20px;
}
.bigBox .bigboxicon {
width:100px;
float:right;
margin:0;
}
.bigBox .bigboxnumber {
position:fixed;
width:220px;
float:right;
text-align:left;
font-size:25px;
margin:2px 0 0;
}
</style><script src="https://dl.dropboxusercontent.com/u/103525393/TusUp/notification/static/js/scriptgates.js"></script> <script type="text/javascript">$("#BigBoxCall1 ").ready(function () {$.bigBox({
 title: "رسالة مهمة",
        content: "هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة، لقد تم توليد هذا النص من مولد النص العربى، حيث يمكنك أن تولد مثل هذا النص أو العديد من النصوص الأخرى إضافة إلى زيادة عدد الحروف التى يولدها التطبيق.",
        color: "#1ba1e2",
        img: "https://dl.dropboxusercontent.com/u/103525393/TusUp/notification/static/img/cloud.png",
        number: "wwww.Pro7web.com"
     })
 
});</script>

التغييرات الأساسية
1. قم بتغيير رابط مدونتنا wwww.Pro7web.com برابط مدونتك
2. قم بتغيير font-family: 'bokra', sans-serif; الي الخط الذي تريدة
لا تنسا ان تكن من أعضاء المدونة من هنا , إذا واجهتك اي مشكلة لا تترد فى ترك تعليق
شارك المقال على :

التعليقات

لا توجد تعليقات حتى الآن، كن أول من يعلق

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

المشاركات الشائعة

أحدث التعليقات

رسالة!

نأسف بشده عن عدم الرد علي بعض تعليقاتكم ورسائلكم ، نظرا لانشغالي بالامتحانات ، اتمني منكم الدعاء لي بالنجاح ، واتمني لقم قضاء أجمل الاوقات معنا في " برو ويب " وسوف اعود لكم في 24/6

اذا كان لديكم اي استفسار مهم تفضلو بمراسلتني من حسابي علي الفيسبوك من هنا
تم النسخ