Cool Transparent Notification Bar For Blogger

This a Black Transparent Notification bar for blogger which is very good looking and will attract readers eye's.This is simple html script which will be pasted in your template and its done. This notification bar is placed at the bottom of your blog. Any new post or news can be pasted on this bar. This will increase your page views and also make your readers stick to your blog..

Steps To Add This Notification Bar

1. Logint to your Dashborad.
2. Go to Templates--->Edit html.
3. Find for </body>
4. Copy and paste the below code before </body>.

<style type='text/css'>
#ut-sticky
{
background:url(&#39;&#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:100%;
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:7px; 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>Exclusive 3D Follow Me Buttons For Blogger With Hover Effect <a href='http://blog-toolz.blogspot.com/2012/07/cool-transparent-notification-bar-for.html' target='_blank'>Get The 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>
&lt;script language=javascript&gt;
&lt;!--


var message=&quot;&quot;;

function clickIE()
{
  if (document.all) {
    (message);return false;}
}

function clickNS(e)
{
if (document.layers||(document.getElementById&amp;&amp;!document.all)) {
  if (e.which==2||e.which==3) {(message);return false;}}
}

if (document.layers){
  document.captureEvents(Event.MOUSEDOWN);document.onmousedown=clickNS;}
else{
  document.onmouseup=clickNS;document.oncontextmenu=clickIE;}
document.oncontextmenu=new Function(&quot;return false&quot;)

// --&gt;
&lt;/script&gt;

Note:Change the Highlighted letters with your notification.

Now, Click on Save the Template.



It's Done.

Categories: Blogger Widgets , CSS , jQuery