How to add a stylish Notification bell with amazing hover effect in your blogspot blog - As far as I know Every blogger wants a to display their recommended article with the help of some notification bar. But today I have something new for you guy's, Today with the help of this post I'm going to share with you a stylish mouse hove notification bell widget for your dashing blog. This notification bell is more attractive comparing to other notification bar or widget.
For those who wants to try this widget, make sure to take a look of this widget by clicking on the below demo button( View as "Desktop View" in mobile device).
Now if you like this notification bell and want to install in your own blog, then simply follow the below steps.
How to install notification bell?
At the first, Login to your blogger dashboard - Login
Go to the template section and then click on the Edit Html button.
In the template editor add the below CSS code just after <head>
<link rel="stylesheet" type="text/css" href="https://googledrive.com/host/0BxB51PrIeBaiTmtfdG5NbmludkE" />Add the below code just before </body>
<script>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>
Now click on the Orange save template button.
After that, go to the "Layout" section, click on "Add a widget" and then select the Html/JavaScript.
Add the below HTML code in Html/JavaScript box.
<div class="web-notif" id="web-notif">
<a href="http://www.askwithloud.com/2015/12/add-stylish-notification-bell-with-cool.html" 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">GET IT NOW</div>
</div>
</a>
<aside class="notif-popup" id="sample-notif">
<a href="http://www.YOUR URL HERE.html" class="notif-pop-link" target="_blank">
<div class="notif-container">
<div class="notif-img-wrap">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibup1onHvfFf5gRvGWZih3SVSEYi_gvvgUdGq3ba4VRZ0JKOFFNWFogyP8Iu92WyqlI3mNl7qigDdQjB3O-V2XyNznyyPgRKLzr6i47EIQBAYYAWxlRq2hV7GHqZLsJyurPWou6t_WElk/s1600/apple-touch-icon.png" class="notif-img" alt="Notification Image" pagespeed_url_hash="2039515906" onload="pagespeed.CriticalImages.checkImageForCriticality(this);"> </div>
<span class="notif-close">x</span>
<div class="notif-text-wrap">
<div class="notif-content-title">
Askwithloud: Get Latest Widgets! </div>
<div class="notif-content-description">
Add Stylish Notification Bell With Cool Effect In Blog! </div>
<div class="notify-url">Latest Article!</div>
</div>
</div>
</a>
</aside>
<aside class="notif-sign" id="sample-notif">
<strong class="ns-text">
DON'T MISS THIS AWESOME DEALS!
<br>EARN INSTANT PAYPAL MONEY BY JUST REFERRING YOUR FRIENDS!
</strong>
</aside>
</div>Click on the Save button to apply these changes.
Replace the highlighted text and URL with your own.
Note- Please don't remove the URL of our page. if you do that, then you are against our blog:(
0 Comment to "Add Stylish Notification Bell With Cool Effect In Blog"
Post a Comment