تركيب جرس تنبيه احترافي متحرك لزوار اسفل المدونة
السلام عليكم احبيت الكرام اليوم موعدنا مع طريقة حصرية لتركيب جرس تنبيه احترافي متحرك بتأثيرات رائعة و ر سائل و أزرار اشتراك , طبعا هاته الاضافة مهمة لانها ستقدم لزائر موضوع مهم او تحثه على تصفحه كذلك تشجعه على الاشتراك في قناتك او الدخول اليها .
صورة للإضافة :
معاينة الاضافة :
تركيب الإضافة :
هناك طريقتين لتركيب الاضافة
اولا : يمكنك نسخ كل الاكواد ووضعها في اداة html/javascript واحدة بعد اضافتها في التخطيط و ضغط حفظ
ثانيا وهي افضل طريقة اتبع الخطوات التالية :
1- اضافة اكواد css : ادخل للمظهر ثم تحرير html اضغط ctrl+f و ابحث عن هذا الوسم وضع الكود التالي فوقه مباشرة
.notif-popup{position: absolute; right: 330px; top: -71px; width: 250px; min-height: 71px; z-index: 10; transition: left .3s; background-color: #fff; overflow: hidden; box-shadow: 0 2px 3px -1px rgba(0,0,0,.3); opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-transform: none; -moz-transform: none; -o-transform: none; -ms-transform: none; transform: none; visibility: hidden; -webkit-transition: all .5s; -moz-transition: all .5s; -o-transition: all .5s; -ms-transition: all .5s; transition: all .5s;}
.notif-popup.fadeInright{right:95px}
.notif-container{position:relative;z-index:1}
.notif-img-wrap{position:absolute;background-color:#f5f5f5;text-align:center;overflow:hidden}
.notif-img-wrap img { width: 80px; height: 80px; }
.notif-text-wrap{padding: 10px 70px 2px 0; font-size: 1.2em; text-align: center;color: #444;}
.notif-content-title{font-size:.8em}
.notif-pop-link{color:#333; direction: rtl;}
.notif-content-description{font-size:.75em;line-height:1.2;margin:.5em 0}
.notif-bg{position:absolute;top:0;left:-5px;width:100%}
.notify-url{color: #FFF; font-size: .6em; background: #4d90fe; display: inline; padding: 2px 5px; border-radius: 2px; float: left; margin: 0 10px;}
.notif-widg-link{position:absolute;right:0;bottom:0;z-index:20}
.web-notif{color:#333;position:fixed;bottom:90px;right:0;z-index:1000}
@media (max-width:53.125em){.web-notif{-webkit-transform:scale(.85);-moz-transform:scale(.85);-o-transform:scale(.85);-ms-transform:scale(.85);transform:scale(.85);-webkit-transform-origin:0;-moz-transform-origin:0;-o-transform-origin:0;-ms-transform-origin:0;transform-origin:0}}
.web-notif:hover .notif-sign,.web-notif.show-once .notif-sign{visibility:visible;opacity:1;-ms-filter:none;filter:none;-webkit-transform:translate3d(2%,0,0);-moz-transform:translate3d(2%,0,0);-o-transform:translate3d(2%,0,0);-ms-transform:translate3d(2%,0,0);transform:translate3d(2%,0,0)}
.web-notif:hover .notif-popup,.web-notif.show-once .notif-popup{opacity:1;-ms-filter:none;filter:none;-webkit-transform:translate3d(100%,0,0);-moz-transform:translate3d(100%,0,0);-o-transform:translate3d(100%,0,0);-ms-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);visibility:visible}
.web-notif:hover .notif-widg-now,.web-notif.show-once .notif-widg-now{visibility:visible;opacity:1;-ms-filter:none;filter:none}
.web-notif:hover .notif-widg-bell,.web-notif.show-once .notif-widg-bell{height:36px}
.notif-widg-wrap{box-sizing:border-box;height:70px;width:70px;background:#eeeeee;position:relative;text-align:center;padding:.5em 0;border-radius: .3em 0 0 .3em;overflow:hidden}
.notif-widg-bell{-webkit-transform-origin:50% 4px;-moz-transform-origin:50% 4px;-o-transform-origin:50% 4px;-ms-transform-origin:50% 4px;transform-origin:50% 4px;height:50px;-webkit-transition:height .3s;-moz-transition:height .3s;-o-transition:height .3s;-ms-transition:height .3s;transition:height .3s;z-index:1;position:relative;display:inline-block}
.notif-bell-ring{-webkit-animation:ring 8s 1s ease-in-out infinite;-moz-animation:ring 8s 1s ease-in-out infinite;-o-animation:ring 8s 1s ease-in-out infinite;-ms-animation:ring 8s 1s ease-in-out infinite;animation:ring 8s 1s ease-in-out infinite}
.notif-widg-now{visibility:hidden;opacity:0;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0);background:#fff;color:#555;text-decoration:underline;font-weight:bold;font-size:.6em;position:absolute;right:3%;bottom:7px;padding:.1em .4em;-webkit-border-radius:.3em;border-radius:.3em;-webkit-transition:visibility 0.3s,opacity 0.3s;-moz-transition:visibility 0.3s,opacity 0.3s;-o-transition:visibility 0.3s,opacity 0.3s;-ms-transition:visibility 0.3s,opacity 0.3s;transition:visibility 0.3s,opacity 0.3s}
.ns-text{background:#fff;border:1px solid #eee;box-shadow:0 2px 3px -1px rgba(0,0,0,.3);width:210px;font-size:.7em;padding:1.2em .6em;text-align:center;font-family: 'Droid Arabic Naskh',sans-serif;display:block;position:relative;z-index:10;-webkit-transform:rotate(4deg);-moz-transform:rotate(4deg);-o-transform:rotate(4deg);-ms-transform:rotate(4deg);transform:rotate(4deg)}
.notif-sign{position:absolute;right:0;bottom:90px;z-index:2;visibility:hidden;-webkit-transition:all .5s;-moz-transition:all .5s;-o-transition:all .5s;-ms-transition:all .5s;transition:all .5s;opacity:0;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0);-webkit-transform:translate3d(-2%,100%,0);-moz-transform:translate3d(-2%,100%,0);-o-transform:translate3d(-2%,100%,0);-ms-transform:translate3d(-2%,100%,0);transform:translate3d(-2%,100%,0)}
.notif-sign:before{background:#754c24;height:70px;width:10px;content:"";position:absolute;right:40px;bottom:-50px;z-index:1;-webkit-transform:rotate(4deg);-moz-transform:rotate(4deg);-o-transform:rotate(4deg);-ms-transform:rotate(4deg);transform:rotate(4deg)}
@-moz-keyframes ring{0%{-webkit-transform:rotate(0);-moz-transform:rotate(0);-o-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0)}1%{-webkit-transform:rotate(28deg);-moz-transform:rotate(28deg);-o-transform:rotate(28deg);-ms-transform:rotate(28deg);transform:rotate(28deg)}3%{-webkit-transform:rotate(-24deg);-moz-transform:rotate(-24deg);-o-transform:rotate(-24deg);-ms-transform:rotate(-24deg);transform:rotate(-24deg)}5%{-webkit-transform:rotate(30deg);-moz-transform:rotate(30deg);-o-transform:rotate(30deg);-ms-transform:rotate(30deg);transform:rotate(30deg)}7%{-webkit-transform:rotate(-28deg);-moz-transform:rotate(-28deg);-o-transform:rotate(-28deg);-ms-transform:rotate(-28deg);transform:rotate(-28deg)}9%{-webkit-transform:rotate(26deg);-moz-transform:rotate(26deg);-o-transform:rotate(26deg);-ms-transform:rotate(26deg);transform:rotate(26deg)}11%{-webkit-transform:rotate(-24deg);-moz-transform:rotate(-24deg);-o-transform:rotate(-24deg);-ms-transform:rotate(-24deg);transform:rotate(-24deg)}13%{-webkit-transform:rotate(22deg);-moz-transform:rotate(22deg);-o-transform:rotate(22deg);-ms-transform:rotate(22deg);transform:rotate(22deg)}15%{-webkit-transform:rotate(-20deg);-moz-transform:rotate(-20deg);-o-transform:rotate(-20deg);-ms-transform:rotate(-20deg);transform:rotate(-20deg)}17%{-webkit-transform:rotate(22deg);-moz-transform:rotate(22deg);-o-transform:rotate(22deg);-ms-transform:rotate(22deg);transform:rotate(22deg)}19%{-webkit-transform:rotate(-20deg);-moz-transform:rotate(-20deg);-o-transform:rotate(-20deg);-ms-transform:rotate(-20deg);transform:rotate(-20deg)}21%{-webkit-transform:rotate(18deg);-moz-transform:rotate(18deg);-o-transform:rotate(18deg);-ms-transform:rotate(18deg);transform:rotate(18deg)}23%{-webkit-transform:rotate(-16deg);-moz-transform:rotate(-16deg);-o-transform:rotate(-16deg);-ms-transform:rotate(-16deg);transform:rotate(-16deg)}25%{-webkit-transform:rotate(14deg);-moz-transform:rotate(14deg);-o-transform:rotate(14deg);-ms-transform:rotate(14deg);transform:rotate(14deg)}27%{-webkit-transform:rotate(-12deg);-moz-transform:rotate(-12deg);-o-transform:rotate(-12deg);-ms-transform:rotate(-12deg);transform:rotate(-12deg)}29%{-webkit-transform:rotate(10deg);-moz-transform:rotate(10deg);-o-transform:rotate(10deg);-ms-transform:rotate(10deg);transform:rotate(10deg)}31%{-webkit-transform:rotate(-8deg);-moz-transform:rotate(-8deg);-o-transform:rotate(-8deg);-ms-transform:rotate(-8deg);transform:rotate(-8deg)}33%{-webkit-transform:rotate(6deg);-moz-transform:rotate(6deg);-o-transform:rotate(6deg);-ms-transform:rotate(6deg);transform:rotate(6deg)}35%{-webkit-transform:rotate(-4deg);-moz-transform:rotate(-4deg);-o-transform:rotate(-4deg);-ms-transform:rotate(-4deg);transform:rotate(-4deg)}37%{-webkit-transform:rotate(2deg);-moz-transform:rotate(2deg);-o-transform:rotate(2deg);-ms-transform:rotate(2deg);transform:rotate(2deg)}39%{-webkit-transform:rotate(-1deg);-moz-transform:rotate(-1deg);-o-transform:rotate(-1deg);-ms-transform:rotate(-1deg);transform:rotate(-1deg)}41%{-webkit-transform:rotate(1deg);-moz-transform:rotate(1deg);-o-transform:rotate(1deg);-ms-transform:rotate(1deg);transform:rotate(1deg)}43%{-webkit-transform:rotate(0);-moz-transform:rotate(0);-o-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(0);-moz-transform:rotate(0);-o-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0)}}
@-webkit-keyframes ring{0%{-webkit-transform:rotate(0);-moz-transform:rotate(0);-o-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0)}1%{-webkit-transform:rotate(28deg);-moz-transform:rotate(28deg);-o-transform:rotate(28deg);-ms-transform:rotate(28deg);transform:rotate(28deg)}3%{-webkit-transform:rotate(-24deg);-moz-transform:rotate(-24deg);-o-transform:rotate(-24deg);-ms-transform:rotate(-24deg);transform:rotate(-24deg)}5%{-webkit-transform:rotate(30deg);-moz-transform:rotate(30deg);-o-transform:rotate(30deg);-ms-transform:rotate(30deg);transform:rotate(30deg)}7%{-webkit-transform:rotate(-28deg);-moz-transform:rotate(-28deg);-o-transform:rotate(-28deg);-ms-transform:rotate(-28deg);transform:rotate(-28deg)}9%{-webkit-transform:rotate(26deg);-moz-transform:rotate(26deg);-o-transform:rotate(26deg);-ms-transform:rotate(26deg);transform:rotate(26deg)}11%{-webkit-transform:rotate(-24deg);-moz-transform:rotate(-24deg);-o-transform:rotate(-24deg);-ms-transform:rotate(-24deg);transform:rotate(-24deg)}13%{-webkit-transform:rotate(22deg);-moz-transform:rotate(22deg);-o-transform:rotate(22deg);-ms-transform:rotate(22deg);transform:rotate(22deg)}15%{-webkit-transform:rotate(-20deg);-moz-transform:rotate(-20deg);-o-transform:rotate(-20deg);-ms-transform:rotate(-20deg);transform:rotate(-20deg)}17%{-webkit-transform:rotate(22deg);-moz-transform:rotate(22deg);-o-transform:rotate(22deg);-ms-transform:rotate(22deg);transform:rotate(22deg)}19%{-webkit-transform:rotate(-20deg);-moz-transform:rotate(-20deg);-o-transform:rotate(-20deg);-ms-transform:rotate(-20deg);transform:rotate(-20deg)}21%{-webkit-transform:rotate(18deg);-moz-transform:rotate(18deg);-o-transform:rotate(18deg);-ms-transform:rotate(18deg);transform:rotate(18deg)}23%{-webkit-transform:rotate(-16deg);-moz-transform:rotate(-16deg);-o-transform:rotate(-16deg);-ms-transform:rotate(-16deg);transform:rotate(-16deg)}25%{-webkit-transform:rotate(14deg);-moz-transform:rotate(14deg);-o-transform:rotate(14deg);-ms-transform:rotate(14deg);transform:rotate(14deg)}27%{-webkit-transform:rotate(-12deg);-moz-transform:rotate(-12deg);-o-transform:rotate(-12deg);-ms-transform:rotate(-12deg);transform:rotate(-12deg)}29%{-webkit-transform:rotate(10deg);-moz-transform:rotate(10deg);-o-transform:rotate(10deg);-ms-transform:rotate(10deg);transform:rotate(10deg)}31%{-webkit-transform:rotate(-8deg);-moz-transform:rotate(-8deg);-o-transform:rotate(-8deg);-ms-transform:rotate(-8deg);transform:rotate(-8deg)}33%{-webkit-transform:rotate(6deg);-moz-transform:rotate(6deg);-o-transform:rotate(6deg);-ms-transform:rotate(6deg);transform:rotate(6deg)}35%{-webkit-transform:rotate(-4deg);-moz-transform:rotate(-4deg);-o-transform:rotate(-4deg);-ms-transform:rotate(-4deg);transform:rotate(-4deg)}37%{-webkit-transform:rotate(2deg);-moz-transform:rotate(2deg);-o-transform:rotate(2deg);-ms-transform:rotate(2deg);transform:rotate(2deg)}39%{-webkit-transform:rotate(-1deg);-moz-transform:rotate(-1deg);-o-transform:rotate(-1deg);-ms-transform:rotate(-1deg);transform:rotate(-1deg)}41%{-webkit-transform:rotate(1deg);-moz-transform:rotate(1deg);-o-transform:rotate(1deg);-ms-transform:rotate(1deg);transform:rotate(1deg)}43%{-webkit-transform:rotate(0);-moz-transform:rotate(0);-o-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(0);-moz-transform:rotate(0);-o-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0)}}
@-o-keyframes ring{0%{-webkit-transform:rotate(0);-moz-transform:rotate(0);-o-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0)}1%{-webkit-transform:rotate(28deg);-moz-transform:rotate(28deg);-o-transform:rotate(28deg);-ms-transform:rotate(28deg);transform:rotate(28deg)}3%{-webkit-transform:rotate(-24deg);-moz-transform:rotate(-24deg);-o-transform:rotate(-24deg);-ms-transform:rotate(-24deg);transform:rotate(-24deg)}5%{-webkit-transform:rotate(30deg);-moz-transform:rotate(30deg);-o-transform:rotate(30deg);-ms-transform:rotate(30deg);transform:rotate(30deg)}7%{-webkit-transform:rotate(-28deg);-moz-transform:rotate(-28deg);-o-transform:rotate(-28deg);-ms-transform:rotate(-28deg);transform:rotate(-28deg)}9%{-webkit-transform:rotate(26deg);-moz-transform:rotate(26deg);-o-transform:rotate(26deg);-ms-transform:rotate(26deg);transform:rotate(26deg)}11%{-webkit-transform:rotate(-24deg);-moz-transform:rotate(-24deg);-o-transform:rotate(-24deg);-ms-transform:rotate(-24deg);transform:rotate(-24deg)}13%{-webkit-transform:rotate(22deg);-moz-transform:rotate(22deg);-o-transform:rotate(22deg);-ms-transform:rotate(22deg);transform:rotate(22deg)}15%{-webkit-transform:rotate(-20deg);-moz-transform:rotate(-20deg);-o-transform:rotate(-20deg);-ms-transform:rotate(-20deg);transform:rotate(-20deg)}17%{-webkit-transform:rotate(22deg);-moz-transform:rotate(22deg);-o-transform:rotate(22deg);-ms-transform:rotate(22deg);transform:rotate(22deg)}19%{-webkit-transform:rotate(-20deg);-moz-transform:rotate(-20deg);-o-transform:rotate(-20deg);-ms-transform:rotate(-20deg);transform:rotate(-20deg)}21%{-webkit-transform:rotate(18deg);-moz-transform:rotate(18deg);-o-transform:rotate(18deg);-ms-transform:rotate(18deg);transform:rotate(18deg)}23%{-webkit-transform:rotate(-16deg);-moz-transform:rotate(-16deg);-o-transform:rotate(-16deg);-ms-transform:rotate(-16deg);transform:rotate(-16deg)}25%{-webkit-transform:rotate(14deg);-moz-transform:rotate(14deg);-o-transform:rotate(14deg);-ms-transform:rotate(14deg);transform:rotate(14deg)}27%{-webkit-transform:rotate(-12deg);-moz-transform:rotate(-12deg);-o-transform:rotate(-12deg);-ms-transform:rotate(-12deg);transform:rotate(-12deg)}29%{-webkit-transform:rotate(10deg);-moz-transform:rotate(10deg);-o-transform:rotate(10deg);-ms-transform:rotate(10deg);transform:rotate(10deg)}31%{-webkit-transform:rotate(-8deg);-moz-transform:rotate(-8deg);-o-transform:rotate(-8deg);-ms-transform:rotate(-8deg);transform:rotate(-8deg)}33%{-webkit-transform:rotate(6deg);-moz-transform:rotate(6deg);-o-transform:rotate(6deg);-ms-transform:rotate(6deg);transform:rotate(6deg)}35%{-webkit-transform:rotate(-4deg);-moz-transform:rotate(-4deg);-o-transform:rotate(-4deg);-ms-transform:rotate(-4deg);transform:rotate(-4deg)}37%{-webkit-transform:rotate(2deg);-moz-transform:rotate(2deg);-o-transform:rotate(2deg);-ms-transform:rotate(2deg);transform:rotate(2deg)}39%{-webkit-transform:rotate(-1deg);-moz-transform:rotate(-1deg);-o-transform:rotate(-1deg);-ms-transform:rotate(-1deg);transform:rotate(-1deg)}41%{-webkit-transform:rotate(1deg);-moz-transform:rotate(1deg);-o-transform:rotate(1deg);-ms-transform:rotate(1deg);transform:rotate(1deg)}43%{-webkit-transform:rotate(0);-moz-transform:rotate(0);-o-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(0);-moz-transform:rotate(0);-o-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0)}}
@keyframes ring{0%{-webkit-transform:rotate(0);-moz-transform:rotate(0);-o-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0)}1%{-webkit-transform:rotate(28deg);-moz-transform:rotate(28deg);-o-transform:rotate(28deg);-ms-transform:rotate(28deg);transform:rotate(28deg)}3%{-webkit-transform:rotate(-24deg);-moz-transform:rotate(-24deg);-o-transform:rotate(-24deg);-ms-transform:rotate(-24deg);transform:rotate(-24deg)}5%{-webkit-transform:rotate(30deg);-moz-transform:rotate(30deg);-o-transform:rotate(30deg);-ms-transform:rotate(30deg);transform:rotate(30deg)}7%{-webkit-transform:rotate(-28deg);-moz-transform:rotate(-28deg);-o-transform:rotate(-28deg);-ms-transform:rotate(-28deg);transform:rotate(-28deg)}9%{-webkit-transform:rotate(26deg);-moz-transform:rotate(26deg);-o-transform:rotate(26deg);-ms-transform:rotate(26deg);transform:rotate(26deg)}11%{-webkit-transform:rotate(-24deg);-moz-transform:rotate(-24deg);-o-transform:rotate(-24deg);-ms-transform:rotate(-24deg);transform:rotate(-24deg)}13%{-webkit-transform:rotate(22deg);-moz-transform:rotate(22deg);-o-transform:rotate(22deg);-ms-transform:rotate(22deg);transform:rotate(22deg)}15%{-webkit-transform:rotate(-20deg);-moz-transform:rotate(-20deg);-o-transform:rotate(-20deg);-ms-transform:rotate(-20deg);transform:rotate(-20deg)}17%{-webkit-transform:rotate(22deg);-moz-transform:rotate(22deg);-o-transform:rotate(22deg);-ms-transform:rotate(22deg);transform:rotate(22deg)}19%{-webkit-transform:rotate(-20deg);-moz-transform:rotate(-20deg);-o-transform:rotate(-20deg);-ms-transform:rotate(-20deg);transform:rotate(-20deg)}21%{-webkit-transform:rotate(18deg);-moz-transform:rotate(18deg);-o-transform:rotate(18deg);-ms-transform:rotate(18deg);transform:rotate(18deg)}23%{-webkit-transform:rotate(-16deg);-moz-transform:rotate(-16deg);-o-transform:rotate(-16deg);-ms-transform:rotate(-16deg);transform:rotate(-16deg)}25%{-webkit-transform:rotate(14deg);-moz-transform:rotate(14deg);-o-transform:rotate(14deg);-ms-transform:rotate(14deg);transform:rotate(14deg)}27%{-webkit-transform:rotate(-12deg);-moz-transform:rotate(-12deg);-o-transform:rotate(-12deg);-ms-transform:rotate(-12deg);transform:rotate(-12deg)}29%{-webkit-transform:rotate(10deg);-moz-transform:rotate(10deg);-o-transform:rotate(10deg);-ms-transform:rotate(10deg);transform:rotate(10deg)}31%{-webkit-transform:rotate(-8deg);-moz-transform:rotate(-8deg);-o-transform:rotate(-8deg);-ms-transform:rotate(-8deg);transform:rotate(-8deg)}33%{-webkit-transform:rotate(6deg);-moz-transform:rotate(6deg);-o-transform:rotate(6deg);-ms-transform:rotate(6deg);transform:rotate(6deg)}35%{-webkit-transform:rotate(-4deg);-moz-transform:rotate(-4deg);-o-transform:rotate(-4deg);-ms-transform:rotate(-4deg);transform:rotate(-4deg)}37%{-webkit-transform:rotate(2deg);-moz-transform:rotate(2deg);-o-transform:rotate(2deg);-ms-transform:rotate(2deg);transform:rotate(2deg)}39%{-webkit-transform:rotate(-1deg);-moz-transform:rotate(-1deg);-o-transform:rotate(-1deg);-ms-transform:rotate(-1deg);transform:rotate(-1deg)}41%{-webkit-transform:rotate(1deg);-moz-transform:rotate(1deg);-o-transform:rotate(1deg);-ms-transform:rotate(1deg);transform:rotate(1deg)}43%{-webkit-transform:rotate(0);-moz-transform:rotate(0);-o-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(0);-moz-transform:rotate(0);-o-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0)}}
2- اضافة اكواد javascript ابحث بداخل القالب عن هذا الوسم
تعليقات
إرسال تعليق