Saturday, February 11, 2012

TAGGED UNDER: , ,

Add A Transparent Notification Bar To Your Blog

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.

View Demo Button 

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(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHcMkh6zXhV05u-sf2EJROp4bomtT_KVrI2eCtGtduh5UmXs6Ct5ZSiEjuVf0XYTEXYkP7bxA87k8tke-FWvndG9E2hRavHgfmTtOfkdJJXIJ2r1BwKMfPB9rdfDn0WOvbmibTzN4HU_kg/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://TotulPeDos.blogspot.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://TotulPeDos.blogspot.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.

About the Author

Have a good day/night!

0 comments:

Please no spam! Remove comment!

WARNING !

This site does not host any media file or any other file which might be under the influence of copyright. The links on this site lead to other sites! Not responsible for accessing and downloading files from links that lead them! Accessing links on this site, and downloading files from these leading assume your responsibility !!!

Labels

Info Download Video Oameni Jocuri Amuzament Romania Muzica Torrent FileList.ro Hip-Hop Stiri LG YouTube Bani Imagini Bacau Hack Software 2014 Auto PC Fotbal 2012 AI DE PLM Rapperi Filme Made in Romania FOR LIFE Arta Internet Cocalari Telefoane Muzica Adevarata Trailer Windows Blogger Tehnologie Artisti Copiii Online Servicii Online Fashion Facebook NU in Romania America 2013 Muzica de kkT TV Vedete Culinar Picture of the Day Animale Poza Zilei RObotzi Pitzipoance Sport Bani Pe Net Loto 6/49 Monden Slots Games Pack Sezonul 4 Sezonul 1 Sezonul 2 2015 Filme XXX JapKa Politia Seriale Online Stiinta Tutorial Underground HH Evenimente EA Sports Europa Evenimente Bacău Negative Religia Album Android Bancuri Civilizatii Gangsta-Rap Istoria Planete Subtitrari Droguri Naturist Promovare HH Concert Google Masoneria Natura Scoala Sezonul 3 Apple Microsoft Politica Samsung Adolescenta Counter-Strike 1.6 Fructe Pronosticuri Romani au Talent Sex Sexy Toshiba Pariu cu Viata Tatuaje Templates China Update Anglia Manele Subway Pub Cultura FIFA 07 Online Inventie Made in China Realitatea Rock Serials Elevi Rusia Satana Simulator System Requirements Warcraft III: The Frozen Throne 2017 3D Audio Club Zebra Documentar DozaDeHas Franta Gadget HTML Italia Medicamente Mobile Poker Racing Rapper Cocalar Reclama Afaceri EA Mobile Interviu Motociclete SKIDROW Sistem de operare Tigari WWE .dll 2016 Alcool Asus BeatBox Bulgaria Cartea Recordurilor Cool Driver England Las Fierbinti Mac OS Maps Warcraft Mircea Badea The Stage Valentine’s Day AdSense Antarctica Avioane Balul Bobocilor Box Casa de Cultură Bacău Crack FIFA Farse FreeStyle Gameloft Gepex Park Germania PSP Rasta Razboi Statusuri Terorism Trafic de Acte Twerk Team Twitter Versuri Videochat WebDesign Zodii eMachines 2018 ACTA Anonymous Basket Bauturi Bere Biletul Zilei Camera ascunsa Club Kremlin Crestin-Ortodox Dancing Fonturi Glu Google+ Handbal Linux MPC Micron Rezumat Setari
Subscribe on : YouTube

Statistics

Blog Archives

Copyright ©

Copyright ©
Proudly Powered by JK07.