Releasing Professional Blogger Notification Bar!

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 wish to show up at the top of your blog. However many bloggers display the hot deals or popular post with the help of this blogger notification bar. The biggest advantage of notification message at the top of the blog is to remain exist 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 i would recommend to add this simple black color notification bar in your blogger blog. 

You may follow the easy steps mentioned below in order to add the widget to your blogger blogs. Same procedure will work for any other platform like Wordpress. 
Go To Blogger > Template
Backup your template
Click Edit HTML
Search for ]]></b:skin>
Just  paste the following code above it:
/* ----Blogger Notification bar by Saad Ahmad Azaad----- */
#bloggernotificationWrap{ 
    display: none; 
    margin: 0; 
    padding: 0; 
    position: fixed; 
    margin-top: -41px; 
    z-index: 999999; 
    width: 100%; 
    height: 41px; 
}
#bloggernotification { 
    width: 100%; 
    height: 28px; 
    margin: 0px; 
    padding-top: 7px; 
    text-align: center; 
    background: none repeat scroll #2E2F2E; 
    position: relative; 
    box-shadow:0px 1px 3px #666; 
    z-index: 9998; 
    text-decoration: none; 
    color: #cccccc; 
    font-family: arial,sans-serif; 
    font-size: 13px; 
    font-weight: bold; 
    text-shadow: 1px 1px 1px #000; 
    border-bottom:2px solid #fff; 
}

#bloggernotification a{ 
    text-decoration: none; 
    color:#FFFC00; 
     font-family: arial,sans-serif; 
    font-size: 13px; 
    font-weight: bold; 
    text-shadow: 1px 1px 1px #000; 
    outline: none; 
}
#bloggernotification a:hover{ 
    text-decoration: underline; 
}
#bloggernotificationWrap #closebloggernotification{ 
    display: block; 
    position: absolute; 
    top: 0; 
    right: 23px; 
    height: 40px; 
    width: 21px; 
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTWF-XSlBaGOipdpFdt1UaGS6yZP5lyaYMIt0JXKvaiBq4RV2KbID3VyLBzoV9gRtMasjrcTgxLJwc_hl88MUj_a0AWkchRxV1NpeAX9rmpKmO_zqX7dJQ5ys25ZPwI6zlw0N952fmfYPg/s400/light.png) no-repeat 0 center; 
    cursor: pointer; 
}
#bloggernotificationWrap #closebloggernotification:hover{ 
    background-position: -21px 50%; 
}
#bloggernotificationWrap.bottomPosition #closebloggernotification{ 
    background-position: right 50%; 
}
#bloggernotificationWrap.bottomPosition #closebloggernotification:hover{ 
    background-position: -42px 50%; 
}
#bloggernotificationWrap #openbloggernotification{ 
    display: block; 
    position: absolute; 
    top: -6px; 
    right: 15px; 
    padding: 0 7px; 
    background: #2E2F2E; 
    border-left: 3px solid #fff; 
    border-right: 3px solid #fff; 
    border-bottom: 3px solid #fff; 
    cursor: pointer; 
    z-index: 1; 
    -webkit-border-bottom-right-radius: 5px; 
    -webkit-border-bottom-left-radius: 5px; 
    -moz-border-radius-bottomright: 5px; 
    -moz-border-radius-bottomleft: 5px; 
    border-bottom-right-radius: 5px; 
    border-bottom-left-radius: 5px; 
       box-shadow:0px 1px 3px #666; 
}
#bloggernotificationWrap #openbloggernotification span{ 
    display: block; 
    width: 21px; 
    height: 34px; 
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTWF-XSlBaGOipdpFdt1UaGS6yZP5lyaYMIt0JXKvaiBq4RV2KbID3VyLBzoV9gRtMasjrcTgxLJwc_hl88MUj_a0AWkchRxV1NpeAX9rmpKmO_zqX7dJQ5ys25ZPwI6zlw0N952fmfYPg/s400/light.png) no-repeat right 50%; 
}

To change the background color of the bar simply edit #2E2F2E
To change text color edit #cccccc
To change hyperlink color edit #FFFC00

Finally  the bar appears just add the following code below <body>
<div class='openbloggernotification' id='bloggernotificationWrap' style='display: block; margin-top: 0px;'><div id='bloggernotification'> 

Write Your Notification Message Here
<span id='closebloggernotification'/></div><span id='openbloggernotification' style='top: -6px;'><span/></span></div>

<br/><br/>



Save your Template you r all done(y)!!!!

Create Links


To create links inside the notification bar use the following code:

<a class='link' href='ADD-URL-HERE' target='_blank'>Link Text</a>

You must add the class='link' , which is required by the script.


How To Add Stylish Notification Bar?

Go To Blogger Dashboard>> 
Edit Template>>
Search For </body> 
Paste the code above the </body>

<!-- Notification code start -->
<style type='text/css'>
#ut-sticky
{
background:url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpHEQBygKcoYQ6MkVabeFU63nroYjjv0VBegmThYpjozORasX9DVMHmjJxtn_rxugvSZXti9P3Nc14yATvHFrlx0th1-bfbCh34QKY5uWnk3m0eNk27dGZz_MCNIy8CdidA9vFEhBm2Dug/s1600/ut-bg.png&#39;)  repeat; 
color:#fff; 
text-align: center;
margin:0 auto; 
border-top: 1px solid #fff;
height:28px; 
font-size:13px; 
position:fixed; 
bottom:0; 
z-index:999; 
width:95%;
border-top-left-radius:15px;
border-top-right-radius:15px; 
display:block;
font-weight: bold;
font-family: arial,&quot;Helvetica&quot;;
font-color:#fff;
}
#ut-sticky:hover
{background:#333;}
#ut-sticky p{line-height:5px; font-size:13px; text-align:center; width:95%; float:left;}
#ut-sticky p a{ text-decoration:underline; color:#FFFF33;}
.ut-cross{display:block; position:relative; right:15px; float:right;}
.ut-cross a{font-size:18px; font-weight:bold; font-family:&quot;Arial&quot;; color:#FF0000; line-height:30px;}
</style>
<div id='ut-sticky'>
<p>Add This Transparent Notification Bar  To Your Blog <a href='http://www.errorcodexin.blogspot.com'  target='_blank'>Stylish Notification Bar</a></p>
<div class='ut-cross'><a href='javascript:hide_cross();'>X</a></div>
</div>
<script language='JavaScript'>
function hide_cross() {
crosstbox = document.getElementById(&quot;ut-sticky&quot;);
crosstbox.style.visibility = &#39;hidden&#39;;
}
</script>

Congratulations You have done it(y)
Tags

You may like these posts

Show more