Nov 20, 2012

Add a bottom Notification Bar to Blogger


How to Add The Transparent Notification Bar To Blogger bottom.

to add this notification bar use below codes..
Remember Always Back Up Your Template Before You Make Changes
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 Below code Directly Above / Before </body>

<!-- http://www.egytricks.com Notification code start -->
<style type='text/css'>
#ut-sticky
{
background:url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOY1k1bNTYQJ38qqUbg2FLhxqSBZ6NgAizxIPnaSrG57nMQvkuDPSa3MlfoituK_A8yLXhQOCsD6mijVWkbu_v4-_fWM5PxJMmd4MSRH6XZrypZ16NQ5K3b5VZba0MSxWoDxZEMVHsrg_b/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.egytricks.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.egytricks.com -->

Modify highlighted color code with yours ..Now all done save your Template..

Subscribe Updates, Its FREE!

3 comments:

  1. that's awesome explanation. Notification bar for blogger is always a professional
    look of thinking. Thanks for sharing.

    ReplyDelete

 

Copyright @ 2013 EgyTricks.

Designed by Vikash | EgyTricks