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

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

• معاينة

شرح طريقة التركيب

1. 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. 1. قم بتغيير رابط مدونتنا wwww.Pro7web.com برابط مدونتك
2. 2. قم بتغيير font-family: 'bokra', sans-serif; الي الخط الذي تريدة

المصدر