There are times when as a author you need to communicate with every single reader that visits with your blog.There is no social site which guarantees this to you.So the only method left is to cleverly place your notification in your web design.There is no better way then to make it float and then make it closable so as to disturb the readers comfort.As the title read we are going to add a CSS notification bar with hide/show effect.No use of Java as been made in this coding making it soley dependent on CSS
How to add this to blogger
- Log into to blogger
- Navigate to Template > Edit template > Proceed
- Search for ]]></b:skin>
- Paste this code below it
.notification-bar { position: fixed; width: 100%; z-index:1;} .notification-text { background-color: #2980B9; padding: 15px; color: #fff; font-size: 14px; text-align: center; position: absolute; width: 100%; } .notification-bar input { display: none; } .notification-bar label { cursor: pointer; color: #fff; position: absolute; z-index: 5; display: inline-block; text-indent: 100%; whitewhite-space: nowrap; overflow: hidden; } .notification-bar label[for=hide] { right: 15px; top: 11px; width: 24px; height: 24px; background: url('http://goo.gl/hYCoz') no-repeat center center; } .help-2539 a {display: block;height: 12px;width: 12px;background: #014159;border: 1px solid black;color: white;line-height: 1em;text-align: center;font-weight: bold;filter: alpha(opacity=60);opacity: 0.6;font-size: 12px;position: fixed;top: 16px;left: 13px; z-index:1;}.notification-bar label[for=show] { width: 45px; height: 50px; border-radius: 0px 0px 3px 3px; right: 10px; background: url('http://goo.gl/zfxf7') no-repeat center center #2980B9; } .notification-bar input[value=show]:checked ~ label[for=show] { -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=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] { -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%); } .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%); } @keyframes initiate { 0% { transform:translateY(-100%); } 50% { transform:translateY(-50%); } 100% { transform:translateY(0%); } } .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;}
- Paste the code after <body>
<div class='notification-bar'> <div class='help-2539'><a href='http://www.yourpcgenie.net/2013/07/add-hide-show-notification-bar-with-css.html' target='_blank'>?</a></div> <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'>Hello World, you can hide this notification by clicking the close button.</div></div>
Edit the text highlighted in blue
Save your template and you should be good to go
If you have any problems using this notification bar do comment below and let us know.For those who enjoyed this , kindly leave your words of appreciation.Happy Blogging :)
EmoticonEmoticon