We can see that the post is displayed over here and if you scroll down here we need to add a next and previous button so here we'll have a previous button and here we will.
Have a next button and if the visitors click on the previous button they'll be taken to the previous post and if they click on the next button they'll be taken to the next post so.
This is what we're going to do in this video and this is going to be our design so here we have the previous button and here we have the next button we also have this.
Simple animation for these icons alright so let's get started now to add some additional information.
To your blogger website you have to edit the html of the theme so if you go to the blogger dashboard and if i click on theme here we can see we are using this theme called contempo.
Here but first of all let's design this now the blogger code editor is not that good so we will design this in vs code and then we will just copy and paste the code to a blogger website right here i.
Have created this folder called navigation buttons and i just opened it with vs code now let's go ahead and create the necessary files so let's click on new.
File and let's create an html file i'll just name it index.html and let's also create a css file i'll just name it style.css let's start with the index.html file.
And in vs code you have the shortcut where you can just press exclamation and press tab and you'll have this basic html5 code and let's link our css file over here so.
I'll just type link and in the edit file just tap style or css right now let's start with the markup of these buttons now let's create a container division for both these buttons so let's create a.
Division with the class of nav buttons Wesdigital
Container and in that we will have anchor tags for these buttons because they are links basically so when we click on these buttons we need to go to.A certain page so let's create an anchor tag and for now i'll just type hash over here and we'll also give it a class so let's type class and let's give it a class of previous button.
Now in the anchor tag we need to have this icon and this text so first of all let's create a division of the class of icon and in this we will add the icon so i'll.
Just get the icon from heroicons.com right so here i'm in heroicons.com and let's search for left and we have a lot of icons over here let's copy this one right here chevron.
Double left so let's click on copy svg and let's paste it over here and the next thing we need to have is this text called previous and for that let's create a division of the.
Class of label and here let's type previous now for the next button let's create one more anchor tag and let's give it a class of next button.
And here the first thing we need to have is this text so let's create a division of the class of label and let's type next over here and then we need to have the icon so let's create.
A division of the class of icon and let's copy the next icon from here so let's go back to hero icons and here let's type right and let's copy this chevron double right.
And let's paste it over here all right so that's basically it with the html of our design now let's open this in our browser so i have this extension called live server in vs code.
So you can just install this extension
And now you can just right click over here on the html and click on open with live server and here we can see that our design is.Opened in the browser now let's style this using css so we have already linked our css file over here so let's go to style.css file right now.
The first thing we will do is we will decrease the height and width of these icons so let's go back to our index.html file and the icons have a division with the class of icon which are inside.
The nav buttons container division so let's go back to our css and let's type nav buttons container and in that we have the icons so let's type icon over here.
And let's set the width and height to 20 pixels right now the next thing we need to have is we need to have both these elements one next to the other.
So let's set a display of flex so let's tap nav buttons container display of flex now even for these buttons we need to set the display to flex so that the.
Icons are next to the text now for the buttons we have a class of previous button and next button so let's target them so let's tap nav buttons container.
Previous button and let's also target nav buttons container next button and let's set the display to flex.
And let's also set the align items to center so that everything is vertically centered now we will have a little bit of gap between this icon and this text so let's.
Set a gap of 8 pixels and let's set the font family to roboto and we'll also add a background color so we'll set the background color to zero two three zero four seven.
And let's set the color of the text to white and we'll also remove the underline so let's type text decoration and set it to none and let's add a padding and let's.
Set it to 8 pixels top and bottom and 24 pixels left and right and we'll set the font size to 16 pixels right now the next thing we need to do is we need to have this previous button.
On the left and the next button on the extreme right now if you go back over here to the nav buttons container we can see that we have set a display of flex.
And if i just type justify content and set it to space between we can see that the correct positioning is added to both these buttons but if you go back to the index.html file and.
If i just comment this previous button over here now we can see that the next button is on the left now we don't want this to happen we want the next button to be.
Always on the right so let's go back and let's remove this line of code and here for the nav buttons container let's set a position of relative and for the next button let's set the position.
To the right so let's tap nav buttons container next button and let's set the position to absolute and we'll set the right position to zero.
And now we can see that the next button is on the right and now if you go back to the html and if i just comment this previous button we can see that the next button is still.
On the right right now let's go back and let's also set a min width for these buttons so let's type min width and let's set it to 100 pixels and i will also bring it to the center.
So here i'll just type justify content and center right now the last thing we need to do is add the animation for these hover.
Effects so here we can see we have these animations for the icons so for that let's type now buttons container previous button.
Colon hover icon so when we hover over the previous button we will have the animation set to the icon so we'll create an animation called nav anim.
So let's type animation and we will name it nav anim and let's set the duration to 300 milliseconds and we'll set it to alternate and infinite.
Right now let's create this animation now to create the animation you have to type at keyframes and you have to type the name of the animation so we have named it nav.
And we have to add the keyframes over here now the first frame is already over here the default one now let's add the last frame over here so we can just type hundred percent.
Or you can also type two and here we need to move the icon to the right and to the left so let's type transform translate x and let's set it to four pixels.
Right now let's hover over this button and we can see that we have the animation for the previous button and now for the next button we need to add a different animation so.
Let me just show you what happens if i just add the same animation so here if i just type nav buttons container next button colon hover icon now if you hover over this we can see that the icon.
Moves to the right but here we can see the icon moves to the left so we need to have a different animation for the next button so let's cut this from here.