0:00
Hi, welcome to K2 blogging and in this video I will show you how you can create a section
0:04
like this in your blogger website. So here we are going to use the HTML and CSS to create a box like this
0:11
So let me just go to the blogger dashboard and let's click on new post
0:16
And by the way, if you found this video helpful, then make sure to hit the like button
0:21
So here I will switch to the HTML view here and I can name the title here and let me just
0:26
copy a block of text so then we can create that box
0:30
So I can simply search for SEO. Now I will copy a text here
0:36
So I will copy this here and I will go to post editor and I will add the deep class
0:42
here and I will add the text and I will close the deep class and I will add a inline style
0:50
tag here. So I will type like style equal to and I will add padding
0:59
So let's add the padding from top to 20 pixels and in the right and left I will add something
1:08
like 25 pixels and 20 pixels. Now let's add a background color here
1:16
So I will choose the background color from here. Now let's add the background and let's add the color here and let's close this double quote
1:35
Now let's publish this and check how it looks. Okay now it is looking like this
1:43
So we need to add a left border to show this type of section
1:49
So what I can do is I will open it and I will add a value like border left
2:00
Let's add the border left to 2px solid and I will copy this color
2:12
And I will paste it here. Now let me just update this
2:18
Let's refresh this page. So we need to add the width. So let's add something like 5px
2:29
Let's update it and let's refresh it. And as you can see that our section is ready
2:36
And this is how you can create a note block like this using HTML and CSS in your blogger website
2:41
You can also use it in WordPress, but in WordPress, it is very easy to create a box like that
2:47
So in blogger, we need to use the HTML and CSS. And if you don't want to add the style tag again and again, you can add a class here
2:56
So let me just simply copy the value from here. And let me just change the style to class
3:06
And I will add a class like box 1, 2 and I will add a class here
3:14
Class equal to and I can add the style tag here and I will target the class box 12
3:26
Let's add the property and let's close it here. Now let's close the style tag here
3:34
Now let's update it. And if I want to add multiple box in the same page, then all I have to do is just add
3:41
the class. So let me just add a paragraph here. So I will copy this here
3:48
And I will create a new div class. Now all I need to do is just add the class
3:57
You don't have to paste the style tag every time. So you just need to add the class here
4:03
Now let's update it. Let me just add some br tag here
4:08
So it will separate from each other. So let's update it and let me just refresh it
4:15
And as you can see that the same styling is added in both blocks
4:20
So you can just use this CSS code in your theme code and you can just add the class
4:26
box 12 and it will add the node block like that. So this is how simple it is to create a node block like this in your blog or website
4:35
So if you found this video helpful, then make sure to hit the like button and I will
4:39
see you in the next video. Thank you
