Have you been creating posts to notify all unimportant things about your blog ?
Yes, I have seen many people doing so. Creating single paragraph posts, making the blog look unimpressive.
Notification bar is one of the widely used technique to overcome this situation. The major advantage of notification bar is the space saved. Moreover, being placed above the header, it grabs everyone's attention.
Simple notification widget is sticky, it sticks to the top of the screen, when the user scrolls down/up. The notification bar has a close button, when a visitor clicks the close button, it become stored in the cookie and will not show the notification bar to him for the next 15 days.
1. Using Ctrl+F, search for ]]></b:skin> and paste the below code above it.
2. Using Ctrl+F, search for </head> and paste the below code above it.
2. When you publish a new notice, make sure to replace bgnotice1 with a new value, so that it won't remain hidden for those who closed the previous notification.
So, the wait is over... Now, open your blog in a new tab and see the blistering new notification bar. Also, feel free to comment, if anything went wrong.
Yes, I have seen many people doing so. Creating single paragraph posts, making the blog look unimpressive.
Notification bar is one of the widely used technique to overcome this situation. The major advantage of notification bar is the space saved. Moreover, being placed above the header, it grabs everyone's attention.
Simple notification widget is sticky, it sticks to the top of the screen, when the user scrolls down/up. The notification bar has a close button, when a visitor clicks the close button, it become stored in the cookie and will not show the notification bar to him for the next 15 days.
Adding the Simple Notification Widget
1. Using Ctrl+F, search for ]]></b:skin> and paste the below code above it.
#notification-bar {
position: fixed;
top: 0;
left: 0;
z-index: 9999;
width: 90%;
padding: 10px 5% 0;
background: #d7e9f3;
border-bottom: 1px solid #86b2c9;
}
#notification-bar {
display: none;
}
#notification-bar h3 {
font-weight: bold;
clear:none!important;
margin: 0;
padding: 0;
color: #222;
}
#notification-bar p {
margin: 0 0 10px;
color: #222;
}
#notification-bar a {
color: #999;
}
#remove-notbar {
display: block;
float: right;
margin: 10px 0 0 10px;
border: 1px solid #86b2c9;
padding: 1px 6px;
color: #333;
text-decoration: none;
}
#remove-notbar:hover {
text-decoration: none;
background: #86b2c9;
color: #fff;
}
2. Using Ctrl+F, search for </head> and paste the below code above it.
<script type='text/javascript' src='https://blogger-garage.googlecode.com/svn/jquery.cookie.js'></script>3. Using Ctrl+F search for <body> and add the following code below it.
<script type='text/javascript'>
jQuery(document).ready(function ($) {
if ($("#notification-bar").length) {
if (!$.cookie('bgnotice1')) {
$('#notification-bar').show();
}
}
$(".remove-notbar").click(function () {
$.cookie('bgnotice1', 'yes', {
expires: 15
});
$('#notification-bar').fadeOut();
return false;
});
});
</script>
<div id="notification-bar">4. Click the save button.
<a class="remove-notbar" href="#" id="remove-notbar">X</a>
<p>Write your notification message.</p>
</div>
Customization
1. To change the days after which the cookie expires, replace 15 with a suitable value.2. When you publish a new notice, make sure to replace bgnotice1 with a new value, so that it won't remain hidden for those who closed the previous notification.
So, the wait is over... Now, open your blog in a new tab and see the blistering new notification bar. Also, feel free to comment, if anything went wrong.
No comments:
Post a Comment