Hello friends!!! Do you ever highlight your best content or product on your website or blog in front of your readers?? If no then highlight it now, it will increase the visibility of your content and product, but the major draw back of blogger is, blogger doesn't gives you this awesome facility so today i came up with a hack with the tutorial which adds a transparent notification to your blogger blog and highlights your best content and product.
This new Transparent Notification Bar comes with a close button through which your readers able to close the notification bar if they doesn't like it.Many popular blogs use this type of notification bar for showing a News Feed and latest content which attracts readers.
Now you are able to add this awesome notification bar to your blog by adding a little code in your blog's HTML, you also able add this notification bar in the bottom and on the top of your blog.The best thing is that you able to add RSS feed, News feed, and links in this notification bar.
From description it seems nice but if you see a demo yourself then you know this transparent notification bar more so see a demo by clicking on the button below.
1.) How To Add A Transparent Notification Bar On Top Of Your Blogger Blog
First See a live demo of this transparent notification bar how it looks and work on your blog click on the demo button below and check it live.
Step1.) Login to your blogger dashboard.
Step2.) Now Go To Your Blogger Dashboard > Click On Design > Click On Edit HTML.
Step3.) Now Check on the Expand Widget Templates.
Step4.) Now find the following piece of code in your blog's HTML (For finding the code click CTRL + F for the search bar for searching the code easily).
</body>
Step5.) Now copy the code from below and paste it directly above/before the </body> tag.
<!-- Notification code start -->
<style type='text/css'>
#ut-sticky
{
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9JMcp_FTSD1ZCiR2ypva1JWfidKIM2mFBqFBbsg60-s32aKejCHV0dIkcTNDMXUV_DqUghmUCuRsAzyFYdMNvmuO3Rm7K2RDGwByk20qc29lyDcoK04nvUlyLZefXWb6CB_k1UrOc198v/s1600/ut-bg.png') repeat;
color:#fff;
margin:0 auto;
border-top: 0px solid #fff;
height:28px;
font-size:13px;
position:fixed;
top:0;
z-index:999;
width:95%;
border-bottom-left-radius:5px;
border-bottom-right-radius:5px;
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.tekleisure.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("ut-sticky");
crosstbox.style.visibility = 'hidden';
}
</script>
<!-- End of Notification code, info - http://www.tekleisure.com -->
Note: To change the color combination of your transparent notification bar so change the color codes which are highlighted in yellow color.
How To Change Message: To change the message and link of your transparent notification bar change the code highlighted in red color.
Thee colors used in the transparent notification bar are used by our HTML Hex color chart, you can also use it for changing the colors.
2.) How To Add A Transparent Notification Bar In Bottom Of Your Blogger Blog
First see a live demo of this transparent notification bar how it looks and work on your blog, click on the demo button below and check it live.
Step1.) Login to your blogger dashboard.
Step2.) Now Go To Your Blogger Dashboard > Click On Design > Click On Edit HTML.
Step3.) Now Check on the Expand Widget Templates.
Step4.) Now find the following piece of code in your blog's HTML (For finding the code click CTRL + F for the search bar for searching the code easily).
</body>
Step5.) Now copy the code from below and paste it directly above/before the </body> tag.
<!-- Notification code start -->
<style type='text/css'>
#ut-sticky
{
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9JMcp_FTSD1ZCiR2ypva1JWfidKIM2mFBqFBbsg60-s32aKejCHV0dIkcTNDMXUV_DqUghmUCuRsAzyFYdMNvmuO3Rm7K2RDGwByk20qc29lyDcoK04nvUlyLZefXWb6CB_k1UrOc198v/s1600/ut-bg.png') repeat;
color:#fff;
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.tekleisure.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("ut-sticky");
crosstbox.style.visibility = 'hidden';
}
</script>
<!-- End of Notification code, info - http://www.tekleisure.com -->
Note: To change the color combination of your transparent notification bar so change the color codes which are highlighted in yellow color.
How To Change Message: To change the message and link of your transparent notification bar change the code highlighted in red color.
The colors used in the transparent notification bar are used by our HTML Hex color chart, you can also use it for changing the colors.
If you having any problems in installing this transparent notification bar in your blog then drop your questions and comments below.
Love it! Two questions:
ReplyDelete1) Can it go on the bottom of the page?
2) Can it be set to only appear once a day, or once a week?
Thanks!