Up next in 10
Enhance Your Blogger Blog with a Professional Hero Section
15K views
Jan 24, 2024
In this video tutorial, discover how to elevate the visual appeal of your Blogger blog by incorporating a professional hero section. Released with the latest insights, this tutorial guides users through the steps of enhancing the introductory section of their blog, creating an impactful and visually engaging hero area. Whether you're a blogger looking to make a memorable first impression or someone seeking to improve the overall aesthetics of your Blogger site, this video provides practical tips and clear instructions. Learn how to craft a professional hero section that captivates your audience and sets the tone for a compelling blogging experience.
View Video Transcript
0:00
Hi, welcome to K2 Blogging and in this video I will show you how you can add a hero section like this in your blogger website
0:07
So as you can see, I have recently added a hero section like this and here as you can see that there is a heading here and there is I have added a paragraph here and I have added to social follow links
0:18
So you can add a simple hero section like this and if I click on inspect here and it is fully responsive and here let me just change it to responsive here
0:28
And as you can see that, the text is increasing according to the site of this screen
0:34
And here, as you can see that, it is fully responsive. And user can easily follow you or subscribe you or you can also add different social media follow buttons here
0:43
So let's check how you can add this hero section in your blogger website
0:48
So for this, you need to log into your blogger dashboard. And then you can click on the layout section here
0:54
So here I'm using the Flitro Pro theme. So I have already made two videos on Filterro Pro Customizations
1:00
So you can get the link in the description. So here I can add the hero section here in this section, large content
1:08
So you can choose the hero section according to your layout of your website
1:12
So here in this case this large section will work as a hero section here
1:17
So this will show right above the all content like latest post and popular post
1:22
So what I can do is just click on here. This is a HTML slash JavaScript wizard
1:28
So I can paste my code here. So what I can do is just copy a code here like this
1:33
So what I can do let me just copy all code from here and I will paste the code here And let me just scroll up here and this is the hero section And this is the H2 tag here So you can change the H2 tag according to your website
1:49
And then you can change the paragraph here like let's make a profitable business
1:54
And then here you can see that this is the Twitter icon here and I have added the Twitter link here like this
2:00
And here this is the Twitter SVG code here. And this is the Twitter SVG code
2:06
SBG code and it is starting from SVG to closing SVG tag and then I have added this text
2:13
like Follow Us. So you can see Twitter icon follow us text and I have added the link at the top of this section
2:22
So if you want to add different social media icons here then you can simply go to our website
2:28
and click on SBG icons here. And here you can see different SBG icons from here
2:33
So you can just copy the SBG code of your social code. media icons
2:38
So suppose I want to add a WhatsApp button or let me just add a LinkedIn button here
2:44
So what I can do is double tap this LinkedIn here and it will copy to your clipboard
2:50
And then what I can do is just scroll up here and I will replace the SBG code from here
2:57
So let's change the SBG code here. And let me just change the follow us to something like LinkedIn
3:05
And here I can add my LinkedIn link here. So let's leave it for now
3:11
And as you can see, there is the second button YouTube and this is the YouTube link added here
3:16
And then you can change the text from here Now here you can change different elements like you can change the height and width of SBG code and here you can change the SBG icon color and change the height and width of the button
3:31
So you can change everything according to your choice and here you can change the width of the
3:37
hero section here and here you can assign the 300 pixel height
3:41
So let me just click on save here and show you different changes in this code
3:46
So let me just refresh this page and as you can see that this section. section is now added and we have changed the icon here LinkedIn so if you want to
3:55
change the width of this section then you can also do that so let's click on here
4:00
and let's scroll down to the bottom and here as you can see that the height is 300
4:06
pixels so let's change it to something like 400 pixel and let's click on save here
4:15
now let me just refresh this page and as you can see that this high
4:19
is now increased. So you can also add a background color here if you want
4:25
So if you want to add background color, then you can simply scroll down to the CSS code here
4:31
and here you can assign the background color here. So let's assign the background color here like background
4:41
Let's add something like gray background here. Now let's click on shape here
4:48
Now let's click and refresh. And as you can see that the grave background is added here so I don't want this background
4:57
color so let choose something different here and let choose some color like this So it is looking quite good and here you can change different elements like change the padding of this element like this
5:12
according to your choice. So let's adjust the padding from here. And here you can change the font family of this hero section
5:22
So I by default I have added the system UI font and if you want to use your own fund then you
5:27
can simply delete this font family section. So it will take up your theme font in the zero section
5:36
And here you can adjust different sections here. This is the inner sections here
5:40
And this is the H2 tag here. Here you can change the font size here
5:44
Let's increase the font to something like 25 pixel. And as you can see that the font is increased
5:52
And here you can adjust the margin from the top and bottom and left and right
5:56
Let's click on paragraph here and here you can change the font size. So let's here the font size is set to 20, 22
6:04
So let's change it to 20 pixel here like this. And here you can change the text alignment from here
6:10
You can change the font style here and this is the hero icons here and here you can see the
6:17
gap margin and justify. So it is added in the center. So you can if you want it then you can make it like left align or right align according
6:26
to your website. So I hope you got the idea how to add a hero section like this in your blogger website
6:35
And if you have any doubt regarding this, then you can ask me in the comment section
6:39
And if you found this video helpful, then make sure to hit the like button
6:43
And all the links of this code will be given in the description
6:47
So I will see you in the next video. Thank you
#Blogging Resources & Services
#Online Goodies
#Skins
# Themes & Wallpapers