إضافة جرس الإشعار بتأثير رائع

إضافة جرس الإشعار بتأثير رائع

يوجد الآن مشاهدة التعليقات : 12

الموضوع

اقرأ ايضًا

التعليقات

عن الكاتب

تعليمات

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

تدوينة مشابهة : إضافة صندوق الإشعارات و التنبيهات

لمن يريد إضافة نبهني شكراً فليلقي نظرة عليها أولا:

الآن إذا أحببت إضافة نبهني شكراً فتابع الخطوات التالية لتركيب
شرح طريقة التركيب

1. ضع فوق </head> الكود التالي
<style>
.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: &quot;progid:DXImageTransform.Microsoft.Alpha(Opacity=0)&quot;; 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: .9em; text-align: center;}
.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:#547b9b;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:&quot;progid:DXImageTransform.Microsoft.Alpha(Opacity=0)&quot;;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: &#39;Droid Arabic Naskh&#39;,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:&quot;progid:DXImageTransform.Microsoft.Alpha(Opacity=0)&quot;;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:&quot;&quot;;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)}}
</style>
2. ضع فوق </body> الكود التالي
<script type="text/javascript">
//<![CDATA[
var notifPopFlag=0
function cookACookie(name,value,days){if(days){var date=new Date();date.setTime(date.getTime()+(days*24*60*60*1000));var expires="; expires="+date.toGMTString();}
else var expires="";document.cookie=name+"="+value+expires+"; path=/";}
function eatACookie(name){var nameEQ=name+"=";var ca=document.cookie.split(';');for(var i=0;i<ca.length;i++){var c=ca[i];while(c.charAt(0)==' ')c=c.substring(1,c.length);if(c.indexOf(nameEQ)==0)return c.substring(nameEQ.length,c.length);}
return null;}
function throwACookie(name){cookACookie(name,"",-1);}
runYourFunctionWhenJQueryIsLoadedPart2()
if(eatACookie("notifPop")==null){notifPopFlag=1}
function runYourFunctionWhenJQueryIsLoadedPart2(){if(window.jQuery){jQuery(document).ready(function(){if(notifPopFlag){setTimeout(function(){jQuery('.web-notif').addClass('show-once')
setTimeout(function(){jQuery('.web-notif').removeClass('show-once')},3000)},1000)
cookACookie("notifPop","notifPopRing",1);}
jQuery('.notif-widg-link').click(function(){jQuery(this).find('.notif-bell-ring').removeClass('notif-bell-ring')
cookACookie("notifPop","notifPopRing",30);})})}
else{setTimeout(runYourFunctionWhenJQueryIsLoadedPart2,50);}}
//]]>
</script>
3. قم بحفظ العمل
4. توجه إلى التخطيط وأضف أداة Html/JavaScript ثم ضع بها الكود التالي
<div class="web-notif" id="web-notif">

     <a href="http://www.ar1web.com" class="notif-widg-link" target="_blank">
      <div class="notif-widg-wrap">
       <img src="data:image/png;base64,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" alt="Notification Bell" class="notif-widg-bell notif-bell-ring" pagespeed_url_hash="1661527935" onload="pagespeed.CriticalImages.checkImageForCriticality(this);" />
       <div class="notif-widg-now">!أحصل عليها</div>
      </div>
     </a>
  <aside class="notif-popup" id="sample-notif">
   <a href="http://www.ar1web.com" class="notif-pop-link" target="_blank">
    <div class="notif-container">
     <div class="notif-img-wrap">
      <img src="http://i.imgur.com/hXoGfX7.png" class="notif-img" alt="Notification Image" pagespeed_url_hash="2039515906" onload="pagespeed.CriticalImages.checkImageForCriticality(this);" />     </div>
     <div class="notif-text-wrap">
      <div class="notif-content-title">
      إضافة نبهني شكراً     </div>
      <div class="notif-content-description">
       "تركيب منبه بتأثير جميل لموقعك "   </div>
      <div class="notify-url">حصري</div>
     </div>
    </div>
   </a>
  </aside>
  <aside class="notif-sign" id="sample-notif">
   <strong class="ns-text">
  !لا تفوت هذه التدوينة المميزة 
    <br />إكسب مال بواسطة دعوة الأصدقاء عبر رابط الأفليت
   </strong>
  </aside>
    </div>
