Up next in 10
Customize Footer In Blogger _ Fletro Pro Theme Customization (Part - 04)
2K views
Jan 24, 2024
In this instructional video, viewers will dive into the process of customizing the footer in Blogger, specifically focusing on the Fletro Pro Theme. Released as part of a series in 2023, this tutorial provides a detailed walkthrough, guiding users through the steps to personalize and enhance the footer section of their Blogger websites. Whether you're a blogger aiming to give your site a unique look or someone interested in theme customization, this video offers practical insights and tips. Follow along with Part 4 of this series to gain valuable skills in tailoring the Fletro Pro Theme's footer to your preferences and requirements.
View Video Transcript
0:00
Hi everyone, welcome to KeyTube blogging and in this video, I will show you how you can
0:03
customize your footer section in Flutter Pro theme. So this is going to be the fourth part of the Flutter Pro theme customization series
0:12
and I will be covering how you can customize your footer section in Flutter Pro theme
0:17
So as you can see, I have customized something like this. I've changed the background color here and I've added a description here and I've added
0:25
a verified tick mark here. So how you can do that in your theme as well
0:30
So let's start the video. So I have already made a video on how to add a verified tick mark in your footer section
0:38
So you can check this video how to add a verified tick mark in footer copyright section
0:43
So you can follow that video to add a verified tick mark in your blog or website
0:48
So all you have to do is just add SVG code in your footer section and change some CSS
0:54
settings to make it fit properly in the footer sections. So that is what I covered in that video
1:00
So let's start by changing the footer background color here. So if you want to change the footer background color in Flutter Pro theme, then all you have
1:09
to do is just go to the theme section here and click on the customize button
1:14
So you can easily change the background of your footer just by clicking on the advanced
1:18
button here. And under the advanced, you have to select the footer color and backgrounds here
1:25
So here you can change the footer text color. So if you want to change the footer text color from black to white, then you can do that
1:32
And you can also change the background color. So here we're going to change the background color here
1:38
So let's select a background color like this, this blue background. Now let's click on save here and let's check how it looks in the front end
1:48
So let me just refresh this page. And as you can see that the footer background color is changed
1:54
So you can also do the same background color like this. So let me just click on the color picker here and I will pick the color from here and I
2:03
will change the background color here. So let's click on here and I will click on plus icon and I will paste that hex code here
2:11
like this. Now let's click on save here. So as we have changed the background color, we need to change the text color as well because
2:19
the black color will not show here. So we need to change the text color to white
2:24
So what I can do is change the footer text color to white
2:29
So let me just click on here white. And what is this alternative text color
2:35
So this is the text color in the dark mode. So if you change the website to dark mode, then the text color is set to white in dark mode
2:44
And we can also change the text color in dark mode here in alternative text color
2:49
So I hope you have understand how to use these features in PlayDoh Pro theme
2:54
So alright, we have changed the color of the background and text color
2:58
Let's click on save here. Now let's go to the website and let me just refresh this page
3:06
And as you can see that the background color is changed. So we need to change little bit here
3:12
Like as you can see that the website name is not visible properly
3:17
So we need to fix the color of the website name. So you can easily fix this by going to the layout section here
3:24
So let me just go to the layout here and let me just scroll down and here in the about
3:30
section, let me just click on the pencil icon and there is this title website name
3:35
So I can add inline style here like style equal to and in double quote, I need to add
3:42
the color and I will add the color to white like this
3:49
And let's check if this settings is applied or not. So let's click on save here and let me just refresh this page
3:57
And as you can see that the website color is now changed to white
4:01
Now you can also adjust your link color here in the footer section
4:05
So if you want to change this color, then you can right click on here and click on inspect
4:09
here and here it is the anchor text in footer. So what I can do is I will target this credit inner class here
4:19
So I will copy here and I will click on plus and then I will add a anchor here
4:26
So let's target that anchor class in credit inner anchor tag in credit inner class
4:33
So I can change the color to something like white. Like this, as you can see that the color is changed and I can change the color to something
4:42
like this. So let's change the color to something like yellow that will look good in dark background
4:50
All right, now I need to copy this rule here and I will go to the blogger theme and I will
4:56
click on edit HTML and I will go to the CSS section of my theme
5:02
So you can find this B-Skin tag here and you can paste that CSS code just before it
5:10
All right, now let's click on save here and let's check if the color is changed or not
5:15
All right, let me just refresh this page and let me just scroll down and as you can see
5:22
that color is now changed and you can also adjust the icon color to white if you want
5:28
So let me just select this icon here. So the SBG icon alternative color is set to dark here, SBG.C1 and if you select this
5:39
here about link. So what I can do is I will copy this here about footer dot about link and I will click
5:50
on plus here and I will target the SBG here, SBG and I can change the color
5:58
So I will type like fill and I will fill like white like this
6:04
So here it will target this icon in the footer section. So let's copy the rule here
6:12
So let me just paste you paste it here so you can see this code properly
6:17
So this is the code that will change the SBG code in the about link section to white
6:25
So what I can do is I will copy this here and I will go to the theme again and I will
6:30
paste it here like this. Now let me just save here. All right, the code is saved
6:36
So let me just refresh this page, scroll down and as you can see that the icons also change
6:43
to white and all other icons is looking good. So it will not affect all other icons
6:51
So I hope you have understand how to change the color of this link and how you can change
6:56
the icon color and how you can change the website name. But there is one problem that the website name is showing at the bottom, but in desktop
7:04
it is showing at the first. So how can fix this issue
7:08
So to fix this issue, you need to go to your theme code editor here and you need to find
7:14
that footer section here. So here there will be a footer section here like this footer.creditInner footer.footerContent
7:23
So you can find this like creditInner class and you can find this code and here as you
7:29
can see that the footer front size is set to 12 pixels
7:32
So if you want to increase that you can change it to something like 14 pixels and if you
7:37
save this, the footer text color will be the footer text size will be increased
7:43
And to fix that issue and here you can see that the end child 1 the order is set to 1
7:50
So you need to match it like 1 to 1. So I can change the order from 3 to 1 and I will change the order from 1 to 2 and I
7:59
will change it to 3 and leave it 4, 4. So you need to keep the order like 1, 2, 3, 4
8:06
So it will keep the order as it is in mobile as well
8:11
So let me just click on save here. All right, let's go to the website and let me just refresh this page and as you can see
8:19
that let's open it in a mobile view and as you can see that the website name is now showing
8:24
at the top. That's because we have fixed that using that CSS code
8:29
So make sure to keep the order in 1, 2, 3, 4 and you can also change the font size as
8:34
well in footer or you can just select an individual element here and here you can
8:41
also add a font size if you want. Like let me just add a font size of 16 pixel like this and which you can see that the font
8:51
size is increased here as well and you can also add it through your layout section if
8:57
you want then just go to the layout here and here scroll down
9:02
Let's drag it to fourth wizard here. Let's click on about us here and let's find that description
9:09
Here it is p class about description so I can add inline style here like style equal
9:15
to and in double quote, I need to add the code like font size, font-size and in colon
9:25
I will change it to something like 16 pixel and I will close it with semicolon like this
9:31
style and let me just save here. Let's go to the website and let me just refresh this page and you can see that the size is
9:40
increased in the description. So in this way you can change the size of any element if you want
9:45
If you want to change the size of this about or block then you can also do that
9:51
So here the footer link anchor. So here let me just change the font size here
9:58
Let's change it to 16 pixel and as you can see that the font size is increased to 16
10:03
pixel as well. Now let's click on the SVG here and by default the footer link list SVG line is set to dark
10:13
So you can also change it to something like white and as you can see that the arrow mark
10:17
is back to white. So you can just click on this here and you can just copy the rule and just go to the
10:26
theme section here. So let me just save this fast because we have changed this layout
10:32
All right, let's go to theme here and let's click on edit HTML and here I can find that
10:38
section here. So I don't have to find add this code again
10:43
So I can just copy this top code here and I will type control plus F and find this code
10:50
and as you can see that here the stroke color is footer icon
10:55
So I can change this stroke color here. So let me just copy the stroke color from here, which is white
11:04
So you can add the hex code or you can add the value like white
11:09
So let me just paste it here. Hashtag FFFF like this. So let's save this code
11:16
So this is the footer section. So all the CSS code is contained here
11:21
So you can easily change any values in the footer section. So let's go back here and let me just refresh this page
11:31
And as you can see that the arrow mark is back to white. So this is how you can customize your footer section in Flutter Pro theme
11:39
So I hope you have got the idea how to edit the footer section
11:44
And if you have any more doubt, then you can ask me in the comment section and I will find
11:48
one more thing. So there is this top section here. So let me just click on this SVG here
11:56
This SVG also in dark. So we need to change this color
11:59
So let's change it to white as well. So I'll click on here and let's choose a white color here like this
12:10
As you can see that the icon is back to white and you can just copy this code or you can
12:15
find this code here. So let's click on edit here. So you need to use the inspect element a little bit if you want to make changes in the footer
12:29
section like this. So here you can see that the stroke color is set here
12:34
So let's change the stroke color to white here. So let's remove this and I will paste the hex code here like this
12:45
So the footer to top or the back to top button icon is changed to white
12:52
And by the way, if you found this video helpful, then make sure to hit the like button
12:56
And if you want me to make more videos like this, then consider subscribing to this channel
13:01
and I will see you in the next video. Bye bye
#Online Goodies
#Skins
# Themes & Wallpapers