AddTransparent Notification Bar with close button To Blogger

Transparent Notification Bar with close button for blogger. Many Popular websites/blogs use a notification bar to show their latest updates, important news, announcements, News feed because it attracts the visitors attention.You can add any text and link to a notification bar like featured post, your Rss feed, social profile , Facebook Like, Email Newsletter or any thing you want to share. So here I will show you how to add an awesome notification bar with close button

Transparent Notification Bar Demo

LIVE DEMO

How To Add Notification Bar To Blogger

• Go to Blogger Dashboard 
• Click on DropDown Menu and select Template
• Backup your Template before making any changes to your blog
• Now Click on Edit HTML --> Proceed --> Expand Widget Templates
• Press Ctrl + F and search the code shown below

<!-- Notification code by mybloggertools.org start -->

<style type='text/css'>

#ut-sticky

{

background:url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjT6GkYX-Pl206cypdBOZf-pgVn9SbePZD2inF0RQjaJsbdpzFeZsTTgPD6H5yjHHZrceScYNcwrvEPd3Ttg3vowKx9SbMmyqF5Q4DwCeO_LV8cgjuBtCxB6rTfaMHZx0iKsGfBiVYEvzVD/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>Get Latest Updates: <a href="http://feedburner.google.com/fb/a/mailverify?uri=latesthack" target="_blank">Subscribe Now</a> | <a href="http://www.facebook.com/latesthacking" target="_blank">Like Us Facebook</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>

<!-- Notification code by mybloggertools.org end -->

• Replace latesthack with your FeedBurner Name and latesthacking with your Facebook Fanpage Name.
  
•  Now save your template

Like it? Share it.