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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOY1k1bNTYQJ38qqUbg2FLhxqSBZ6NgAizxIPnaSrG57nMQvkuDPSa3MlfoituK_A8yLXhQOCsD6mijVWkbu_v4-_fWM5PxJMmd4MSRH6XZrypZ16NQ5K3b5VZba0MSxWoDxZEMVHsrg_b/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.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("ut-sticky");
crosstbox.style.visibility = 'hidden';
}
</script>
<!-- End of Notification code, info - http://www.egytricks.com -->
<style type='text/css'>
#ut-sticky
{
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOY1k1bNTYQJ38qqUbg2FLhxqSBZ6NgAizxIPnaSrG57nMQvkuDPSa3MlfoituK_A8yLXhQOCsD6mijVWkbu_v4-_fWM5PxJMmd4MSRH6XZrypZ16NQ5K3b5VZba0MSxWoDxZEMVHsrg_b/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.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("ut-sticky");
crosstbox.style.visibility = 'hidden';
}
</script>
<!-- End of Notification code, info - http://www.egytricks.com -->
Modify highlighted color code with yours ..Now all done save your Template..
Thanks.
ReplyDeletethat's awesome explanation. Notification bar for blogger is always a professional
ReplyDeletelook of thinking. Thanks for sharing.
Welcome bro
Delete