Jul 23, 2016

Add Sticky Notification Bar to Blogger with Show/Hide Button

data:blog.title
You must have seen many websites or blogs use this kind of sticky notification bar to display the important announcements or events on their blogs, so that their readers do not skip any important information. It shows manually specified links, so you can add or remove links to it according to your needs and the notification bar scrolls down to the page as a sticky notify bar on the top of the blog page so that any visitor can't really miss it.

Sticky Notification Bar for BloggerNotification bar widget is one of the most popular blogger widgets. It also helps in boosting your 
blog’s traffic by increasing the number of page views of your blog. This bar grabs the attention of visitors very strongly and thus helps in reducing bounce rate of your blog. You might have seen some pro bloggers using Hello Bar on their blog where they showcase some links of upcoming events or to download some ebooks or even a simple subscription box.

If you are blogger user then you must have hear about a well known Pro Blogger +Mohammad Mustafa Ahmedzai of MyBloggerTricks has changed the way the blogger platform used to be and left a benchmark by devloping the amazing widgets, shortcodes and templates.

Recommended Blogger Widgets:

  1. WordPress Like Social Sharing Widget for Blogger.
  2. Cute & Stylish Popup email Subscription Box for Blogger.
  3. Stylish Contact Us Form for Blogger! Add to Static Page.
  4. AllInOne Admin Bio Box with Social Buttons and Subscription box.
  5. Responsive Subscription Box for Blogger Post's Footer.

Notification Bar with Hide and Show Button is also one of those widgets which has released by Mohammad bro so far. Although the only demerit of this widget is MBT watermark with a link back to the blog. You had two choices, one to go with as it is and second if you want to remove the watermark, go with the pro version of that widget.

That's Why, today we're going to releasing a notification bar designed with the help of CSS and HTML. We have used the JavaScript too, but its purpose is just to make it sticky.We don't need any backlink so it's totally yours as it is. We have not add any backlink to this widget. :)

Now, We are going to share screenshot demo and a live demo link of this widget.

Stylish Sticky Notification Bar for Blogger


Live Demo

We hope you like this sticky notify bar which you have seen from above screenshot and live demo link. We hope now you are going to add it on your blog. To add this sticky notification bar to your Blogger blog, follow below instructions, but before adding it must know some good features of this widget.

Features of Notification Bar

  1. Stylish Design.
  2. Neat and clean.
  3. Light Weighted, Load Very Fast.
  4. Show and Hide Button.
  5. Integration of FontAwesome Icons to make it Professional.
  6. Easy Customization of Colors.
  7. Sticky, Stays on the top of the page even the users scrolls down the page.
  8. Responsive design and its not appear on mobile devices.

How To Add Sticky Notification Bar to Blogger?

Note1: Before adding it on blogger Download a backup copy of your blogger template.

Note2: Credit: The JavaScript Code We are using in this widget for making it sticky is devloped by BloggerSentral.com

Note3: You Don't have permission to Copy and Paste my Code in any condition or changing the class names. We have not include any backlink, but you are required to credit given to developer in CSS classes. They don't harm in any case. Respect the copyrights and hard works of developers.

Now, Follow below guide carefully if you want to add it on your blogger blog without facing any bug.

Step1] Go To Blogger >>  Tmplate >> Edit HTML.

Step2] Click inside code are and Search for <head> tag and paste below code just below of <head> tag.

<link href='http://netdna.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.css' rel='stylesheet'/>
Step4] If Google JavaScript Library not added on your blogger template then also add it just below of <head> tag and if it has already added on your template then skip this step.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>

Step5] Now Search for ]]></b:skin> tag and Paste following CSS code just above of it.
//****************************************//
Sticky Notification Bar For Blogger
Designed by: http://www.mybloggerguides.com/
Sticky .js By: http://www.bloggersentral.com/
//****************************************//
#MBG-Blogger_NotificationBar_wrap {
background:#FF0066;
margin:0;
padding:0;
position:relative;
width:100%;
z-index:9999999;
}
.MBG-Blogger_NotificationBar {
color: #fff;
position: relative;
background: #111; /*--Change Background Color Here--*/
width: 99.9%;
padding: 0;
text-align: center;
font-family: Arial Black, sans-serif;
text-shadow: 0px -1px 0px #000;
height: 45px;

border-radius:170px 0px 170px 0px;
  border-bottom:5px solid #FF0066;
 
}
.MBG-Blogger_NotificationBar label:hover {
cursor: pointer;
}
.MBG-Blogger_NotificationBar label {
text-align: center;
background: #8FF; /*--Change Button Background Color Here--*/
color: #111;
border: 0;
font-family: fontawesome;
text-shadow: 0px -1px 0px #8FF;
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: 35px;
overflow: hidden !important;
z-index: 9999;
padding-top: 5px;
margin-right:5px;
border-radius:0px 0px 35px 35px;
}
input.MBG-Blogger_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.MBG-Blogger_ShowHideButtonBar ~ .MBG-Blogger_ContentArea {
  position: relative;
overflow: hidden;
height: 40px;
margin-left:15px;
  border-top:5px solid #FF0066;
-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.MBG-Blogger_ShowHideButtonBar:checked ~ .MBG-Blogger_ContentArea {
margin-top: -55px;
}
input.MBG-Blogger_ShowHideButtonBar {
display: none;
}
/*--Change FontAwesome Icons Style Here--*/
.MBG-Blogger_ContentArea .fa {
font-size: 16px;
font-weight: normal;
color: #ff0066;
font-family: FontAwesome;
border-bottom: 1px solid #FF0066;
margin-right: 5px;
}
.MBG-Blogger_ContentArea ul {
margin: 0;
padding: 0;
list-style: none;
list-style-type: none;
height: 100%;
}
.MBG-Blogger_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;
}
.MBG-Blogger_ContentArea ul > li > a {
color: #8ff;   /*--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;
}
.MBG-Blogger_ContentArea ul > li > a:hover {
color: #8fa !important;  /*--Change Links Hover Color Here--*/
}
.bs_sticking {
position:fixed !important;
width: 100% !important;
}
@media only screen and (max-width:479px) {
#MBG-Blogger_NotificationBar_wrap, .MBG-Blogger_NotificationBar {
display: none !important;
}
}

