ADD TRANSPARENT NOTIFICATON BAR TO BLOG

You can add a link to a featured post, your Rss feed, social profile or an affiliate offer. So here I will show you how to add an awesome notification bar with close button. Its very simple and looks very cool.You can use it on a blogger blog and wordpress blog or even in your websites.
Add The Transparent Notification Bar To Blogger

Remember Always Back Up Your Template Before You Make Changes – How To Back Up A Blogger Template 

Step 1. In Your Blogger Dashboard Click Design > Edit Html 

Step 2. Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code – How To Find Code In Blogger Template Template) 

</body>

Step 3. Copy and Paste the following code Directly Above / Before </body>

<!– Notification code start –>
<style type=’text/css’>
#ut-sticky
{
background:url(&#39;http://3.bp.blogspot.com/-7oGSlq30cTw/Tv33CS4WGgI/AAAAAAAAA0w/HxId_tRUae8/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.pctricksarena.blogspot.com.com’ target=’_blank’>Transparent 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>
<!– End of Notification code, info – http://www.pctricksarena.blogspot.com –>

How to change color and Notification Message.

In this code i have chosen such a color combination so that its looks transparent and whenever you take your mouse on this bar it become more visible.

Change Message – The message and link are highlighted in red above, change as required.
The colors used for the bar are highlighted Enjoy Guys! and don’t forget to post your comments. � MyTricksTime.com