Notification bar widget is one of the most popular blogger widgets. It also helps in boosting your blog�s traffic by increasing the number of page views of your blog. In this post we will discuss a new and amazing Announcement sticky notification bar for blogger blogs with a stylish moving text effect. It uses HTML marquee tag for creating text animation. You can easily customize this notification bar according to your blog�s color scheme.
Note: In the following code replace red colored code with your post titles and remove # symbols with links to these posts.
Adding this notification bar to blogger:
- Login to your blogger dashboard and select your blog.
- Select Layout option and select Add a gadget option.
- Select HTML/JavaScript widget from the list.
- In the HTML/JavaScript widget paste following code and save it.
- Preview your blog to see the new changes.
Note: In the following code replace red colored code with your post titles and remove # symbols with links to these posts.
Code:
<style>
#wcnot-cont
{
top:0px;
left:0px;
z-index:9999999;
position:fixed;
width:100%;
background:#222222;
color:#ffffff;
font:16px georgia;
box-shadow:2px 2px 5px #444444;
-moz-box-shadow:2px 2px 5px #444444;
-web-kit-box-shadow:2px 2px 5px #444444;
-goog-ms-box-shadow:2px 2px 5px #444444;
}
#wc-movtext
{
text-align:center;
padding:8px;
font-family: Verdana,"Times New Roman",Georgia,Serif;
font-size:12px;
color: #ffffff;
}
#wc-movtext a
{
color:#ffffff;
text-decoration:none;
font:16px georgia;
}
#wc-movtext a:hover
{
color:yellow;
text-decoration:none;
}
</style>
<div id='wcnot-cont'>
<div id="wc-movtext">
<marquee behavior='alternate' direction="left"
onmouseover="this.stop();"
onmouseout="this.start();">
<p>
<a href='#'>All In One SEO Pack 2015 For Blogger Users,Blogspot Plugin</a>
| <a href='#'> Basic Essential Beginner's Rapid Guide To SEO</a>
| <a href='#'>Add Four Stylish Css SearchBoxes To Blogger Blogs </a>
</p>
</marquee>
</div>
<div>
Leave A Comment:
0 comments: