How to add Pure CSS Sticky Notification Bar for Blogger/Website

Sticky Notification bar awesome feature for your own blog and get more traffic. This Notification bar based on Pure CSS coding. It's very easy to add your own blog and your website.

Pure CSS Sticky Notification Bar

[ Demo | Source Code ]

It's another feature for your blog. Most of blog provide Notification bar using with Jquery and css but this Bar only use CSS code so it's gives a very fast loading response.Some features are given below , I hope you like this Sticky Notification Bar.

Benefits, Features and Options:

1. Quick & easy setup
2. Custom message and call to action button
3. Sticky Notification Bar
4. Choose any color to match your site
5. Increase More Traffic
6. Adds a cool sticky bar to your web page which only shows when the user scrolls.
7. Show and hide your bar on one click with using of Up and Down Arrow.

How to add CSS Sticky Notification Bar for Blogger :

• Go To Blogger Dashboard >Template >Edit HTML.
• Now Search the following code: </head>
• copy and paste the below code , before </head> tag 

CSS Code :

<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/AVvXsEgpmANeO8mlNhbkp1qsMvwqhioAZ_plbMtNH6-NFcbFiLmVFzYFAozYZGnOYPOLo2jBuh6GRQcWaI-CVE91D2r-IWGc01_9VPL9nh0VxDPM552YwVrZXeQ9Dop08eEcqz8l2cz7Xv_SDRU/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/AVvXsEizGoQCquOTdlytlYO18y1HEoFnacLxP8NGZg1oMcs17zNbqP63dxUFh8osbPEZO1LwXcWFdZf-CE8NanRogrNR5nBwbPXPzaydqIyu9sLaFr2ST9e5AfySRSF3OFAWZmWzUUj2WRLd2E8/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>

• After adding css code and now search for <body> tag.
• Add below html code after <body> tag.

HTML CODE:

<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.digitalhubinc.com/"><img align='left' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJR1-Lipz2arSJYgURrvYKx4SxtFfUo_OSZwgxOLphp7jlPrOSWNco-cHi8-TgoT2wMRd8YkopnzqwlnCARxxzvLv1Kzj6uA3tTEV6W4vyfJDyrCI63G1ZeOTUi6cky2VxCjDkM-6-gy8/h120/digital-00logo.png"/></a><b>So you want to Start A Blog : All Blogging Tips 101</b><a class='button' href='http://www.digitalhubinc.com/2014/02/All-Blogging-Tips-101.html'>click here</a></div></div>
  </div>

• Save and Exit.

All work Done.

Check your Website or blog.

How to customize Notification Bar Code :

• Fisrt you want to change the Notification Message then go <div class='notification-text'> section and put your message between <b>...</b> Tags.

<div class='notification-text'><b>message or title</b><a class='button' href='#place-link'>click here</a></div>

• After change above message, if you want to change #bloggernotificationWrap id code   height: 71px;  margin-top: 9px; according to your blog. Generally most of blogger template no need to add this codes.
• If you're already use latest jquery.min.js then no need to add below js code in your blog - 

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

I hope you like this Sticky Notification Bar and also add in your Blog.

Please share this widget your friends and other bloggers.

Drop your valuable comments below disqus comment system.

Note : If you want to Share this Post in your blog, please proper backlink given to Digital Hub Inc. blog.