A notification bar is an effective way to draw your blog visitors' attention to important announcements, links, or offers.
It ensures that crucial information doesn't go unnoticed. While some bloggers use services like Hello Bar, they often come with their own branding, including a link back to their website.
In this tutorial, we will create a lightweight sticky notification bar for Blogger without any branding, designed with the help of CSS3, HTML, and JavaScript.
This is a JavaScript code provided by www.BloggerSentral.com
Features
1. Integration of FontAwesome Icons.
2. Clean and professional design.
3. Show/Hide button for the notification bar.
4. Easy customization of colors.
5. Simple setup.
6. Lightweight and fast-loading.
7. Stays at the top of the page as users scroll down.
8. Responsive made design .
Tutorial:
Step 1: Log in to Your Blogger Account
- Log in to your Blogger account.
- Select the blog where you want to add the notification bar.
- Go to "Template" and click "Edit HTML."
- Before making changes, save a backup of your template code.
Step 2: Integrate FontAwesome Icons and JavaScript Libraries
- Search for the `<head>` section in your template code.
- Just below it, paste the following line to include FontAwesome icons CSS:
<link href='http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>- Ensure the Google JQuery Library is included in your template. If not, add it:
Step 3: Add the CSS to Your Template
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>- Locate the `]]></b:skin>` code line.
- Just before it, paste the provided CSS code. You can customize the appearance by adjusting color values and styles as needed. Eish for easy customization the code is not minified.
/*--------------------------------------------------------------
Sticky Notification Bar For Blogger
Designed by: https://www.sdavidprince.space/
Sticky Code By: http://www.bloggersentral.com/
--------------------------------------------------------------*/
#sdp_NotificationBar_wrap {
margin: 0;
padding: 0;
position: relative;
width: 100%;
z-index: 9999999;
}
.sdp_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;
}
.sdp_NotificationBar label:hover {
cursor: pointer;
}
.sdp_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.sdp_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.sdp_ShowHideButtonBar ~ .sdp_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.sdp_ShowHideButtonBar:checked ~ .sdp_ContentArea {
margin-top: -50px;
}
input.sdp_ShowHideButtonBar {
display: none;
}
.sdp_ContentArea .fa {
font-size: 16px;
font-weight: normal;
color: #FFFFFF;
font-family: FontAwesome;
border-bottom: 1px solid #FFFFFF;
margin-right: 5px;
}
.sdp_ContentArea ul {
margin: 0;
padding: 0;
list-style: none;
list-style-type: none;
height: 100%;
}
.sdp_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;
}
.sdp_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;
}
.sdp_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) {
#sdp_NotificationBar_wrap, .sdp_NotificationBar {
display: none !important;
}
}
Step 4: Add the HTML Notification Bar
- Find the opening `<body>` tag.
- Below it, paste the HTML code for the notification bar. You can customize the content and links to your requirements.
<div id='sdp_NotificationBar_wrap'>
<div class='sdp_NotificationBar'>
<input class='sdp_ShowHideButtonBar' id='sdp-nb' type='checkbox'/>
<label for='sdp-nb'><i class='fa fa-chevron-circle-up'></i></label>
<div class='sdp_ContentArea'>
<ul>
<li><i class='fa fa-signal'></i> Trending: <a href='#Your-Link1'>Floating Social Media Buttons Bar</a></li>
<li><i class='fa fa-fire'></i> Hot: <a href='#Your-Link2'>SDavidPrince | Blogger Tutorials</a></li>
<li><i class='fa fa-rss'></i> Rss: <a href='#Your-Link3'>Subscribe to RSS</a></li>
</ul>
</div>
</div>
</div>
In the HTML part, make sure to replace "#Your-Link1", "#Your-Link2", and "#Your-Link3" with the actual links you want to use.
In nut-shell
<li> <Font Awesome Icon Code/> Text String: <a href='Your-Link'>Anchor Text For Link</a></li>
Step 5: Add the JavaScript Code for Sticky Behavior
- Search for the closing `</body>` tag.
- Just before it, paste the provided JavaScript code. This code makes the notification bar sticky as users scroll.
<script type="text/javascript">
// Sticky widget by Bloggersentral.com
// Tutorial at http://www.bloggersentral.com/2013/04/how-to-make-any-widget-sticky.html
// Shared By Sdavidprince.space
// Free to use or share, but please keep this notice intact.
//<![CDATA[
bs_makeSticky("sdp_NotificationBar_wrap"); // 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>Step 6: Save and Preview
<> Save your template.
<> Visit your blog to see the sticky notification bar in action at the top of the page.
That's it! You now have a stylish and functional sticky notification bar on your Blogger blog, ensuring that your important announcements and links get the attention they deserve.
If you encounter any issues or have questions, please don't hesitate to reach out for assistance. Yeah Members only!
