And javascript and here you can see we also have these hover effects for this sidebar and we also have this button over here to expand this and if i click on that.
We can see we have this full version of this sidebar and we can see that we have this label displayed over here in front of the icon and if i click on this button once again.
It goes back to the minimized version so if you want to learn how to design this from scratch you can watch my previous video i will leave the link in the description of this video and i will.
Also leave the link of the source code so you can just copy and paste the code so let's get started all right this is the blogger website.
Where we're gonna add the sidebar so let's go to the dashboard and if i go over here to theme you can see that i'm using this theme called notable light and it comes by.
And here we need to add the css the html and the javascript so let's go to the source code and this is the source code i will leave the link in the description of this video.
So first of all let's copy the css so i'll just copy everything from this line of code and let's go till the end over here and let's copy this and let's paste it.
Over here so let's scroll down and find the css so this is all the css of the theme let's go to the end so this is where the css ends so i'll just make some space over here and i'll.
Just create a comment let's start sidebar and let's just paste the css over here all right the css has been copied so let's go back to our source code and.
Let's go to the html and here we can see we are using font awesome icons so let's copy the link of font awesome from here and let's go back to our theme code and let's go to the top and here inside the.
Head tag we need to add the link of font Wesdigital
Awesome so i'll just paste it over here right now let's go back to our source code and let's copy all this html.So i'll just copy everything from here till the end over here and let's go to the end so here just before the body ends i'll.
Just make some space over here and let's paste the html and now we also need to add the javascript so let's create a script tag and let's go back to our source code and.
Let's go to the main.js file and i'll just copy everything from here and let's paste it over here right now let's save this and let's see whether it works.
All right now let's go back to our website and let's refresh this page and now you can see we have some problems in our css so let's see what's the problem so let's right click over here and let's.
Click on inspect now the problem is that there's already an element with a class of sidebar container so here we can see in our html.
We had given this a class of sidebar container so we have to change this to something else so let's go back to our theme code.
And let's scroll down and here in the html i'll just change this sidebar container to something else so just type my sidebar container and here in the javascript we need to.
Change this to my sidebar container so just type my and even here we need to type my sidebar container right now we need to change the class in.
Our css as well so let's scroll up
And let's go to the css and i'll just change all of this to my sidebar container and i'll just copy this and paste it.Everywhere else right i have renamed all the sidebar container to my sidebar container so let's save it and let's go back to our website and.
Let's refresh this page now here we can see that the sidebar is displayed over here but we still have some problems in the styling so let's right click over here and go to inspect.
And let's see what's the problem so let's go over here to menu items and here we can see for all these anchor tags we have a lot of height.
So let's scroll down and let's see what's the problem now here we can see in body we have a property called word break and it is set to break word so if i disable this we.
Can see everything works all right so we have to disable that for this sidebar so let's go over here to menu items and here i'll just type word break and set it to initial.
And now we can see we don't have any problems if we go back and if we enable this we still don't have any problems because it is disabled over here in the sidebar container.
So let's add this line of code to our menu items so i'll just copy this from here and let's go back to our code let's go to the css and let's go to the menu items.
And here we have the menu item so i'll just add the line of code over here by the way you can go ahead and change the details over here in the html so.
Here we can see we have these menu items and you can go ahead and change the icon you can go ahead and change the text and you can also add and remove menu items from here and then you can go ahead and.
Change this hash to whatever link you want to put over here so for example if you want to put the link of the homepage over here you can just copy the link of the homepage from here and just paste it.
Over here instead of this hash right now let's save this and let's go back to our web page and now you can see we don't have any problems everything is working all right if i click on this.
Button we have the extended view and everything works all right so that's basically how you add a sidebar to your blogger website now if you want to learn this from scratch you can watch my.
Previous video i will leave the link in the description of this video and i will also leave the link of the source code so that's it for this video if you have any doubts you can ask in the comments.
Below and if you like this video please click on the like button and subscribe to this channel to get the latest video updates thanks a lot for watching have a nice day.