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

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

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

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

• معاينة

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

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>

التغيرات الأساسية

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

By glok

Similiar tagsاضافات بلوجرصناديق التنبيه