Widget Title:

<style type='text/css'> #obt-sticky { background: #7d7e7d; /* Old browsers */ background: -moz-linear-gradient(top, #7d7e7d 6%, #7d7e7d 9%, #0e0e0e 99%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(6%,#7d7e7d), color-stop(9%,#7d7e7d), color-stop(99%,#0e0e0e)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #7d7e7d 6%,#7d7e7d 9%,#0e0e0e 99%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #7d7e7d 6%,#7d7e7d 9%,#0e0e0e 99%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #7d7e7d 6%,#7d7e7d 9%,#0e0e0e 99%); /* IE10+ */ background: linear-gradient(top, #7d7e7d 6%,#7d7e7d 9%,#0e0e0e 99%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=0 ); /* IE6-9 */ border-bottom:2px solid #999; color:#fff; text-align: center; margin:-12px auto; padding-bottom:1px; border-top: 1px solid #333; height:38px; font-size:13px; position:fixed; vertical-align: baseline; overflow:hidden; z-index:999; width:100%; border-bottom-left-radius:6px; border-bottom-right-radius:6px; display:block; font-weight: bold; font-family: arial,"Helvetica"; font-color:#fff; -moz-box-shadow: 0 2px 4px hsla(0,0%,0%,.35); -webkit-box-shadow: 0 2px 4px hsla(0,0%,0%,.35); } #obt-sticky:hover { background-color:#333;background-image:-moz-linear-gradient(top,#555555,#434343);background-image:-ms-linear-gradient(top,#555555,#434343);background-image:-webkit-gradient(linear,0 0,0 100%,from(#555555),to(#434343));background-image:-webkit-linear-gradient(top,#555555,#434343);background-image:-o-linear-gradient(top,#555555,#434343);background-image:linear-gradient(top,#555555,#434343);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#555555', endColorstr='#434343',GradientType=0) -webkit-transition:all 1.3s ease-in-out;-moz-transition:all 1.3s ease-in-out;-o-transition-duration:all 1.3s ease-in-out;transition:all 1.3s ease-in-out; -moz-box-shadow: 0 2px 4px hsla(0,0%,0%,.35); -webkit-box-shadow: 0 2px 4px hsla(0,0%,0%,.35); } #obt-button {background:#fff; padding:4px; color:black;text-shadow:0 -1px 0 rgba(255,255,255,0.25);background-color:white} #obt-sticky p{line-height:5px; font-size:13px; text-align:center; width:95%; float:left;} #obt-sticky p a{ text-decoration:underline; padding:4px; color:#FFFF33;} .obt-cross{display:block; position:relative; right:15px; top:4px;float:right;} .obt-cross a{font-size:18px; font-weight:bold; font-family:"Arial"; color:#FF0000; line-height:30px;} .obt-cross, a:hover{color:#DDD; text-decoration:none;} </style> <b:if cond='data:blog.url == data:blog.homepageUrl'> <div id='obt-sticky'> <p style='padding-top:17px;'>Your Text <a class='obt-button' href='http://onlinebloggertricks.blogspot.com/2013/07/sticky-bar-add-top-sticky-notification.html' target='_blank'>link Here!</a></p> <div class='obt-cross'><a href='javascript:hide_cross();'>x</a></div> </div> </b:if> <script language='JavaScript'> function hide_cross() { crosstbox = document.getElementById("obt-sticky"); crosstbox.style.visibility = 'hidden'; } </script>