Decrease the width of the browser window this is how it will look on a tablet and if i decrease it even more this is how it will look on a smartphone so this is what we're going to add in.
Our blogger website now i will leave the link of the design video in the description below where i have shown you how to design these tabs from scratch using html css and javascript and i will.
Also leave the link of the source code in the description so you can just go ahead and copy and paste the code to your website alright so let's get started.
[Applause] right here i'm in the dashboard of my blogger website now you can add this design into a post or a page i just.
Is go into the html view so first of all you have to click on this button and click on html view by default it will be in the compose view so once you have gone into the html.
View you can go ahead and add the html css and javascript over here so let's add our code in this post first of all let's add the css so i'll just create a style tag.
And in this we will add the css so let's go to the source code and let's go to the style.css file and let's copy all these css from here now.
Here we can see we have added some styles to the body as well that's because we wanted this design to be in the center of the screen so for the blogger website we'll just.
Copy from this line of code so let's select from here till the end and let's copy all of this to our post so i'll just paste it over here inside.
Posts Related:
The style tag
And after that let's paste the html so let's go outside the style tag and let's go back to our source code and let's go to the html file.And let's copy all this html from here so let's start from here and we'll go all the way till this line of code over here and let's copy all of this html and paste it over.
Here now here we can see in our html we have all the content of the tabs so you can go ahead and make the customizations over here so this is the icon so if you want to change the icon you can just add.
Your svg over here and this is the text of the heading so here we have bookmarks so this is the heading and these are the three tabs.
And then after that we have the content so we have this heading over here this is this heading right here and then we have the content you can just change the content to whatever you.
Want you can also add images like we did over here if you scroll down this is the second content and here you can see we have added the image over here and in the same way you.
Have the third content over here so you can make customizations as you wish now the last thing we need to do is add the javascript so let's go back to our post.
And let's create a script tag for that and in the script tag we will add the javascript so let's go back to our source code and let's go to the main.js file and let's.
Copy all this javascript from here and let's paste it over here inside the script tag now the last thing we need to do is change the url of the image so right now.
The image url is set to images forward
Slash analytics.jpg so we don't have this folder called images in our blogger website so we have to first of all upload the image.Somewhere and get the link and paste it over here so i'll just upload the link over here i'll just make some space over here and let's click on this button called insert.
Image and let's click on upload from computer and let's click on choose files and here we have the image so let's select the image and let's click on open.
And let's select the image and let's click on select and i'll just select the original size and let's click on ok now here we have the.
Code for the image now let's copy the link of the image so here we have the anchor tag and in that we have the href attribute here we have the link of the image so i'll just copy this link from.
Here and let's paste it over here instead of this link and now you can go ahead and delete this code from here.
Right that's it with our post so let's click on publish and confirm and here we can see our post has been published let's click on view and let's.
See whether everything works all right so if you scroll down we can see that we have the tab displayed over here and if i click on the next tab we have the content of the next tab.
Displayed over here and then we have the third tab so everything is working all right let's take a look at the responsiveness so let's decrease the width of the browser.
Window and we can see that it works all right we don't have any problems all right so that's basically how you can add tabs designed to your blogger.
Website and that's it for this video i will leave the link of the source code in the description and 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 [Music].