Up next in 10
How to Add Floating Notification bar in Blogger (Updated)
7K views
Jan 24, 2024
In this updated tutorial video, viewers will be taken through the process of adding a floating notification bar in Blogger. Released in 2023, the content provides the latest insights and step-by-step instructions on incorporating this dynamic feature to enhance user engagement on a Blogger website. Whether you're a blogger, content creator, or website owner looking to convey important messages or promotions, this tutorial offers practical guidance and clear demonstrations. Learn how to seamlessly add a floating notification bar to your Blogger site, keeping your audience informed and engaged as they navigate through your content.
View Video Transcript
0:00
Hi everyone, welcome to Key2Blogging
0:02
My name is Abhishek Padi and in this video, I'm going to show you how you can add a
0:05
stylus floating notification bar in your blogger website. So I made a video around this topic about a year ago
0:12
So here it is an updated video on this topic. So let's check how you can add this notification bar to your blogger website
0:20
And by the way, if you found this video helpful, then make sure to hit the like button
0:25
So let's go to the blogger dashboard here and under the theme, you need to click on
0:29
this drop down menu and here make sure to take a backup of your theme first and then
0:35
click on edit HTML. And then you have to scroll down all the way to the bottom and search for the closing body tag
0:43
Now you need to paste a code like this. So what I can do is just control plus all and copy all the codes from here and I will
0:51
paste it just above the closing body tag. And here I need to change something in the HTML code
0:59
First of all, we can change the text here like new feature available here and you can
1:03
change the button text to learn more or something. And then we can add the link here
1:10
So let's say we can add the link to our website here
1:17
And as you can see that I have added the YouTube blogging link here
1:21
And if I want to open this link in a new tab, then I can set a property here, target equal
1:28
to in double quote, you have to add underscore blank so that it will open this link in a
1:33
new tab. So let's save this code and let's check how this notification button or notification bar
1:42
swing in blogger website. So let's go to the website and let me just refresh this page
1:47
I think we need to close the cookies because I have already used this before
1:53
So let me just reload this and as you can see that the notification bar is showing like
1:57
this and let me just open a another blog post here. And as you can see that it is still swinging, but if I click on this close button, it will
2:09
not show again. So let me just click on learn more here
2:14
And as you can see that it has opened that link in a new tab
2:18
So you can easily add your promotional material in this notification bar, like you can announce
2:24
a new feature of your tools or websites, or you can redirect to a social media sites or
2:30
YouTube something like that. And once the user click on the close button, it will not show again for the next 30 days
2:38
And if you clear the cookies, then it will again show the notification bar
2:43
So let me just remove these cookies for this website and let me just reload this
2:50
And as you can see that this notification bar is again showing
2:54
So once the user click on the close button, it will gone for 30 days and you can control
3:00
that number of days from here. So as you can see that by default, it is set to 30 days and if you want to remove this
3:08
for next seven days, then you can put it like seven days
3:12
And it will not show the pop-up for the next seven days
3:17
So in this way, you can add a notification bar to your blog or website and you can further
3:22
customize the look and feel of this notification bar. So let me just quickly inspect this element here
3:29
And as you can see that this is the notification pop-up. So you can change the background color from here like this
3:35
So by default it is set to white here and you can also change the border bottom color here
3:42
So if you want to add a red border in the bottom, so you can change that as well like this
3:49
And you can also change the border bottom width like this. So by default it is set to five pixels and you can change the padding here as well
4:00
Now let's click on the second element notification content. So if you close this, as you can see that this showing way, there is a lot of space
4:10
between these two elements. So you can control this by changing a value here
4:16
So let's click on the notification content here. And as you can see that the justify content is space between
4:22
So you can change this to something like center here. So you can change the justify content to center here
4:31
And you can add the align item to center. And as you can see that it is now aligned to center
4:38
So we need to add a little bit of spacing before this button
4:44
So what I can do is click on inspect again and I will select this notification description
4:51
here and I can add a margin right. Let's add a 20 pixel margin right
5:02
As you can see that now it is looking quite good and it is aligned to center
5:06
And you can also further customize it like you can set the notification content here
5:12
So it will select the both element and you can change the flex to something like space
5:19
between or you can space around like this and it will show like this
5:24
So you can basically change everything in this notification bar and you can also change
5:29
the color of this button as well. So just change the background color here notification button
5:35
So you can basically change everything in this CSS here. As you can see that this is the notification button
5:42
So you can change the background color for this notification button here
5:46
And here you can change the notification description. This is the text. So you can change the font size, you can change the color of that text
5:54
You can change the justify content to space between or center like that
5:59
And if you want to add a right margin, then you can add a value like margin right to 20
6:09
pixel like this and you can change the background color from here like this
6:16
So let's change the background color of the button to red to match our look in the website
6:24
And here you can also play around this padding in the button
6:28
So let's increase the 16 pixel to something like 20 pixel or let's say 25 pixel
6:38
And you can see that button is looking quite good now. So in this way, you can further customize this notification bar
6:44
And once you click on the close button, it will not show it again for the next seven
6:48
days because we have set the days to seven here. So you can see this line, you can set the values here in this JavaScript
6:59
So I hope you have understand how to use this notification pop-up in your blogger website
7:04
how you can add the link, how you can change the values of the CSS section to match the
7:10
look of your website. And if you found this video helpful, then make sure to hit the like button
7:15
It motivates me to make more videos like this and you will get the download link in the description
7:23
So make sure to check it out and I will see you in the next video. Thank you
#Skins
# Themes & Wallpapers