Create An Announcement Widget for Blogger

Friday, October 17, 20140 comments

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.




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.

Share this article :

Post a Comment

 
Copyright © 2015. Storyahi - All Rights Reserved