How to Add Sticky Notification Bar to Blogger

Hello and Welcome to GetWebInfo.Com. Here on this post you can be able to find out Latest Article About Sticky Notification Bar in to Blogger. This is an amazing widget in Blogger and increase Bounce Rate of your website. Notification bar is used to highlight the important things on a blog toward we want to attract the visitor attention most. You put some links there in it to showcase them to your visitors and the notification bar scrolls down to the page as a sticky bar on the top of the page so that any visitor of your blog can't really miss it.

How to Add Sticky Notification Bar to Blogger  (www.getwebinfo.com)


The Hello Bar comes with a bunch full of great features and includes a show hide button which lets users hide the notification bar if it irritates or simply if they are already aware of those important things. The major downfall of Hell Bar for Blogger is to includes the link back to their website on the top left which will distract the visitors attention to your blogger blog.


Features of Our Sticky Notification Bar

  • Integration of FontAwesome Icons
  • Neat and Clean Professional Looking Design 
  • Show Hide Button on the right side of the notification Bar
  • Easy To Customization it's Colors
  • Easy Step's to Setup 
  • Super Lightweight and Loads very Fast
  • Stay on top of the page even if the user scrolls the page down
  • Responsive Design and Looks Very Beautiful


How to Add Sticky Notification Bar in to Blogger Bloge



Step 01: Fist of all LogIn to Your Blogger Blog

Step 02: Go To Template Setting and Click on  Edit HTML

Setp 03: Click Inside the template code box and save a backup first

Step 04: Search for the code line <head> and just below it paste the following FontAwesome icons CSS link given below
<link href='http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>
 Also add the Google JavaScript Library Link just below it if not already added to your blog (rare Case) so please check it first and avoid adding same links again.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
Step 05: Now search for the ]]></b:skin> code line and just before that, paste the whole CSS code given below.

/*--------------------------------------------------------------
  Sticky Notification Bar For Blogger
  Designed by: GetWebInfo.Com
  Sticky Code By: https://www.getwebinfo.com/
--------------------------------------------------------------*/
#twistBlogger_NotificationBar_wrap {
  margin:0;
  padding:0;
  position:relative;
  width:100%;
  z-index:9999999;
}
.twistBlogger_NotificationBar {
  color: #fff;
  position: relative;
  background: #595959; /*--Change Background Color Here--*/
  width: 100%;
  padding: 0;
  text-align: center;
  font-family: Arial Black, sans-serif;
  text-shadow: 0px -1px 0px #000;
  margin: 0px auto;
  height: 40px;
  box-shadow: 0px 1px 5px #616161;
}
.twistBlogger_NotificationBar label:hover {
  cursor: pointer;
}
.twistBlogger_NotificationBar label {
  text-align: center;
  background: #FF5353; /*--Change Button Background Color Here--*/
  color: #FFF;
  border: 0;
  font-family: fontawesome;
  text-shadow: 0px -1px 0px #EC0000;
  font-size: 26px;
  -webkit-transition: 0.3s all ease-in-out;
  -moz-transition: 0.3s all ease-in-out;
  -ms-transition: 0.3s all ease-in-out;
  -o-transition: 0.3s all ease-in-out;
  transition: 0.3s all ease-in-out;
  position: relative;
  transition-delay: 0s;
  margin-top: 0;
  float: right;
  height: 35px !important;
  width: 30px;
  overflow: hidden !important;
  z-index: 9999;
  padding-top: 5px;
}
input.TwistBlogger_ShowHideButtonBar:checked + label {
  transform-origin: 12% 50% !important;
  transform: translateY(0px) rotateX(190deg);
  -webkit-transform: translateY(0px) rotateX(190deg);
  -moz-transform: translateY(0px) rotateX(190deg);
  -ms-transform: translateY(0px) rotateX(190deg);
  -o-transform: translateY(0px) rotateX(190deg);
  -webkit-transition-delay: 0.3s;
  -moz-transition-delay: 0.3s;
  -ms-transition-delay: 0.3s;
  -o-transition-delay: 0.3s;
  transition-delay: 0.3s;
  margin-top: 47px;
  border: 0;
}
input.TwistBlogger_ShowHideButtonBar ~ .twisteBlogger_ContentArea {
  position: relative;
  overflow: hidden;
  height: 40px;
  -webkit-transition: 0.5s all ease-in-out;
  -moz-transition: 0.5s all ease-in-out;
  -ms-transition: 0.5s all ease-in-out;
  -o-transition: 0.5s all ease-in-out;
  transition: 0.5s all ease-in-out;
}
input.TwistBlogger_ShowHideButtonBar:checked ~ .twisteBlogger_ContentArea {
  margin-top: -50px;
}
input.TwistBlogger_ShowHideButtonBar {
  display: none;
}
/*--Change FontAwesome Icons Style Here--*/
.twisteBlogger_ContentArea .fa {
  font-size: 16px;
  font-weight: normal;
  color: #FFFFFF;
  font-family: FontAwesome;
  border-bottom: 1px solid #FFFFFF;
  margin-right: 5px;
}
.twisteBlogger_ContentArea ul {
  margin: 0;
  padding: 0;
  list-style: none;
  list-style-type: none;
  height: 100%;
}
.twisteBlogger_ContentArea ul > li {
  list-style: none;
  font-size: 14px;
  font-weight: bold;
  font-family: sans-serif;
  text-decoration: none;
  padding-top: 10px;
  margin-right: 10px;
  display: inline-block;
}
.twisteBlogger_ContentArea ul > li > a {
  color: #FFD946;   /*--Change Links Color Here--*/
  text-decoration: none;
  font-family: cursive;
  font-weight: normal;
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -ms-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}
.twisteBlogger_ContentArea ul > li > a:hover {
  color: #EFCB41 !important;  /*--Change Links Hover Color Here--*/
}
.bs_sticking {
  position:fixed !important;
  width: 100% !important;
}
@media only screen and (max-width:479px) {
#twistBlogger_NotificationBar_wrap, .twistBlogger_NotificationBar {
  display: none !important;
}
}
Step 06: This Time Search for Opening tag <body> and just below it paste the whole HTML code given below after making the required changes.

