0:00
Hi everyone, welcome to Key2Blogging and in this video, I will show you how can add a
0:04
previous and next button to your blogger website. So as you can see, when I click on the previous button, it will take me to the previous articles
0:13
And when I click on the next button, it will take me to the next article
0:18
So as you can see, I'm in the fifth article has five
0:21
So when I click on the next button, it will take me to the sixth article
0:26
And when I scroll down, there is no next button because this blog post or this website has
0:31
six blog posts, and you can easily preview go to the previous article like this
0:38
So let's take how can add a previous and next button to your blogger website and it is fully responsible
0:45
So let me just click on inspect element. And as you can see, this is how it looks in mobile devices
0:51
So let me just quickly remove it and show you how can add it to your blogger website
0:57
So let's get started. Okay, I have removed the previous and next button
1:12
So I can show you how can add it to this blogger template
1:15
And if you found this video helpful, then make sure to hit the like button
1:20
So first of all, we need to go to blogger dashboard and under the theme section, you
1:24
will see this option edit HTML. But before that take a backup so that you can easily restore if you do any mistake in
1:32
this process. So let me just click on edit HTML. So as this is a test blog, I don't need to back up the theme
1:40
But if you are using it in your live site, you must take a backup fast
1:46
Now you need to click on this button and search for block one
1:50
So just click on here. And here as you can see, this is the block one and then you need to find a code like this
1:58
So let me just copy this code data post body or you can also search for be include ID post
2:05
var equal to post. So let me just quickly copy it and I will type Ctrl plus F and search for this code
2:15
And you will see this code just after the block wizard. So let me just scroll down and search for this ID data post body
2:26
So I will hit enter here and I will copy the HTML code given here
2:32
So let me just quickly copy the HTML code and I will paste the HTML code here
2:38
Now I need to paste the CSS code. So let me just copy the CSS code from here
2:47
And I will just scroll off search for B skin tag, or you can also search for the CSS code
2:53
of your theme. And as you can see, these are the CSS code of this theme and I need to search for this
3:00
code B skin. So I will paste the CSS code here. Now let me just save the code
3:06
All right, guys, the code is now saved. So let me just go to the article and let me just refresh this page
3:15
And as you can see, the previous and next button is added to our blogger website
3:20
And let me just scroll off. And as you can see, this is the number four blog post
3:25
And when I click on the next button, it will take me to the number five blog post
3:31
And when I again click on the next button, it will take me to the number six post
3:37
And as this website has six blog posts, there is no next button, but you can see the previous buttons
3:44
So in this way, you can jump to previous and next articles using this button
3:50
So I hope this video helps you add a previous and next button to your blogger website
3:55
And if you found this video helpful, then make sure to hit the like button
3:58
It motivates me to make more such videos like this. And if you found our videos interesting, then you can also subscribe to our channel
4:08
And meanwhile, you can check out some related videos that will be given in the description
