0:00
Hello everyone, welcome to Kit Blogging and on this video I will show you how you can
0:03
add a notification bar at the top or at the bottom of your website
0:08
So notification bar help you increase your conversion to your important pages or you can
0:13
redirect your visitors to your social media accounts like Twitter, Telegram. So let's check how you can add the notification bar using the HTML CSS code
0:25
And before that, if you like this content, then make sure to hit the like button and if you
0:29
are new to this channel then consider subscribing to key to blogging for more upcoming videos
0:35
like this so let's start the video so for this you have to go to your blogger dashboard
0:48
and here click on theme section now before changing anything make sure to take backup
0:55
then click on edit HTML Now you have to scroll down to the bottom and search for closing body tag
1:04
Now you have to copy a code like this. So let me just copy the whole code from here and you will get the link in the description
1:13
So let me just paste it here. Now let's save this. Okay now the code is saved Let go to the website and let click on refresh As you can see the notification bar is shown at the top and you can also shift this notification
1:33
bar to the bottom. So before that let me just click on inspect element and here as you can see the notification
1:40
bar will look like this in mobile view. So let's just shift this notification bar to the bottom
1:47
So here I will click on this and I will change the top value to bottom
1:52
So I will change it to bottom. And let's click on okay and as you can see the notification bar is changed to bottom
2:03
So let me just copy this and let's go to the theme editor
2:09
Now let's scroll down to the code and let's search for that code top 0
2:15
So let's change the top value to bottom. Now click on save
2:19
Okay, now let's go to the website and let's click on Repress
2:26
And as you can see, now the notification bar is stick to the bottom
2:30
Now let's check how you can change the color. So you can change the background color
2:34
So let me just change it background color like this. And here you can also control the text color
2:42
So you can change the text color to your check color. choice and you can also change the border color so let me just change it to a black border like this Now let click on paragraph
2:55
And here you can adjust the font site. And you can also change the line height
3:01
Now let's click on button and here you can adjust the position
3:06
Now let's check how you can change this button and how you can change the text and the link
3:12
So for this let's go to the editor and let's scroll down
3:19
So this is the text that will shown in this notification bar and this is the text that will
3:25
shown in the button and here you can change the button link
3:30
So here I have added my Telegram group link. So if you want to stay updated then make sure to join our Telegram group and the link will
3:39
be given in the description. So you have to change the link and you have to change this text and the button text
3:48
Now to change the button color you have to search for this code
3:52
Key to Sticky PA. So this is the anchor text and here you can change the background color
3:59
So just change this to your own choice and the button color will be changed
4:04
Now let's add some effect like you can add a top right and top left border radius
4:10
So let me just remove this comment tag here and let me just save this
4:24
Now let's refresh this page and as you can see there is a border radius around the top
4:31
left and top right corner. So in this way you can also design this look and fill up your notification bar
4:39
And here by default the font style will add according to your theme font but if you want to add a specific
4:46
font to your text then you have to uncheck the comment tag
4:51
So let me just show you. So this is the font family. So you can change the font family like this
4:58
So here we have set the Ariel. So just remove this comment tag and you can add your own font
5:05
So let me just save this. Now let's refresh this. Now the font in the button will be changed
5:17
So in this way you can modify your notification bar. I hope this video help you add notification bar and if you have any doubt regarding this
5:38
will see you in the next video. Thank you
