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>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'>
.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>
<div class='tybar'>All Done : Now everything is completed just Save your Template by pressing Save template button.
<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>
Note: You can change the text and buttons accordingly.
Simple But Stylish Notification Bar For Blogger
Reviewed by TemplatesYard
on
December 08, 2019
Rating:
Reviewed by TemplatesYard
on
December 08, 2019
Rating:
![How To Setup Newsplus Blogger Template [TemplatesYard]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTtM6eBfvHRk_0xFBfh-_zR2z2SIAI-QtCSF4DfDwvhdEIFkn8hPzGfaqxnezcUrxkizQV-nJqpsnOMNljDQmPQtZnI699gmTvVIYDwAVh-N4g4aWVGw-FlnEf41s26tTgk12dyT0qW-KI/s72-c/Newsplus+Blog+Magazine+Blogger+Template.png)
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.
ReplyDeleteTo maintain the responsiveness and not cover the area of content and ads we have to do so.
DeleteHow can i fix that the bar doesn't appear on mobile devices Thanks
DeleteBecause of responsiveness we have to hide a few things in blogger.
Deletesorry sir how can I add a link to that button?
ReplyDeleteReplace the # with your desired link.
DeleteI really liked the notification bar, thank you for that.
ReplyDeleteHowever, it did not work perfectly in my Easy Cart template. The close button does not work.
Please share your blog url.
DeleteOlá! Estou adorando as dicas do blog, mas no meu apareceu o seguinte erro:
ReplyDelete"org.xml.sax.SAXParseException; lineNumber: 481; columnNumber: 6; The content of elements must consist of well-formed character data or markup."
please speak english.
DeleteHello! I'm loving the blog tips, but the following error appeared in mine:
ReplyDelete"org.xml.sax.SAXParseException; lineNumber: 481; columnNumber: 6; The content of elements must consist of well-formed character data or markup."
You must be doing something wrong while copying the code.
Deleteclicking on X it does not Minimizes or cuts
ReplyDeletePlease share your blog url.
DeleteHallo Sora i really liked the templates and the notification bar.
ReplyDeletebut, 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
Follow tutorials well.
DeleteIt 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
ReplyDeleteBecause of responsiveness we have to hide a few things in blogger.
DeleteI'm not able to close the bar, by clicking the close button. Its just unresponsive.
ReplyDeleteplz see: https://amarchitrakatha-pdf.blogspot.com/
Page Not Found
DeleteAfter adding the stylish notification bar, my drop down menus stopped showing. i had to upload/restore my backup theme
ReplyDeletePage Not Found
Deletethanku for notification bar
ReplyDeleteto show in the lower area of the web page?
ReplyDeleteyou can change position down?
DeleteThe Close button does not work.
ReplyDeleteLink: https://gangnyscanlator.blogspot.com/
There is no notification widget in your blog.
DeleteHello sir i want to add this widget in my blog website but i have some problem to fix it .
ReplyDeletePls help me sir .
Www.technofact.in
Follow the tutorials well.
DeleteSir 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
ReplyDeleteSorry 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.
DeleteI try but don't add this please help me
ReplyDeletejobkoi.blogspot.com
Please read the documentation well.
DeleteThis comment has been removed by the author.
ReplyDeleteWhich close button are you talking ?
Deletewhats the name of font you have used?
ReplyDeletefont-family: Ruda;
DeleteHello admin, I have a question and I hope you will answer it as soon as possible.
ReplyDeleteI 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.
You can simply create a page and put sitemap code into that page with certain label. We will publish a tutorial very soon.
Deletehi, sora. my blog is not closing the bar. I also want to leave it without being fixed, how do I do it?
ReplyDeletePlease share your blog url.
DeleteThanks!
ReplyDeleteI am really thankful for this notification bar code. I have successfully installed it on my blog.
You can see it; https://www.techlabbn.com/