HOT!Buy Ready-Made Authority WebsitesClick Here

Subscribe Us

Simple But Stylish Notification Bar For Blogger



There are lots of  Notification bars available for blogspot but they came with fixed credits which has non-removable property.So, Today at sorabloggingtips, we are going to share a cool, stylish and premium looking widget without any branding and hidden credits. In these days it became trend to implement this type of Floating Notification bar in blogs,and the most important thing that it looks cool. Also many popular blogs are using this type of bars to notify their readers or show some important stuffs at top.it looks good and stylish at the top of your blog. You can put notification about your latest or popular post, so that a visitor of your blog can easilly get in touch of that topic or article.The notification bar can easily closed and opened by single button, which is in the right side of the bar. The widget works very smooth cause it is supported by jquery code and styled by css. Customization of this widget is very easy, you can easily change the the background,border color and text color.Let's have a demo of this amazing looking notification bar. You can check the demo above in this site.

How to install This widget:-

These  steps are so simple and easy that any new blogger will not face any kind of problem to install it in their blog.
Go To Blogger.com >> Your Blog >> Template
Now Backup your template.
Then select Edit HTML >> Proceed
Don’t forget to Click/Tick the Expand Template Widgets box.
Search for <head> and just below it paste the following  CSS code.
 <link href='//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>
Now We have to add the jQuery and CSS code in your template which will responsible for the function of the bar.

  • Go To Blogger > Template
  • Backup your template
  • Click Edit HTML
  • Search for </head>
  • Paste the following scripts just above it:

