HOT!Buy Ready-Made Authority WebsitesClick Here

Making Blogger Professional, Important Updates !!

Hello SoraBloggingTips Readers, If you are reading this, then we would like to appreciate your efforts for being supportive. We know its har...

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

42 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. AnonymousJuly 31, 2020

    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. This comment has been removed by the author.

    ReplyDelete
  18. whats the name of font you have used?

    ReplyDelete
  19. Hello admin, I have a question and I hope you will answer it as soon as possible.
    I want to create a page for a label like I want to create page in blogger for SEO Tips in which I want to show all the post with label SOE Tips. Is there a way I do that or a piece of code which performs this action. I searched a lot for this but every one create a page and link it with label.

    https://www.example.com/search/label/seo%20tips? (I do not need this)
    https://www.example.com/p/seo-tips? (I am looking for this type of page)

    Please provide a code which shows all the posts related to one specific label in page.

    I will be very thankful If you help me.

    ReplyDelete
    Replies
    1. You can simply create a page and put sitemap code into that page with certain label. We will publish a tutorial very soon.

      Delete
  20. hi, sora. my blog is not closing the bar. I also want to leave it without being fixed, how do I do it?

    ReplyDelete
  21. Thanks!
    I am really thankful for this notification bar code. I have successfully installed it on my blog.

    You can see it; https://www.techlabbn.com/

    ReplyDelete

Note : -We have stopped giving support to free version users, please read this article Making Blogger Professional, Important Updates !!. If You Are Facing Any Problem While Setting Up The Free Theme, Then We Recommend You To Read Our FAQ(Frequently Asked Question) Page.