التغيرات الأساسية

* الكلمات محددة بالأحمر
* الروابط محددة بآلبرتقالي
* صورة الموضوع محددة بالأخضر
ملحوظة:

يسعدنا تفاعلكم بالتعليق، لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق
1أن يكون التعليق خاص بمحتوى التدوينة
2أن لا تضع أي روابط خارجية
3لإضافة كود حوله أولاً بمحول الأكواد
4أي سؤال خارج محتوى التدوينة يرجى استخدام ركن الأسئلة
5😊😉😀😁😎😍😜😑😇💖😯😱😭👍❓🍻

هناك 12 تعليقًا:

  1. غير معرف12/09/2015

    اخى ارجوك ساعدنى

    ردحذف
    الردود
    1. أعتذر منك أخي لكنني لا ألبي طلبات القوالب الغير متوفرة

      حذف
    2. غير معرف12/10/2015

      اوكى شكرا اخى اشكرك ع ردك

      حذف
  2. ra2i3 tbarklah 3lik

    ردحذف
  3. اخي اريد الاضافة فوق ليس اسفل

    ردحذف
    الردود
    1. من داخل القالب ضع في محرك البحث هذا: .web-notif سيوجهك لأول كود ستجد بسطره : bottom: 90px; غير 90 لـ 500 كلما زدت الرقم صعدت لفوق

      حذف
  4. اخي انا شخصيا استعمل قالب رسالتي لم تنجح فيه الاضافة رغم ااني قمت بكل الخطوات لكنها ضهرت في تفس اضافة HTML/JAVASCRIPT المرجو الرد واسف على الازعاج اخي ♥

    ردحذف
    الردود
    1. ألم تظهر بتاتا أم ماذا؟ لأني لم أفهم قصدك : لكنها ضهرت في تفس اضافة HTML/JAVASCRIPT

      حذف
  5. اخى ممكن طلب كيف اكبر حجم الخط انه صغير جدا

    ردحذف

عن الكاتب :

إرشادات

    تحميل الملفات

    نستخدم بمدونتنا مواقع مختلفة في رفع الملفات ونوفر منها إثنان:
  • موقع : Mediafire
  • موقع :file-upload
  • باسوورد فك الضغط للملفات المضغوطة : Ar1web2014
  • تجدون روابط التحميل في القوالب والملحقات بجانب التدوينة أي بالسيدبار
  • كل ملحق أو قالب يوجد بالمدونة هو للإستعمال الشخصي فقط
  • إن تواجد رابط معطوب فالمرجو التبليغ عنه هنا، شكرا.
  • أين تجدنا؟

    بعيدا عن الصفحات المزورة أو المزيفة التي يحاول البعض من خلالها استغلال جهود فريق عمل عرب ويب، هذه هي حساباتنا وصفحاتنا الرسمية في الشبكات الاجتماعية، لا نمتلك سوى هذه الصفحات والحسابات وهي الوحيدة التي تتبع للمدونة : https://www.instagram.com/ar1web

    كلمة الختام

    في مدونة عرب ويب نسعى دوما جاهدين للتحسن والتقدم وليس ما تراه هو حدودنا! ونحن نقدر كثيرا زوارنا وآراؤهم فإن كان لديك أي اقتراح/نصيحة/ومضة مفيدة/نقد بناء أو ما إلى ذلك يمكنك مشاركتنا كل ما في جعبتك من خلال الإتصال بنا : istoretech3@gmail.com
أخر تعديل كان في يوم السبت 20 يونيو من سنة 2020 ، هذه الصفحة قابلة للتعديل وقت اللزوم