24 Ekim 2014 Cuma

Add Transparent Notification Bar in your Blog



SCREEN SHOT


Click on image to view full size

Hello guys today i am going to show you a best "Transparent  notification bar" for your Blog/Site.From the help of this Notification bar you can simply notify your blog readers like resent post, social link, Facebook page link ,any other offer link or anything.(Many bloggers are use this notification bar to display their popular posts.) this notification bar is automatically scroll with your page. In this Notification bar a close button is available visitors are close this bar by clicking on close button.And the best thing is if you are using a without sidebar blogger template, then this notification bar is a must use thing. It will attract all of your visitors to show the desired post you want.So if u want to add this Notification bar into your blog then follow below steps. 



Step:-1 Go to your >>Blogger Dashboard 

Step:-2 Now go to >>Template section

Step:-3 when template is open click on edit HTML button

Step:-4 Now find <body> tag using ctrl + f  from your keyboard


<!-- Notification code start --> <style type='text/css'> #ut-sticky { background:url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhn6I62GuCTbJGDNbu0oJrY3vsAksuuPaiX1ggOCWFkkj4VLDJYnewoRk1nHhpZOxnZbYeHeZcwOsxIY6hJ4wYZglWGw9mO-W_vS_D88aIg_vLSayLq4nCJj5YDmVbFkDloMwe1CoATyPgI/s1600/99pcsoft+(2).png&#39;) repeat; color:#fff; text-align: center; margin:0 auto; border-top: 1px solid #fff; height:30px; font-size:13px; position:fixed; bottom:0; z-index:999; width:100%; border-top-left-radius:0px; border-top-right-radius:0px; display:block; font-weight: bold; font-family: arial,&quot;Helvetica&quot;; font-color:#fff; } #ut-sticky:hover {background:#333;} #ut-sticky p{line-height:26px; font-size:13px; text-align:center; width:95.1%; 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:15px; font-weight:bold; font-family:&quot;Arial&quot;; color:#999; line-height:30px;} </style> <div id='ut-sticky'> <p>Add This Transparent Notification Bar To Your Blog if u like it? <a href='http://www.99pcsoft.blogspot.com' target='_blank'>Click here to Add</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://www.99pcsoft.blogspot.com -->

Some Important changes

:- Change orange line if u want to change height of this bar

:- Change yellow line if u want to change color of text

:- change green line if u want to change text position 

:- Replace red line with your own text

:- Replace blue line with your own link and his text

Step:- 5 Now click on Save template button .

Done ..!!



My special thanks to Paul Crowe


Note:- If u like this post please give me your comments for your feedback suggestion or help.Thanks..!!

Etiketler: ,

0 Yorum:

Yorum Gönder

Yorumlarınız için teşkür ederim

Kaydol: Kayıt Yorumları [Atom]

<< Ana Sayfa