<div id='twistBlogger_NotificationBar_wrap'>
<div class='twistBlogger_NotificationBar'>
  <input class='TwistBlogger_ShowHideButtonBar' id='tbn' type='checkbox'/>
  <label for='tbn'><i class='fa fa-chevron-circle-up'/></label>
  <div class='twisteBlogger_ContentArea'>
  <ul>
  <li>
<i class='fa fa-signal'/> Trending: <a href='#Your-Link1'>Floating Social Media Buttons Bar</a>
</li>
  <li>
<i class='fa fa-fire'/> Hot: <a href='#Your-Link2'>TwistBlogger | Blogger Tutorisls</a>
</li>
  <li>
<i class='fa fa-rss'/> Rss: <a href='#Your-Link3'> Subscribe to RSS </a>
</li>
</ul>
  </div>
</div>
</div>
Note: I have Highlighted above HTML code in different colors. You have to edit it according to your needs. So read below carefully to make changes easily on to your own demand.

Step 07: Now for last time, search for the ending </body> tag and just before that paste the JavaScript Code given below as it is. 
 <div id='twistBlogger_NotificationBar_wrap'>
<div class='twistBlogger_NotificationBar'>
  <input class='TwistBlogger_ShowHideButtonBar' id='tbn' type='checkbox'/>
  <label for='tbn'><i class='fa fa-chevron-circle-up'/></label>
  <div class='twisteBlogger_ContentArea'>
  <ul>
  <li>
<i class='fa fa-signal'/> Trending: <a href='#Your-Link1'>Floating Social Media Buttons Bar</a>
</li>
  <li>
<i class='fa fa-fire'/> Hot: <a href='#Your-Link2'>TwistBlogger | Blogger Tutorisls</a>
</li>
  <li>
<i class='fa fa-rss'/> Rss: <a href='#Your-Link3'>Subscribe to RSS</a>
</li>
</ul>
  </div>
</div>
</div>
Now Finally Save your Blogger Template and Click on to your Blog link and see your notification bar live. If you are facing any kind of problem or found any bug then please fell free to poke me and I'll do my best.

I Hope this article is really helpful for you if you like this article so please share it on Social Media with your Friends. Thanks for Reading my Article.!!!!!

Hello and Welcome to GetWebinfo.com. Here on this site you can be able to find out Latest Articles are about Blogger, SEO, AdSense, WordPress,. You can also be able to find out Latest Tips that can you really need one. You can also Download Premium themes free from this site.