<style>
.tybar{width: 100%;
margin: 0;
height: 50px;
display: table;
font-size: 17px;
line-height: 50px;
font-weight: 600;
-webkit-font-smoothing: antialiased;
color: rgb(255, 255, 255);
    font-family: Ruda;
border-color: rgb(255, 255, 255);
background-color: #0e1032;
box-shadow: 0 1px 3px 2px rgba(0,0,0,0.15); 
text-align: center;}
.tybar .bar-but{font-size: 17px;
font-weight: bold;
margin-left: 25px;
background: #fff;
padding: 5px;
color: #fff;
background-color: #f2132d;
line-height: 1.05;
padding: 4px 15px;
cursor: pointer;
text-decoration: none;
border-radius: 3px;}
.tybar .bar-but a{color:#fff;    text-decoration: none;}
.tybar i {
float: right;
padding-right: 40px;
cursor: pointer;
line-height: 50px;
}
body{margin-top:-49.33px;}
body{margin-top:49.33px ;transition:600ms;-webkit-transition:600ms;-moz-transition:600ms;-o-transition:600ms;}
.toggleclose{top:-75px!important;}
.togglebody{margin-top:0!important;}
.fa-arrow-down {
position: fixed;
right: 30px;
top: -2px;
background:#00BE98;
color: #FFFFFF;
width: 40px;
height: 30px;
border-radius: 3px;
line-height: 26px!important;
padding-top: 10px;
padding-right: 0!important;
}
.tybar{z-index:99999;top:0;transition:600ms;-webkit-transition:600ms;-moz-transition:600ms;-o-transition:600ms;position:fixed}
.blink_me {
color:#f2132d;
margin-right:10px;
    -webkit-animation-name: blinker;
    -webkit-animation-duration: 1s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
 
    -moz-animation-name: blinker;
    -moz-animation-duration: 1s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
 
    animation-name: blinker;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}
@-moz-keyframes blinker {
    0% { opacity: 1.0; }
    50% { opacity: 0.0; }
    100% { opacity: 1.0; }
}
@-webkit-keyframes blinker {
    0% { opacity: 1.0; }
    50% { opacity: 0.0; }
    100% { opacity: 1.0; }
}
@keyframes blinker {
    0% { opacity: 1.0; }
    50% { opacity: 0.0; }
    100% { opacity: 1.0; }
}
@media screen and (max-width:800px) {
.tybar{display:none;}
body {
    margin-top: 0;
    }
}
</style>
<script>
//<![CDATA[
jQuery(document).ready(function(){
  jQuery( '.tybar i' ).click(function() {
  jQuery( '.tybar' ).toggleClass( 'toggleclose' );
  jQuery( 'body' ).toggleClass( 'togglebody' );
  jQuery( '.tybar i' ).toggleClass( 'fa-times' );
  jQuery( '.tybar i' ).toggleClass( 'fa-arrow-down' );
});
});
//]]>
</script>
Now let’s add the final and important part of the widget, Search for <body>  and just below/after it paste the following coding. if you don't find <body> then search for <body expr:class='data:blog.pageType'>
<div class='tybar'>
<span class='blink_me'>Red Text</span>Normal White Text<span class='bar-but'><a href='#'>Button Text</a></span><i class='fa fa-times'/>
</div>
All Done : Now everything is completed just  Save your Template by pressing Save template button.
Note: You can change the text and buttons accordingly.
Simple But Stylish Notification Bar For Blogger Simple But Stylish Notification Bar For Blogger Reviewed by TemplatesYard on December 08, 2019 Rating: 5

37 comments:

  1. Hello, thanks for your guild to make our site looking good. I ask you why this notification bar doesn't appear in mobile device. can you help me make it appear on all devices. another question please. can you help me make the main menu bar fixed while scrolling. and thanks again.

    ReplyDelete
    Replies
    1. To maintain the responsiveness and not cover the area of content and ads we have to do so.

      Delete
    2. How can i fix that the bar doesn't appear on mobile devices Thanks

      Delete
    3. Because of responsiveness we have to hide a few things in blogger.

      Delete
  2. sorry sir how can I add a link to that button?

    ReplyDelete
  3. I really liked the notification bar, thank you for that.
    However, it did not work perfectly in my Easy Cart template. The close button does not work.

    ReplyDelete
  4. Olá! Estou adorando as dicas do blog, mas no meu apareceu o seguinte erro:

    "org.xml.sax.SAXParseException; lineNumber: 481; columnNumber: 6; The content of elements must consist of well-formed character data or markup."

    ReplyDelete
  5. Hello! I'm loving the blog tips, but the following error appeared in mine:

    "org.xml.sax.SAXParseException; lineNumber: 481; columnNumber: 6; The content of elements must consist of well-formed character data or markup."

    ReplyDelete
    Replies
    1. You must be doing something wrong while copying the code.

      Delete
  6. clicking on X it does not Minimizes or cuts

    ReplyDelete
  7. Hallo Sora i really liked the templates and the notification bar.
    but, it did not work perfectly in my site. The close (X) button does not work. clicking on X it does not Minimizes or cuts, can u Solve it Please. Thank you. digitalwork.my.id

    ReplyDelete
  8. It is Awesome and Works well on my Blog. But Can you Please help me and tell me How can i make it mobile Responsive? Thanks

    ReplyDelete
    Replies
    1. Because of responsiveness we have to hide a few things in blogger.

      Delete
  9. I'm not able to close the bar, by clicking the close button. Its just unresponsive.
    plz see: https://amarchitrakatha-pdf.blogspot.com/

    ReplyDelete
  10. After adding the stylish notification bar, my drop down menus stopped showing. i had to upload/restore my backup theme

    ReplyDelete
  11. thanku for notification bar

    ReplyDelete
  12. to show in the lower area of ​​the web page?

    ReplyDelete
  13. The Close button does not work.
    Link: https://gangnyscanlator.blogspot.com/

    ReplyDelete
    Replies
    1. There is no notification widget in your blog.

      Delete
  14. Hello sir i want to add this widget in my blog website but i have some problem to fix it .
    Pls help me sir .

    Www.technofact.in

    ReplyDelete
  15. Sir how can i add copy and whatsapp share button that is used to copy and share blockquoted text after, button automatically added after doing any text blockquoted

    ReplyDelete
    Replies
    1. Sorry we can't provide support on additional customization(Adding or Removing stuffs) rather than solving issues or bugs, if you want to customize your template then buy our blog customization service.

      Delete
  16. I try but don't add this please help me

    jobkoi.blogspot.com

    ReplyDelete
  17. The Close button does not work.
    link:https://digitalpathshaala.blogspot.com/

    ReplyDelete

Note : -Before Commenting We Recommend You To Read Our FAQ(Frequently Asked Question) Page.