السلام عليكم متابعى مدونة مستر نت اليوم نقدم لكم طرحاً جديداً فى قسم إضافات بلوجر وهى عبارة عن جرس لكتابة اى شعار او رسالة ترحيب لزوار موقعك الإضافةيعود اصلها إلى موقع Dunia Blanter الأجنبى ولكن نحن عدلنا عليها تعديل بسيط حيث اننا اضفنا لها خاصية تغير من لون الإضافة الأن دعونا لا نطيل عليكم و ندخل فى شرح التركيب مع معاينة حية ☺
معاينة
<div id='notif-wrapper'>
<a class='blanternotif' href='javascript:;' title='إشعار'><i class='material-icons blanterxE7F4'></i><i class='material-icons blanterxE5CD'></i></a>
<div class='notifbox'>
مرحبا بكم, نشكركم على زيارة مدونتنا, نتمنى أن تكون قد حصلت على ما كنت تبحث عنها هنا, ولا تنسى الإنضمام الى متابعي المدونة الأوفياء لتكون أول من يعرف بجديد مواضيعنا, دمتم في آمان الله .. مدير المدونة
<div class='gantiwarna'>
<a class='red' href='javascript:;'></a>
<a class='bluedark' href='javascript:;'></a>
<a class='cyan' href='javascript:;'></a>
</div>
</div>
</div>
<script type='text/javascript'>
$(document).ready(function(){$(".blanternotif").click(function(){$(".notifbox,#notif-wrapper").toggleClass("activ");});});
$(document).ready(function(){$("a.bluedark").click(function(){$(".notifbox").toggleClass("bluedark").removeClass("cyan","red");});});
$(document).ready(function(){$("a.red").click(function(){$(".notifbox").toggleClass("red").removeClass("cyan","bluedark");});});
$(document).ready(function(){$("a.cyan").click(function(){$(".notifbox").toggleClass("cyan").removeClass("bluedark","red");});});
$(document).ready(function(){$(".notifbox .activ").kutipan()});
</script>
شرح الإعداد و التركيب
اولاً : إبحث عن الوسم وضع الكود التالى أسفله <head>
<link href='https://fonts.googleapis.com/icon?family=Material+Icons' rel='stylesheet'/>
ثانياً : نبحث عن الوسم ]]></b:skin> ونضيف الكود التالى فوقه
/* Nofications Bell Multi Color By Net-mr.blogspot.com */
#notif-wrapper{position:fixed;width:100%;z-index:999}
.blanternotif{background:#3d85c6;color:#FFF;width:50px;height:50px;border-radius:100%;position:fixed;z-index:999;bottom:45%;left:20px;-webkit-animation-duration:5s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:notifklik;animation-duration:5s;animation-iteration-count:infinite;animation-name:notifklik;transition:all 5s ease-in-out}
.blanternotif i{color:#FFF;font-size:25px;margin:11px 12px 10px 13px;-webkit-animation-duration:2s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:notificon;animation-duration:2s;animation-iteration-count:infinite;animation-name:notificon;transition:all 2s ease-in-out}
@keyframes notifklik{0%{transform:scale(1)}50%{transform:scale(1.2)}100%{transform:scale(1)}}
@keyframes notificon{0%{transform:rotate(-30deg)}50%{transform:rotate(30deg)}100%{transform:rotate(-30deg)}}
@keyframes notifbox{0%{transform:rotateZ(-45deg);visibility:visible;opacity:0;bottom:68%;left:78px}100%{transform:none;visibility:visible;opacity:1;bottom:41%;left:110px}}
.notifbox{padding:20px;border-radius:3px;position:fixed;resize:none;line-height:1.5;z-index:999;left:110px;bottom:41%;max-width:30rem;background:#3d85c6;border:1px solid #3d85c6;color:#fff;font-size:13px;box-shadow:0 1px 1px 0 rgba(0,0,0,0.07),0 1px 1px 0 rgba(0,0,0,0.06);display:inline-block;opacity:0;visibility:hidden;transition:.4s ease-in-out}
.notifbox:before{content:"";width:0;height:0;position:absolute;top:-.7px;left:-15px;border-width:8px;border-style:solid;border-color:#3d85c6 #3d85c6 transparent transparent;display:block}.blanterxE5CD{display:none!important}#notif-wrapper.activ .blanterxE5CD{display:block!important;animation-name:none!important}#notif-wrapper.activ .blanterxE7F4{display:none!important}
.notifbox.activ{-webkit-animation-duration:1s;-webkit-animation-iteration-count:1;-webkit-animation-name:notifbox;animation-duration:1s;animation-iteration-count:1;animation-name:notifbox;transition:all 1s ease-in-out;opacity:1;visibility:visible}
.notifbox.activ i.fa{background:#9C0C0C;z-index:9;border:2px solid #fff;border-radius:100%;padding:10px;font-size:15px;color:#fff;position:absolute;top:15px;left:5px}
.notifbox.activ.red,.red,.notifbox.activ.red i.fa{background:#9C0C0C!important;border:1px solid #9C0C0C!important;}
.notifbox.activ.bluedark,.bluedark,.notifbox.activ.bluedark i.fa{background:#0c6d9c!important;border:1px solid #0c6d9c!important;}
.notifbox.activ.cyan,.cyan,.notifbox.activ.cyan i.fa{background:#0c9c81!important;border:1px solid #0c9c81!important;}
.notifbox.activ.red:before{border-color:#9C0C0C #9C0C0C transparent transparent !important;}
.notifbox.activ.bluedark:before{border-color:#0c6d9c #0c6d9c transparent transparent !important;}
.notifbox.activ.cyan:before{border-color:#0c9c81 #0c9c81 transparent transparent !important;}
.gantiwarna{position:static;right:0;bottom:-25px}
.gantiwarna a{margin-right:5px;border:2px solid #fff!important;border-radius:100%;padding:10px;width:10px;height:10px;font-size:0}
@media screen and (max-width:680px){.notifbox:before{display:none}.notifbox{left:0%!important;bottom:0}@keyframes notifbox{0%{left:0!important}100%{left:0!important}}}
#notif-wrapper{position:fixed;width:100%;z-index:999}
.blanternotif{background:#3d85c6;color:#FFF;width:50px;height:50px;border-radius:100%;position:fixed;z-index:999;bottom:45%;left:20px;-webkit-animation-duration:5s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:notifklik;animation-duration:5s;animation-iteration-count:infinite;animation-name:notifklik;transition:all 5s ease-in-out}
.blanternotif i{color:#FFF;font-size:25px;margin:11px 12px 10px 13px;-webkit-animation-duration:2s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:notificon;animation-duration:2s;animation-iteration-count:infinite;animation-name:notificon;transition:all 2s ease-in-out}
@keyframes notifklik{0%{transform:scale(1)}50%{transform:scale(1.2)}100%{transform:scale(1)}}
@keyframes notificon{0%{transform:rotate(-30deg)}50%{transform:rotate(30deg)}100%{transform:rotate(-30deg)}}
@keyframes notifbox{0%{transform:rotateZ(-45deg);visibility:visible;opacity:0;bottom:68%;left:78px}100%{transform:none;visibility:visible;opacity:1;bottom:41%;left:110px}}
.notifbox{padding:20px;border-radius:3px;position:fixed;resize:none;line-height:1.5;z-index:999;left:110px;bottom:41%;max-width:30rem;background:#3d85c6;border:1px solid #3d85c6;color:#fff;font-size:13px;box-shadow:0 1px 1px 0 rgba(0,0,0,0.07),0 1px 1px 0 rgba(0,0,0,0.06);display:inline-block;opacity:0;visibility:hidden;transition:.4s ease-in-out}
.notifbox:before{content:"";width:0;height:0;position:absolute;top:-.7px;left:-15px;border-width:8px;border-style:solid;border-color:#3d85c6 #3d85c6 transparent transparent;display:block}.blanterxE5CD{display:none!important}#notif-wrapper.activ .blanterxE5CD{display:block!important;animation-name:none!important}#notif-wrapper.activ .blanterxE7F4{display:none!important}
.notifbox.activ{-webkit-animation-duration:1s;-webkit-animation-iteration-count:1;-webkit-animation-name:notifbox;animation-duration:1s;animation-iteration-count:1;animation-name:notifbox;transition:all 1s ease-in-out;opacity:1;visibility:visible}
.notifbox.activ i.fa{background:#9C0C0C;z-index:9;border:2px solid #fff;border-radius:100%;padding:10px;font-size:15px;color:#fff;position:absolute;top:15px;left:5px}
.notifbox.activ.red,.red,.notifbox.activ.red i.fa{background:#9C0C0C!important;border:1px solid #9C0C0C!important;}
.notifbox.activ.bluedark,.bluedark,.notifbox.activ.bluedark i.fa{background:#0c6d9c!important;border:1px solid #0c6d9c!important;}
.notifbox.activ.cyan,.cyan,.notifbox.activ.cyan i.fa{background:#0c9c81!important;border:1px solid #0c9c81!important;}
.notifbox.activ.red:before{border-color:#9C0C0C #9C0C0C transparent transparent !important;}
.notifbox.activ.bluedark:before{border-color:#0c6d9c #0c6d9c transparent transparent !important;}
.notifbox.activ.cyan:before{border-color:#0c9c81 #0c9c81 transparent transparent !important;}
.gantiwarna{position:static;right:0;bottom:-25px}
.gantiwarna a{margin-right:5px;border:2px solid #fff!important;border-radius:100%;padding:10px;width:10px;height:10px;font-size:0}
@media screen and (max-width:680px){.notifbox:before{display:none}.notifbox{left:0%!important;bottom:0}@keyframes notifbox{0%{left:0!important}100%{left:0!important}}}
ثالثاً: بإستخدام الزرين Ctrl+F إبحث عن الوسم <body> إذا لم تجده إبحث عنه بالشكل التالى <body وضع الكود التالى اسفله
<a class='blanternotif' href='javascript:;' title='إشعار'><i class='material-icons blanterxE7F4'></i><i class='material-icons blanterxE5CD'></i></a>
<div class='notifbox'>
مرحبا بكم, نشكركم على زيارة مدونتنا, نتمنى أن تكون قد حصلت على ما كنت تبحث عنها هنا, ولا تنسى الإنضمام الى متابعي المدونة الأوفياء لتكون أول من يعرف بجديد مواضيعنا, دمتم في آمان الله .. مدير المدونة
<div class='gantiwarna'>
<a class='red' href='javascript:;'></a>
<a class='bluedark' href='javascript:;'></a>
<a class='cyan' href='javascript:;'></a>
</div>
</div>
</div>
اخيراً : نبحث عن الوسم </body> ونضيف الكود التالى فوقه
$(document).ready(function(){$(".blanternotif").click(function(){$(".notifbox,#notif-wrapper").toggleClass("activ");});});
$(document).ready(function(){$("a.bluedark").click(function(){$(".notifbox").toggleClass("bluedark").removeClass("cyan","red");});});
$(document).ready(function(){$("a.red").click(function(){$(".notifbox").toggleClass("red").removeClass("cyan","bluedark");});});
$(document).ready(function(){$("a.cyan").click(function(){$(".notifbox").toggleClass("cyan").removeClass("bluedark","red");});});
$(document).ready(function(){$(".notifbox .activ").kutipan()});
</script>
نتمنى إذا اعجبك الموضوع لا تبخل علينا بالإشتراك فى أعضاء المدونة 😃
ليست هناك تعليقات
نسعد ونتشرف بتعليقاتكم
لكن فى إطار الموضوع وليس خارجه حفاظاً على راحتك الشخصية
لوضع اى اكواد Html فى التعليقات يرجى تحوليها اولاً بمحول الأكواد من هنا
لذلك نرجو منك ان تستعمل كل شىء بطريقته الصحيحة شكراً لتفهمك 😊
محول الاكواد محول الأكواد تابع المدونة تابع المدونة