Blogger Announcement widget with Fadeout Effects

Blogger Announcement widget with Fadeout Effects

6
data:blog.title
notification widget

Blogger often need Announcement about some latest news or if they want to update their template then they should announce that they are upgrading the templates or blog thus their visitors can easily understand about the blog status. Similarly we can give news about our latest Alexa rank, Google Page rank or coming update of Google Panda or Penguin update by using announcement widget. So I have designed this widget for announcing about your latest of upcoming events news. You don’t have to use any extra space for this widget. Because if will appear when someone visit your site and after 15 second it will disappear with fade out effects. This is really awesome and hope you would like it. And I have used pure CSS coding that won’t affect your template loading time.


Live Demo


Step 1 Log in to your Blogger account and Go to your Blogger Dashboard

Step 2 Go to your Layout tab.

Step 3 Click on "Add a Gadget" then select "HTML/JavaScript" Gadget.

Step 4 Now Copy the below code and paste it in "HTML/JavaScript" Gadget and Save it.


<style>
#BloggerSpice {
right: 10px;
top: 10px;
width: 320px;
height: auto;
overflow: hidden;
background: rgba(27,155,255,4); /* www.bloggerspice.com */
border-radius: 10px;
border: 10px solid #111111;
z-index: 999999;
position: fixed; /*  www.bloggerspice.com */
-webkit-animation: fadeOutnotif 15s linear forwards; /* www.bloggerspice.com */
-moz-animation: fadeOutnotif 15s linear forwards;
-o-animation: fadeOutnotif 15s linear forwards;
-ms-animation: fadeOutnotif 15s linear forwards;
animation: fadeOutnotif 15s linear forwards;
}
#BloggerSpice a {
display:block;
text-decoration:none;}
#BloggerSpice span {
display: block;
padding: 15px 15px;
pointer-events: none;
text-align: left;
float: left;
}
#BloggerSpice span h2 {
font-size: 20px; /* www.bloggerspice.com */
line-height: 21px;
color: #fff; /* www.bloggerspice.com*/
font-weight: normal;
letter-spacing: 0px;
}
/*widget by  www.bloggerspice.com   */
@-webkit-keyframes fadeOutnotif {
0% { opacity: 1;}
10% { opacity: 1;}
90% { opacity: 1; -webkit-transform: translateY(0px);}
99% { opacity: 0; -webkit-transform: translateY(-30px);}
100% { opacity: 0;}
}
@-moz-keyframes fadeOutnotif {
0% { opacity: 1;}
10% { opacity: 1;}
90% { opacity: 1; -moz-transform: translateY(0px);}
99% { opacity: 0; -moz-transform: translateY(-30px);}
100% { opacity: 0;}
}
@-o-keyframes fadeOutnotif {
0% { opacity: 1;}
10% { opacity: 1;}
90% { opacity: 1; -moz-transform: translateY(0px);}
99% { opacity: 0; -moz-transform: translateY(-30px);}
100% { opacity: 0;}
}
@-ms-keyframes fadeOutnotif {
0% { opacity: 1;}
10% { opacity: 1;}
90% { opacity: 1; -moz-transform: translateY(0px);}
99% { opacity: 0; -moz-transform: translateY(-30px);}
100% { opacity: 0;}
}
@keyframes fadeOutnotif {
0% { opacity: 1;}
10% { opacity: 1;}
90% { opacity: 1; -moz-transform: translateY(0px);}
99% { opacity: 0; -moz-transform: translateY(-30px);}
100% { opacity: 0;}
}
</style>
<div id='BloggerSpice'>
<span>
<center><h2><b><|| Announcement ||></b></h2></center>
<div style="text-align: justify;"><span style='color: #FEF2BF;'>Any modification or reproduce of any content without Author's Permission consider as copyright violator and Penalize by DMCA.</span></div>
</span>
</div>

Customization

  • Change right: with left to appear it on left side.
  • Alter red marked line with your own announcement.
Blogger Announcement widget with Fadeout Effects
4 Stars stars - "Blogger Announcement widget with Fadeout Effects" Blogger often need Announcement about some latest news or if they want to update their templat...

Awesome widget ! how to add links?

thanks bro its simple. Just add code like below in HTML mode---

Link Name

thanks for share bro..comeback

hi I want increase text size what should I do?

Very nice widget but link is not clickable. How do we resolve that?

Hi Sooloaded,
This is just an announcement widget. You can see the Live demo. For adding URL you can use URL like below in widget message section

<a href="http://www.bloggerspice.com/"</a>

Facebook Group Community Disqus Channel Code ConverterHide Code Converter Show EmoticonHide Emoticon

Got questions? Ask ’em below! While we’re here, you might like to give any feedback about this Post, Your comment inspire us to continuous Improvement of This Blog and Contents. Your words are your own, so be nice and helpful if you can. Please, only use your REAL NAME, not your business name or keywords. Using business name or keywords instead of your real name will lead to the comment being deleted. Anonymous commenting is not allowed either. Limit the amount of links submitted in your comment. We accept clean XHTML in comments, but don't overdo it please.

Make sure you tick the Notify Me box below the comment form to be notified of follow up comments and replies. Thank you for commenting

Contact Form

Name

Email *

Message *