Simple But Stylish Notification Bar For Blogger 2021

Simple But Stylish Notification Bar For Blogger 2021 - Easy Guide

There are plenty of notification bars available for Blogspot, but they come with fixed credits that have non-removable assets. Therefore, on Sourbloglets today we are going to share a cool, stylish and premium looking widget without any branding and hidden credit.

It has become a trend these days to introduce this type of floating notification bar in blogs, and most importantly, it looks cool. Also many popular blogs are using these types of bars to inform their readers or to show some important stuff at the top.

It looks nice and stylish at the top of your blog. You can enter a notification about your latest or popular post, so that a visitor to your blog can easily get in touch with that topic or article. The notification bar can be easily closed and opened by a single button, which is to the right of the bar. The widget works very smoothly as it is supported by jquery code and styled by css. The customization of this widget is very easy, you can easily change the background, border color and text color. Demo this amazing looking notification bar. You can see the demo above in this site.

How to install this widget: -

These steps are so simple and easy that no new blogger will have to face any kind of problem to install it in their blog.

Go to Blogger.com >> Your Blog >> Template

Now backup your template.

Then click on Edit HTML >> Proceed

Expand Widget Do not click / tick the widget box.

Search for <head> and just paste the CSS code below it.

<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>

Now we need to add jQuery and CSS code to our template which will be responsible for the bar function.

Go to Blogger> Templates
Back up your template
Click Edit HTML
Search for </head>

Paste the following script 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 add the last and important part of the widget, find <body> and paste the following coding right after / after it. If you can't find <body>, search <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

Header Ads Widget

Simple But Stylish Notification Bar For Blogger 2021 - Easy Guide