Create An Announcement Widget for Blogger

Introduction

Let us just say that you want to inform your visitors on some important announcements or even give a reminders for your visitors about a certain events or happening on your blog. There are many ways that you can make an announcement, either you will use the "HTML/Javascript Gadget" (one of the feature of blogger) and write down your announcement and place it anywhere you want in your blog.

But if you want a more fancy Announcement then this tutorial is what your looking for.

Announcement Widget Preview

This is the other way of making a nice fancy announcement widget for your blog.

Screenshot and Live Demo: (Click here to view)

Live Demo: Click Here

Installation

5 Steps that you need to follow:

1. Go to blogger "Dashboard"
2. Select "Layout"
3. Click "Add gadget"
4. Select "Javascript/HTML widget"

Paste this code:

<style>
#vbloggertemp {
right: 10px;
top: 10px;
width: 300px;
height: auto;
overflow: hidden;
background: #00b0b8;
border-radius: 10px;
border: 5px solid #111111;
z-index: 999999;
position: fixed;
-webkit-animation: fadeOutnotif 15s linear forwards;
-moz-animation: fadeOutnotif 15s linear forwards;
-o-animation: fadeOutnotif 15s linear forwards;
-ms-animation: fadeOutnotif 15s linear forwards;
animation: fadeOutnotif 15s linear forwards;
}
#vbloggertemp a {
display:block;
text-decoration:none;}
#vbloggertemp span {
display: block;
padding: 15px 15px;
pointer-events: none;
text-align: left;
float: left;
}
#vbloggertemp span h2 {
font-size: 20px;
line-height: 21px;
color: #fff;
font-weight: normal;
letter-spacing: 0px;
}
@-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='vbloggertemp'>
<span>
<center><h2><b>< Announcement ></b></h2></center>
<div style="text-align: justify;"><span style='color: #FEF2BF;'>This is an Announcement widget: http://livewirez.blogspot.com
</span></div>
</span>
</div>

Configuration:

Title:

<center><h2><b>< Announcement ></b></h2></center>

- Change < Announcement > in any title you want.

Body Text:

This is an Announcement widget: http://livewirez.blogspot.com

- Change this portion of your own Announcement

5. Now Place the widget anywhere in your sidebar.

That's it. Go to your blog homepage and see your announcement widget.