![Free notification bar](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJqkBm_vPF-hzSZiKvXST4hEoqwJxb_Wu_mrREYE-dVID6ApTBNk289N5h6X_Vl5LhyphenhyphenkS3Vmv4IoPzA6IDrHeUicC8jGwtmyb9oDApofIGlN_vZ4NovUceD2k43czAbU4F9OaKHCLoTas/s1600/New+Picture.bmp)
![Free notification bar](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiQ_HuadC3cDiAm1op5GPsuVw-syMn_8ghocod5Tm1PkAW0_T9gT9T1Rv15tP3FYuRbY7VsLinUC7-8dhzfDhenquLHNZw3S-dGG1B6XDDEzVQ0Qh0qDOBjOnY5kKvhyDW8Fhx8j4vBqA/s1600/New+Picture+%25281%2529.bmp)
![Free Notification bar for everyone](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0nIAulA_OccE-BojwqtTD_Oblcd-DdkasvKwg2sR-sWNCqb4ROkDJTZ5g-7Pv6HMSkSO0PDU9z8h19zK94oTfBu4iwmCygPfI13fHOf2Yg79AwO1cecCT5jZd5JDjesLFYBM4hPz7xbY/s1600/New+Picture+%25282%2529.bmp)
Bottom notification bar
I've created New notification bar with hide and show utility. I'll release it soon. For demo have a look at top of this blog.
I've created New notification bar with hide and show utility. I'll release it soon. For demo have a look at top of this blog.
How to get this in my website?
If you want to add this to your website then simply add this code before
</head>
<style type="text/css"> #tbm { position: fixed; top: 0px; left: 0px; right: 0px; padding: 10px; background: #333333; color: #cccccc; border: 0px; border-bottom: 2px solid #ffffff; box-shadow: 0px 1px 5px 2px #999999; -webkit-box-shadow: 0px 1px 5px 2px #999999; -moz-box-shadow: 0px 1px 5px 10px #999999; text-align: center; opacity: 0.3; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; font: normal medium arial; } #tbm:hover { opacity: 1; } #tbm a:link { color: #ffffff; text-decoration: none; transition: all 1s ease; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; } #tbm a:hover { color: #ffff00; text-shadow: 0px 0px 3px #ffffff; } #tbm a:visited { color: #ffffff; } </style>
And after it paste this code after
<body>
tag.<div id="tbm"> <a href="http://www.google.com">Link title</a> </div><br/><br/>
What if you are using blogger?
In blogger go to blog's template editor and click on edit html.
Now find
I hope this helped. Tell me if you find anything that is not working properly or if you know something that can make it better.
Now find
</b:skin>
and paste below code before that.#tbm { position: fixed; top: 0px; left: 0px; right: 0px; padding: 10px; background: #333333; color: #cccccc; border: 0px; border-bottom: 2px solid #ffffff; box-shadow: 0px 1px 5px 2px #999999; -webkit-box-shadow: 0px 1px 5px 2px #999999; -moz-box-shadow: 0px 1px 5px 10px #999999; text-align: center; opacity: 0.3; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; font: normal medium arial; } #tbm:hover { opacity: 1; } #tbm a:link { color: #ffffff; text-decoration: none; transition: all 1s ease; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; } #tbm a:hover { color: #ffff00; text-shadow: 0px 0px 3px #ffffff; } #tbm a:visited { color: #ffffff; }After pasting above code add below code after
<body>
tag.<div id="tbm"> <a href="http://www.google.com">Link title</a> </div><br/><br/>Everything is done. Now just change http://www.google.com with your webpage address and Link title with text that you want to show for that link.
I hope this helped. Tell me if you find anything that is not working properly or if you know something that can make it better.