Step6] Now Search for </body> tag and paste following JavaScript code to just above of </body> tag.
<script type='text/javascript'>
// Sticky widget by Bloggersentral.com
// Tutorial at http://www.bloggersentral.com/2013/04/how-to-make-any-widget-sticky.html
// Free to use or share, but please keep this notice intact.
//<![CDATA[
bs_makeSticky("MBG-Blogger_NotificationBar_wrap1"); // enter your widget ID here
function bs_makeSticky(elem) {
    var bs_sticky = document.getElementById(elem);
    var scrollee = document.createElement("div");
    bs_sticky.parentNode.insertBefore(scrollee, bs_sticky);
    var iniClass = bs_sticky.className + ' bs_sticky';
    window.addEventListener('scroll', bs_sticking, false);
    function bs_sticking() {
        var rect = scrollee.getBoundingClientRect();
        if (rect.top < 0) {
            bs_sticky.className = iniClass + ' bs_sticking';
            bs_sticky.style.width = "100%";
        } else {
            bs_sticky.className = iniClass;
        }
    }
}
//]]>
</script>

Step7] Now Search for <body> tag and paste following HTML code just below of <body> tag.
<div id='MBG-Blogger_NotificationBar_wrap1'>
<div id='MBG-Blogger_NotificationBar_wrap'>
<div class='MBG-Blogger_NotificationBar'>
  <input class='MBG-Blogger_ShowHideButtonBar' id='mbg' type='checkbox'/>
  <label for='mbg'><i class='fa fa-chevron-circle-up'/></label>
  <div class='MBG-Blogger_ContentArea'>
  <ul>
  <li>
    <i class='fa fa-signal'> Trending:</i> <a href='#Your-Link1'>Popup Blogger Subscription Box</a>
</li>
  <li>
    <i class='fa fa-fire'> Hot: </i> <a href='#You-Link2'>Stylish Blogger Contact Form</a>
</li>
  <li><i class='fa fa-home'> Home: </i> <a href='#Your-Link3'>Go To Home</a>
</li></ul></div></div> </div></div>

Required Editing:

Step8] We have highlighted the above HTML Code with different colors. Now, You have to edit it according to your needs. So, Read below carefully to make changes without any bug.
 

This Color - Code of your FontAwesome Icons.

This Color - Text String which appears just before the links.

This Color - Change the link.

This Color - Anchor Text for The Link.

How To Add More Links To The Notify Bar?

 Add below Code Before the </ul> code in HTML Part.
<li> <Font Awesome Icon Code> Text String:<i> <a href='#Your-Link'>Anchor Text For Link</a></li>

Step9] Now, Finally save your template. Open your Blog to see it live hanging on the top of the your blogger blog.

Do you have any suggestion for its improvement? Do you want any other feature to be added in this sticky bar? Your opinions are always welcome.

Our Recommended Blogger Widgets

  1. WordPress Like Floating Social Sharing Widget for Blogger with Counter.
  2. AllInOne Admin Box Widget with Social buttons and Subscription Box.
  3. Add Sticky Notification Bar To Blogger with Show/Hide Button.
  4. Stylish Contact Form For Blogger! Add to Static Page, Responsive & Pro Version.
  5. Cute & Stylish Email Popup Subscription Widget.

Conclusion:

So above guide is about How To Add Sticky Notification Bar to Blogger with Show/Hide Button? If you are facing any problem after following all steps then drop a comment below or contact us via contact us page. Definitely , We will help you. You can Share, Subscribe and Follow Us ON Facebook, Just Reminding. :) Thank You! Stay Blessed!

No comments:

Post a Comment

We’re eager to see your comment. If you have any query related to the topic then drop a comment below. We will help you out of sure. However, Please Keep in mind that all comments are moderated manually by our human reviewers. According to our comment policy all link are nofollow so keep in mind that never use links in comments, we consider link comments as a spam.