Hello Friends! First i want to pay thanks to the Admin of this blog who give me a chance to share something with you. This is my first Guest post on Spice Up Your Blog.Many Popular blogs use a notification bar to show a News feed and latest content because it attracts your visitors attention.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('http://3.bp.blogspot.com/-7oGSlq30cTw/Tv33CS4WGgI/AAAAAAAAA0w/HxId_tRUae8/s1600/ut-bg.png') 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,"Helvetica";
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:"Arial"; color:#FF0000; line-height:30px;}
</style>
<div id='ut-sticky'>
<p>Add This Transparent Notification Bar To Your Blog <a href='http://www.spiceupyourblog.com/2012/01/add-transparent-notification-bar-to.html' 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("ut-sticky");
crosstbox.style.visibility = 'hidden';
}
</script>
<!-- End of Notification code, info - http://www.spiceupyourblog.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 in yellow and can be changed as required, find hex color codes.
Drop Your Comments And Questions Below.
What My Robot Recommends:
- Mini Social Icons With CSS And Image Sprite Flip Effect
- Pop Out Effect Candy Social Icons For Blogger And WordPress
- Connect Instagram And Your Blog With Photo Gallery And Follow Gadgets
- A Slick New Featured Posts Image Slider For Blogger
- Christmas Decoration Social Bookmarking Gadget For Blogger Blogs
