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

السلام عليكم ورحمة الله و بركاته 

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

صورة للإضافة 

تركيب الاضافة 

• اذهب الى التخطيط ثم الى اضافة اداة جديدة ثم اختر اداة HTML/Java Script 

و ضع فيها هذا الكود 

<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:14px;

line-height: 20px;

}

.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:25px;

margin:2px 0 0;

}

#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-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: "مدونة تكنوليبي"

     })

});</script>

• قم بتغيير ماهو بـالاحمر بما يناسبك و مبروك عليك الاضافة :) 

من فضلك اضغظ لايك لمشاهدة لينك التحميل

لا تبخل باعجــاب أو مشاركــة للمقــال

→ اعجــــاب

Tweet

→ مشــاركــة