How to create table in blogger post

How to create table in blogger post


Hi, I will teach you in this article as well as video, I will show you how to design a table of contents for posts on the Blogger website. We will be using HTML and CSS for designing this table of contents.


Design a Table in the Blogger Website

How to create a table of contents in blogger website


Welcome to my blog DailyPluz in this Article I'll show you how to create this table of contents for your blogger website so whenever you click on any of these links for example if you click on pros we can see that we get taken to the pros heading over here and in the same way if we click on any other section you get taken to that section so this is what we're gonna design in this video and we'll be adding this to our blogger website and I'll show you how to create a post with table of contents for your blog or website so let's get started so I opened this empty project envious code so let's create new file and we'll name it index dot HTML and we'll create one more file and we'll name it style dot CSS alright let's start with the index dot HTML file and we'll type exclamation tab for this html5 boilerplate and we'll also link our CSS file over here right now for the table of contents, we will have a wrapper division called TOC container so I'll type TOC container and in that will have an h2 with a class of index heading and here we will type table of contents let's open this with live server all right now you create an unordered list and we'll give you the class of the table of contents and that will create a list item and we'll create an anchor tag and then


Click on the Videos for more details


Headings


We will add our headings over here so you have to add all the headings that you have in your post to these list items over here so for this example we will have five headings introduction features pros cons and conclusion so let's add those list items I just copy this four more times that's it with our table of contents now let's create a division for the content will not be copying this division to our blog our website will be just using this to test this design that we have over here in our blogger website we'll be creating an actual post and then we will add this TOC container division to that all right so let's create this division with a class of content and we'll have these headings and a paragraph so let's do that now for each of the headings we have to provide an ID so for this we'll give an ID of introduction and then we'll create a paragraph now let's copy this and we'll paste it below that and for the second one we will have the heading as features and we'll also change the ID to features and next we have pros and then we have cons and lastly we have concluded all right we have our headings and paragraphs in place now let's link these items to these sections so since we have given IDs to each of these headings we can access that over here so in the SF attribute of our anchor tag we have to provide the name of the ID so here we can type hash introduction and now if you click on introduction we get taken to that section over here so in the same way we can do this for all our anchor tags all right now when we click on any of these we get taken to those sections now let's style this so we'll go to a style of CSS file and first of all, we'll target the body tag and we'll give it a font family of Roboto and we'll also styles the content so for that we'll give a padding of 8 pixels and a line-height of 1.9 now that's it with our basic styling we'll be copying the following code to our blogger website so first of all we will set the scroll behavior to smooth so we'll target the HTML tag and we'll tab scroll behavior and we'll set it to smooth so now when we click on any of these we get taken to that section smoothly now we'll target the TOC container and we'll set maximum width of 600 pixels and we'll also set a font family of Roboto that's because we are not going to copy these lines of code so we have to set the font family over here as well and then we'll give it a background color of de f f9 d and we'll also give it a border-radius of 8 pixels and padding of sixteen pixels zero zero zero and we'll also give it a box shadow of zero four pixels 11 pixels rgba 0 0 0 and 0.6 or I knowledge styled the index heading so I will type toc container h2 dot index heading and we'll set the text-transform to uppercase and font-weight to normal and margin to 0 16 pixels right now let's style the table of contents unordered list and we'll say the list style to none and also set the padding to zero


Inside the table of contents

Inside the table of contents


Now I'll target the least items inside the table of contents and they will give it a background color of dark grey and will also set a transition of 400 milliseconds this is for the smooth animation when we hover so when we hover over these items we can see the color change now let's style the anchor tags inside the table of contents first of all we'll remove the underlines and then we'll set the color to white we'll also set the margin-left to 24 pixels and padding of 16 pixels and 0 and for this, to work we have to set the display to block now let's say different colors to alternate list items
so here we'll type table of contents li colin end of type and here we'll type even so this will target all the even number of list items so it will target the second item 4th 6th and so on so for the even items we'll give a background color of Tooey Tooey Tooey now lastly let's also set a hover color so I will type table of contents Li hover and we'll set the background color to 0 0 0 so we can see that the hover is working and also our table of contents is working now it's time for us to copy this to our blogger website Here I am in the dashboard of our blogger website so let's go to theme and click on customize now click on advanced and go to add CSS will paste our CSS right here so we'll just copy everything from here and we'll paste it right here and then click on apply to the blog now let's go back to blogger now let's add a new post so we'll click on post and click on new post and we just type a title over here so I'll just type review and let's click on compose and that will add our post right here so first of all, we want a heading and it will be an introduction and we'll copy some dummy text over here so just click on generate and we'll just copy this dummy text from here now we'll add another heading so features and you can add whatever heading you want over here so the next one we will add is specifications and the next one we will have pros and cons and then lastly let's have the conclusion that's it with our post now before adding the table of contents let's add IDs to all these headings so we'll go to HTML and for all these headings we have to give an ID so for the introduction heading.

ID of features in blogger

Click on the Videos for more details




ID of features


We will give an ID of introduction and in the same way we will give the appropriate IDs to each of these headings so for this we'll give an ID of features here we'll set the ID to specifications then here we have pros and cons and lastly here we have concluded all right now we are done with the IDs now let's go ahead and copy our table of contents so nowhere we have to make some changes so we had changed the headings so here we have introduction and then we have features and the next one we have is specifications and we'll change the ID over here as well and then we have pros and cons and we'll change the ID over here and the conclusion is the same so let's copy this whole division from here and we'll paste it just before the heading now let's click on publish our post has been published now let's view the post and see whether everything is working all right so here we can see we have this table of contents so let's click on specifications and we can see that we get taken to that section over here let's click on conclusion and we get taken to conclusion so this is basically how you create a table of contents for your blogger website if you have any doubts you can ask in the comments below thanks for visiting my site have a nice day. bye

Post a Comment

0 Comments