Today we are releasing a new fancy style black notification bar for your
blogger blog. This notification bar will show your desire post which
you want to show up at the top of the blog. However most of bloggers
display the hot deals or popular post with the help of this blogger
notification. The most big advantage of having notification message at
the top of the blog will exist remain even if we grab the mouse down or
scrolling up and down. This top righted bar will interact with every
page or post. So if you have not yet added a notification bar into
blogger then we would recommended to add this simple black color
notification bar in your blogger blog. Most of the time i have seen
bundles of comments posted by newbies in blogging forum, how could we
add a notification message alert bar in blogspot blog. So in today
article we will show you, How to add a professional like notification
bar in blogger blog. ?
Read also: Add Css3 Rounded Border Wrap in Blogger
Blogger Notification Bar
This is one of the finest notification bar for all blogspot blogs. By adding this bar into your template, it would bring beauty and will change the design of your blog. It will not compel your blog on loading time because it has been created in Css and Html. So you can feel free to add without any hesitation. To add this bar in your blogger blog please follow the below method.
How to Add This In Blogger Blog
This is a very simple and two steps process. You can easily add this bar in your blogger blog by follow the below given steps. Remember this notification bar is only for designing, if you want to add links, then you can add your desire links inside the html coding.Step: 1
- Go to Blogger Dashboard:
- Go to Template >> Edit Html:
- Now find for ]]></b:skin>:
- Past the below given code:
/*-------------PBT Notification Bar ----------------*/
#bloggernotificationWrap {
display: none;
height: 41px;
margin: -41px 0 0;
padding: 0;
position: fixed;
width: 100%;
z-index: 999999;
}
#bloggernotification {
background: none repeat scroll 0 0 #000000;
border-bottom: 3px dotted #FFFFFF;
border-radius: 10px 13px 7px 5px;
color: #FFFFFF;
font-family: arial,sans-serif;
font-size: 14px;
font-weight: bold;
height: 37px;
margin: -30px 5px 5px -1200px;
padding-top: 7px;
position: relative;
text-align: center;
text-decoration: none;
text-shadow: 1px 1px 1px #000000;
width: 500%;
z-index: 9998;
}
#bloggernotification a {
border-radius: 3px 3px 3px 3px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.35);
color: #000000;
font-family: Calibri,sans-serif;
font-size: 13.5px;
padding: 1px 7px;
text-decoration: none;
}
#bloggernotification a:hover {
text-decoration: underline;
}
#bloggernotification img {
display: none;
}
Step 2:
- Again go to Template:
- Find for <body> tag:
- Now past the below code just after <body> tag:
<div class='openbloggernotification' id='bloggernotificationWrap' style='display: block; margin-top: 0px;'>Now save your Template and you done almost:
<div id='bloggernotification'>
Your Message here
</div>
</div>
This was all about how could we add the fancy notification bar in
blogger. We hope you find this tutorial very helpful. If someone face
any problem in implementation then kindly post your query in comment
section, you will get instant solution from our editorial team.
If you want to know more PBT widget then follow our gadget inventory
for more blogspot gadget. If you really like our job, then kindly share
this work with your friends and relatives. Thanks and happy blogging.
