How To Create A Stylish Notification Top Bar For Blogger (Blogspot) | Ikonerx | Creating Everyday.

How To Create A Stylish Notification Top Bar For Blogger (Blogspot)

 Having this responsive notification bar placed on your website will really make your blog look super cool. There are lots of notification bar widgets available for Blogspot websites but these widgets are attached with fixed credits that have non-removable property. But you have nothing to worry about because, we are going to share a cool, stylish, and premium looking widget without any branding and hidden credits attached.

These days it became a trend to implement this type of Floating Notification bar in blogs, and the most important thing that it looks really cool. Also, many popular blogs are using this type of bars to notify their content readers or show some important kinds of stuff at the top of their website.

 You can put notification about your latest or popular post so that a visitor of your blog can easily get in touch with that topic or article just by clicking on the link attached. Also, the notification bar can easily be closed and opened by a single button click, which is on the right side of the bar marked (X). 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 background color, border color, and text color.

How to Setup This widget:-

 PHASE 1

Click On Template:
  • Now Backup your template.
  • Then select Edit HTML >> Proceed
  • Don’t forget to click the Expand Template Widgets box.
  • Search for <head> and just below it pastes the following  CSS code below.
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>




PHASE 2

 Now We have to add the jQuery and CSS code in your template which will be responsible for the function of the bar.
  • 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>


ADS- PROPELLER
ADS- PROPELLER
PHASE 3 
 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'>MOST WATCH</span>Ikonerxpedia Marketing Tips (video)<span class='bar-but'><a href='#'>Learn More</a></span><i class='fa fa-times'/>
</div>
Note: Those texts marked red is where you will insert your own desired text then click SAVE.





 🔐This content is based on our contributor's opinion.
Ikonerxpedia and/or the content contributor may earn a commission on sales made from links on this page.

Contributor

Author & Editor

Ikonerx is a media and content consulting agency with a focus on content, experiences, commerce, and advertising solutions that make the most of our clients' budgets..

0 Comments:

Post a Comment