[Applause] [Music] started right here I have logged into my blogger dashboard and let let's add this design to a post so let's click on new.
Post and uh let's add a title I'll just tap steps to use our product so you can add your own title over here and the next thing you need to do is change this into the HTML view so by default the.
Compos view will be selected so click on this button and click on HTML view now here you can add your HTML CSS and JavaScript code so first of all let's add the CSS I'll just create a style tag.
For that and uh let's go to our source code and I will leave the link of the source code in the description of this video so let's copy all the styles from here and.
Copy this JavaScript code from here and paste it inside the script tag right now let's go and paste the HTML so let let's go back to our source code let's go to the HTML file and let's copy this HTML.
From here this single line of HTML and with that we have added our code to this uh post right now the next thing we need to do is we need to update the links of the images so right now we.
Can see that the image URL is set to images for/ the image name and we don't have this image in our blogger website so first of all let's upload the image and then let's get the link and paste it.
Over here so let's go ahead and upload the images I'll just go ahead and click on this insert image button and let's click on upload from computer and here are the three images of our design let's.
Drag and drop them over here and here for the size I just select original size and let's click on okay and here we have all the images we need to get the links of the images so let's.
Posts Related:
- Infographic PowerPoint Slide Design Tutorial
- How to Clean Messy Data using Power BI Query Editor Example: Clean Names with Comma, Dash, Space
- Camtasia 2022 NEW Features Reveal
Copy this link from here it is inside
The SF attribute so let's copy the first one which is 5G and let's paste it over here and then we have the other image which is uh AI so let's copy this and.Let's paste it over here for AI and then lastly we have the image for Quantum Computing so let's copy this and let's paste it for this second image right.
Here and here we can see all the details of our design are displayed over here we have the title which is displayed over here and then we have the description and the image you URL so you can go and.
Change these to whatever you want and these numbers 1 2 and three are all generated automatically using this JavaScript code that we have over here so now let's go ahead and uh publish.
This post and here we can see our post was published let's click on view and this is how our post looks right now but we have these images displayed over here as.
Well so we need to go ahead and uh delete these images first of all we got the links so we don't need this anymore so we can delete this and let's update this let's go back and reload this.
Page and we have some problems in our styling so let's right click over here and go to inspect and here if you scroll down here we can see that we have this style word break set to break word in.
The theme itself so we need to reset that in our list style number so we need to type word break and we need to set it to normal and then we have some more style that is.
Hindering this uh element so here we can see we have the line height and it is set to 1.6 M we need to remove that as well so let's do that let's reset the line height so I'll just type line.
Height and I think the default is one I
Think we can increase the line height a little bit more so let's try 1 point five and that looks all right now we also need to change the color of this uh.Heading to Black so let's do all of that I'll just copy these two lines of CSS from here and let's go back and uh paste it for the number so here let's paste the.
CSS and we don't need these uh background URLs over here so we can just delete them we are doing it in the JavaScript and then for the S3 let's go ahead and set the color to Black and.
Let's update this let's go back and reload our page and now we can see everything looks all right so this is how the custom list looks let's also take a look at the.
Mobile version and this is how it will look on smaller screens and everything is working all right so that's basically how you can add this custom list to your blogger website all right so that's.
Basically 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.
