Follow us

احصائيات الموقع

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




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

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





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


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: "Harb-web.blogspot.com"
})
});</script>



غير ما هو بـالاحمر

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

من الرائع ان تشاركنا تجربتك ورأيك، من فضلك لا تستخدم اي كلمات خارجة، روابط لا علاقة لها بالموضوع لانه سيتم حذفها فوراً. فالتعليقات خاضعة للإشراف، دعنا نجعل التعليقات ساحة لتبادل الخبرات والنقاش , واحب ان انبهك انه عند تعليقك تستطيع متابعة التعليق من خلال " إعلامي " الموجودة اسفل يسار الصندوق.