أضافة صندوق التنبيهات لبلوجر
عدد التعليقات :
3
, اليوم سأقدم لكم أضافة صندوق التنبيهات والملاحظات وغيرها لمدونتكم ببلوجر , هذه الاضافة مهمة لمدونات بلوجر , اذا كنت تريد اخبار 
زوار موقعك عن عطل 
في موقعك او عن غيابك لفترة محدودة او تخبرة انه قد بدأت مسابقة وعلية الاشتراك , هناك أستخدامات عديدة لهذه الاضافة المميزة 
, دعونا نعاين هذه الاضافة قبل تركيبها .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; الي الخط الذي تريدة
لا تنسا ان تكن من أعضاء المدونة من هنا , إذا واجهتك اي مشكلة لا تترد فى ترك تعليق
شارك المقال على :
رائع استمر
ردحذفاخي شكر ليك علي مجهودك الرائع
ردحذفبس اريد صندوق اشتراك مثل العندك هاد ((بور باي فوكس بوش))
شكرا لك ، سيتم نشرة في التدوينة القادمة عزيزي علي
حذف