Today were releasing a brand-new fancy style dark-colored notification bar for your blogger blog. This notification pub will show your own desire post which you wish to show up towards the top of the blog. However most of bloggers display the particular hot deals or popular post through this blogger notice. The most big advantage of having notification message towards the top of the blog may exist remain regardless of whether we grab the particular mouse down or scrolling down and up. This top righted bar will interact with every page or post. So in case you have not yet additional a notification pub into blogger then we may recommended to put this simple dark-colored color notification bar in your blogger blog. I have seen many of comments posted by new bloggers in blogging forum, how could we convey a notification message alert bar in blogspot weblog. So in currently article we will reveal, How to convey a professional like notice bar in blogger blog.
This is the notification bar that you place in your blogger blogspot. This Notification bar is very simple created in HTML and CSS.
.png "Professional Notification Bar")
How to add This
This is the very basic and a couple steps method. You can easily add this particular bar as part of your blogger web site by comply with the down below given methods. Remember this particular notification bar is for planning, if you need to add inbound links, then you can add your wish links into the html coding.
Step 1:
Login to blogger dashboard.
Go to Template >> Edit HTML
Now find this ]]></b:skin> by pressing Ctrl+F.
Paste the below code just above/before this ]]></b:skin>.
"
#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;
}
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 <body> tag by pressing Ctrl+F.
Now copy the following code and paste after/below the <body> tag.
"
<div class='openbloggernotification' id='bloggernotificationWrap' style='display: block; margin-top: 0px;'>
<div id='bloggernotification'>
Your Message here
</div>
</div>
<div id='bloggernotification'>
Your Message here
</div>
</div>
"
Now Save your Template .
0 comments:
Post a Comment