اضافة صندوق ملاحظات عائم جنب المدونة

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

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

فيعرف الزائر كيف يتعامل مع مدونتك . وهذا مثال واحد من مئة مثال حول استعمال هاته الملاحضات نذكر بعض منها مثل المدونة قيد الانشاء , نعتذر ان واجهتك مشاكل في المدونة , ارجو ان تعجبكم المدونة , ......

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

معاينه

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

1-توجه لتخطيط مدونتك

2-ثم اضف الكود التالي داخل اداة 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: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: "first-m.blogspot.com"
})
});</script>

غير مايجب تغيره ومبروك عليك الاضافة