Breaking News
Loading...

Fadeout Effects "Announcement" Widget For Bloggers

Friday, December 27, 2013
 

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. I have designed this widget for announcing about your latest or 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.


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>
#uncoverred {
left: 10px;
top: 10px;
width: 320px;
height: auto;
overflow: hidden;
background: rgba(27,155,255,4); /* www.uncoverred.blogspot.com */
border-radius: 10px;
border: 10px solid #111111;
z-index: 999999;
position: fixed; /*  www.uncoverred.blogspot.com */
-webkit-animation: fadeOutnotif 15s linear forwards; /* www.uncoverred.blogspot.com */
-moz-animation: fadeOutnotif 15s linear forwards;
-o-animation: fadeOutnotif 15s linear forwards;
-ms-animation: fadeOutnotif 15s linear forwards;
animation: fadeOutnotif 15s linear forwards;
}
#uncoverred a {
display:block;
text-decoration:none;}
#uncoverred span {
display: block;
padding: 15px 15px;
pointer-events: none;
text-align: left;
float: left;
}
#uncoverred span h2 {
font-size: 20px; /* www.uncoverred.blogspot.com */
line-height: 21px;
font-weight: normal;
letter-spacing: 0px;
}
/*widget by  www.uncoverred.blogspot.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='uncoverred'>
<span>
<center><h2><b><|| Announcement ||></b></h2></center>
<div style="text-align: justify;"><span style='color: #FEF2BF;'>Uncoverred is currently changing template!  </span></div>
</span>
</div>
Customization
  • Change right: with left to appear it on left side.
  • Alter red marked line with your own announcement.

0 comments:

Post a Comment

 
Toggle Footer