Rkcreationzzz

HOW TO ADD COOL FLOATING NOTIFICATION BAR IN BLOGGER

Feb 25th, 2013
53
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 3.24 KB | None | 0 0
  1. <!-- Notification code start -->
  2. <style type='text/css'>
  3. #ut-sticky
  4. {
  5. background: #7d7e7d; /* Old browsers */
  6. background: -moz-linear-gradient(top, #7d7e7d 6%, #7d7e7d 9%, #0e0e0e 99%); /* FF3.6+ */
  7. background: -webkit-gradient(linear, left top, left bottom, color-stop(6%,#7d7e7d), color-stop(9%,#7d7e7d), color-stop(99%,#0e0e0e)); /* Chrome,Safari4+ */
  8. background: -webkit-linear-gradient(top, #7d7e7d 6%,#7d7e7d 9%,#0e0e0e 99%); /* Chrome10+,Safari5.1+ */
  9. background: -o-linear-gradient(top, #7d7e7d 6%,#7d7e7d 9%,#0e0e0e 99%); /* Opera 11.10+ */
  10. background: -ms-linear-gradient(top, #7d7e7d 6%,#7d7e7d 9%,#0e0e0e 99%); /* IE10+ */
  11. background: linear-gradient(top, #7d7e7d 6%,#7d7e7d 9%,#0e0e0e 99%); /* W3C */
  12. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=&#39;#7d7e7d&#39;, endColorstr=&#39;#0e0e0e&#39;,GradientType=0 ); /* IE6-9 */
  13.  
  14. border-bottom:2px solid #999;
  15.  
  16. color:#fff;
  17. text-align: center;
  18. margin:-12px auto;
  19. padding-bottom:1px;
  20. border-top: 1px solid #333;
  21. height:38px;
  22. font-size:13px;
  23. position:fixed;
  24. vertical-align: baseline; overflow:hidden;
  25. z-index:999;
  26. width:100%;
  27. border-bottom-left-radius:6px;
  28. border-bottom-right-radius:6px;
  29. display:block;
  30. font-weight: bold;
  31. font-family: arial,&quot;Helvetica&quot;;
  32. font-color:#fff;
  33. -moz-box-shadow: 0 2px 4px hsla(0,0%,0%,.35);
  34. -webkit-box-shadow: 0 2px 4px hsla(0,0%,0%,.35);
  35. }
  36. #ut-sticky:hover
  37. {
  38.  
  39. 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=&#39;#555555&#39;,endColorstr=&#39;#434343&#39;,GradientType=0)
  40.  
  41. -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;
  42.  
  43. -moz-box-shadow: 0 2px 4px hsla(0,0%,0%,.35);
  44. -webkit-box-shadow: 0 2px 4px hsla(0,0%,0%,.35);
  45.  
  46. }
  47.  
  48. #ut-button {background:#fff; padding:4px; color:black;text-shadow:0 -1px 0 rgba(255,255,255,0.25);background-color:white}
  49.  
  50. #ut-sticky p{line-height:5px; font-size:13px; text-align:center; width:95%; float:left;}
  51. #ut-sticky p a{ text-decoration:underline; padding:4px; color:#FFFF33;}
  52. .ut-cross{display:block; position:relative; right:15px; top:4px;float:right;}
  53. .ut-cross a{font-size:18px; font-weight:bold; font-family:&quot;Arial&quot;; color:#FF0000; line-height:30px;}
  54. .ut-cross, a:hover{color:#DDD; text-decoration:none;}
  55.  
  56. </style>
  57. <div id='ut-sticky'>
  58. <p style='padding-top:17px;'>Add This Floating Notification Bar To Your Blog <a class='ut-button' href='http://www.mypremiumlab.com' target='_blank'>Click Here!</a></p>
  59. <div class='ut-cross'><a href='javascript:hide_cross();'>X</a></div>
  60. </div>
  61. <script language='JavaScript'>
  62. function hide_cross() {
  63. crosstbox = document.getElementById(&quot;ut-sticky&quot;);
  64. crosstbox.style.visibility = &#39;hidden&#39;;
  65. }
  66. </script>
  67. <br/><br/>
  68. <br/><br/>
  69. <!-- End of Notification code, info - http://www.mypremiumlab.com -->
Advertisement
Add Comment
Please, Sign In to add comment