Add Sticky/Floating Notification Bar to Blogger

Sticky Notification bars are one way of making your users know about spicy posts in your blog. And thus increase your page views.

So here is one stylish notification bar for you, which can be added to blogger & other websites easily. It features a stylish and simple design.  See the feature listed below.
★ Simple and stylish design
★ Easy to implement
★ Adaptive
★ Customizable
★Hide and Unhide Option

SEE A LIVE DEMO OF THE WIDGET

Adding the Sticky Bar to Blogger

✔ Navigate to Blogger.com> Dashboard > Template > Edit HTML
✔ Now search for </head> and paste the below code just above it.

<style>
#bloggernotificationWrap {
display: none;

height: 71px;
margin-top: 9px;
position: relative;
width: 100%;
z-index: 999999;
}
.button {
display: inline-block;
padding: 5px 10px;
border: 3px solid #3498db;
color: #ddd;
text-decoration: none;
font-weight: bold;
text-transform: uppercase;
margin: 5px 5px 0 10px;
transition: all .2s;
}
.button:hover {
background: #3498db;
color: #fff;
}
#notification-bar {
position:fixed; display:block; z-index: 100000;

}
.notification-bar {
position: absolute;
width: 100%;
top: 0px;
}
.notification-text {
background-color: #2980B9;
padding: 15px;
color: #fff;
font-size: 14px;
text-align: center;
position: absolute;
width: 100%;

    -webkit-animation: initiate 350ms ease;
    -moz-animation: initiate 350ms ease;
    -o-animation: initiate 350ms ease;
animation: initiate 350ms ease;
}
.notification-bar input {
display: none;
}
.notification-bar label {
cursor: pointer;
color: #fff;
position: absolute;
z-index: 5;
display: inline-block;

text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
.notification-bar label[for=hide] {
right: 15px;
top: 15px;

width: 38px;
height: 38px;
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTgqjNbGIBrIa0xlhOVR8lVrdaNq-vzDgx1jozc0uXhbxWd2sVwJgPWYC6xKRSTu24VpjChqw-u8kuHfzEATWhw9Min1hGSm4-_YxHusQ8hiMcoxN8fCx9QYyLvWBK3-_cSO1YdexS8ho/s1600/arrow_down_alt1-32.png') no-repeat center center;

    -webkit-animation: initiate 350ms ease;
    -moz-animation: initiate 350ms ease;
    -o-animation: initiate 350ms ease;
animation: initiate 350ms ease;
}
.notification-bar label[for=show] {
width: 45px;
height: 50px;
border-radius: 0px 0px 3px 3px;
right: 10px;
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgndcfum-ecccONY4E7xdfTRePwzrVufzg4-V_5bnc3bF2nXKly8Dry_hoLPyRaS3xU0UZx9XCt9vB3ZM3jVQei_Ra2p_jYfW4qScmjX8w2a1MPr0yzxcQvFMpMu2-y03BiEf87cljlTEQ/s1600/arrow_up_alt1-32.png') no-repeat center center #2980B9;
}
/* Function */
.notification-bar input[value=show]:checked ~ label[for=show],
.notification-bar input[value=hide]:checked ~ label[for=hide],
.notification-bar input[value=hide]:checked ~ .notification-text {
    -webkit-transition: ease 350ms;
    -moz-transition: ease 350ms;
    -o-transition: ease 350ms;
transition: ease 350ms;
    -webkit-transform: translateY(-100%);
    -moz-transform: translateY(-100%);
    -o-transform: translateY(-100%);
transform: translateY(-100%);
}
.notification-bar input[value=hide]:checked ~ label[for=show],
.notification-bar input[value=show]:checked ~ label[for=hide],
.notification-bar input[value=show]:checked ~ .notification-text {
    -webkit-transition: ease 350ms;
    -moz-transition: ease 350ms;
    -o-transition: ease 350ms;
transition: ease 350ms;
    -webkit-transform: translateY(0%);
    -moz-transform: translateY(0%);
    -o-transform: translateY(0%);
transform: translateY(0%);
}
/* Inital Animation */
@-webkit-keyframes initiate {
0% {
     -webkit-transform:translateY(-100%);
}
50% {
-webkit-transform:translateY(-50%);
}
100% {
-webkit-transform:translateY(0%);
}
}
@-moz-keyframes initiate {
0% {
     -moz-transform:translateY(-100%);
}
50% {
-moz-transform:translateY(-50%);
}
100% {
-moz-transform:translateY(0%);
}
}
@-o-keyframes initiate {
0% {
     -o-transform:translateY(-100%);
}
50% {
-o-transform:translateY(-50%);
}
100% {
-o-transform:translateY(0%);
}
}
@keyframes initiate {
0% {
transform:translateY(-100%);
}
50% {
transform:translateY(-50%);
}
100% {
transform:translateY(0%);
}
}
</style>

 ✔ Now search for <body> and paste the below code just after it.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class='openbloggernotification' id='bloggernotificationWrap' style='display: block; margin-top: 0px;'>
<div class='notification-bar' id='notification-bar'>
<input id='hide' name='bar' type='radio' value='hide'/>
<input checked='checked' id='show' name='bar' type='radio' value='show'/>
<label for='hide'>hide</label>
<label for='show'>show</label>
<div class='notification-text'><a href="http://www.bloggslab.com/"><img align='left' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzM9yHsmpGVJHMtzw2BvlA_L8RAPWgmuHOkeqaVJEI1uT_mPCZdNbvMuIFIrsmNXMBCscTEdYM5_j49zfGhxj6_bBaNPXIPW6DVLF7FgVsV-fMNc13GwrzJL_RqgfEEd8VbGKGQr2FmzM/h120/digital-00logo.png"/></a><b>Best List of Blogger Templates</b><a class='button' href='http://www.bloggslab.com/2014/03/best-of-blogger-templates.html'>click here</a></div></div>
</div>