Up next in 10
How to Change SVG Icon in Blogger _ Best SVG Resources _ Beginners Guide
3K views
Jan 27, 2024
In the video titled "How to Change SVG Icon in Blogger | Best SVG Resources | Beginners Guide," viewers will be guided through the process of changing SVG icons in a Blogger website. The tutorial introduces beginners to the world of Scalable Vector Graphics (SVG) and provides a step-by-step guide on how to customize and replace icons within the Blogger platform. Additionally, the video highlights some of the best resources for finding SVG icons, making it a comprehensive guide for those looking to enhance the visual elements of their Blogger site. Follow along to learn how to navigate SVG customization and discover valuable resources for incorporating appealing icons into your Blogger content.
View Video Transcript
0:00
Hello everyone, welcome to K2 blogging and in this video I will show you how you can
0:03
change the SVG icon of your blogger website. So let me just open this website
0:09
So as you can see, this is the Flutter Pro theme. And this is also Flutter Pro theme, but this is the updated version
0:17
So we can check how we can change the SVG icon in this theme
0:21
Or you can apply the same technique to any other theme. So let's check how we can change the SVG icon in blogger
0:29
So as you can see, the social share button SVG icon looks like this in this website
0:35
And let me just open a blog post in this theme. And as you can see, the social share button will look like this
0:42
So how we can copy the same design SVG icon to this website
0:47
So for this, I will just right click on it and click on inspect element
0:53
So here this is the SVG icon. So I will click on the SVG icon
0:59
So the SVG icon start with SVG and close with forward slash SVG
1:04
So you just need to copy the SVG icon. So for this, I will right click on it and click on edit at HTML
1:13
Now let me just copy the whole SVG code and I can paste it in a notepad file
1:20
So this is the SVG code of WhatsApp. So let me just name it
1:26
So I can use it at a time. So I will name it like WhatsApp
1:33
Now let me just copy the SVG code of Twitter. So I will right click on inspect element and then I will click on the whole SVG
1:42
Now I will click on edit HTML and I will copy the whole code and I will paste it in the
1:50
notepad and I can write it like Twitter. Now let's copy the Facebook icon
2:04
So I will right click on it and I will click on the whole SVG icon and I will click on
2:11
edit HTML. Now let me just copy the SVG icon here and I can paste it here and let me just name it
2:20
like Facebook. Now we can also copy more SVG icons
2:32
So let me just click on plus icon and I will right click on it
2:38
Click on edit HTML. Now let's copy this and let me just paste it and I can say it like plus
2:50
Okay, now we have copied the HTML code of the SVG icon
2:58
Now let me just go to this website and let me just click on WhatsApp icon
3:04
So I can select this whole SVG icon like this. So this is the SVG icon
3:10
So I can just click on edit HTML and let me just copy the SVG code of WhatsApp icon
3:22
And I will replace it here. And as you can see, the SVG icon of the WhatsApp is changed
3:30
So let's check how can change this icon in the backend. So let me just copy a div class here
3:38
So I will copy this class. So I will copy this class from
3:47
So let's wait
3:58
So here I will copy this class. So I will just double click on it and let me just copy this and let's go to the blogger
4:07
dashboard and click on theme. Now before changing anything makes you to take a backup of your theme
4:15
So in case if you do anything wrong in this process, then you can easily restore it by
4:20
copy and paste the backup file. So let me just click on edit HTML
4:25
And here I will type control plus F and I will paste that class
4:30
So as you can see, this is the share icon WhatsApp. And here we will find the old SVG code
4:37
So let me just copy the new SVG code from here. And I can replace the whole SVG
4:45
So here makes you to copy the SVG code starting from SVG to forward slash SVG and let me just
4:52
replace it and let's change the Twitter icon. So let me just copy the Twitter SVG code and I will copy the Twitter SVG here
5:06
So let's scroll up. Let's change the Facebook icon. So I will copy the Facebook SVG code and I will change it here
5:19
Now scroll down and this is the plus icon of share check
5:25
So let me just show you. So let me just click on inspect element
5:29
And as you can see, this is the of share check and this is the SVG icon
5:34
So we can change it here. So let me just copy the SVG icon of plus and I can change it here
5:45
So this is the SVG to SVG. Now let me just save this theme
5:53
Okay, now let me just refresh this page. And as you can see, the SVG icon is now changed
6:01
So in this way, you can change the SVG icon in your blogger theme
6:06
So when I click on plus icon, you will see more icons and in the same way you can change
6:11
all of the icons. So let me just click on plus icon and let me just right click on it and inspect element
6:21
Now this is the SVG code of telegram. So I can click on edit HTML and I can copy the telegram SVG icon here
6:31
And let me just right click on it. And let me just click on edit HTML and I will replace it here
6:41
So as you can see, the telegram icon is changed and I will leave the all icon code in the description
6:49
So you can easily add it to your blogger website. So you have to just copy the SVG icon and replace it in the edit HTML section
7:01
Now let's check how can change this icon. So this is the icon in the social share button
7:07
So here I have given a lot of SVG resources where you can use the SVG icon
7:13
So this is the official website of pletro pro theme. So let me search for a share icon
7:21
So let's scroll down. And here it is. So there is a share icon like this
7:29
So I can just copy this share icon and I can change it here
7:34
So just right click on it. And this is the SVG icon of share icon
7:41
So let me just click on edit HTML and I can replace this share icon like this
7:49
Or you can use any other website like material design icons.com or you can use the website
7:56
like feather icons.com or you can use the ionic.io. So let me just search for another code
8:07
So let's search for share
8:16
So let me just copy this icon. So for this, I will click on it and then I will click on this code and view SVG
8:27
So let me just copy this SVG file. And let me just go to this website and let me just change the SVG code
8:39
So I will click on HTML and I will paste the new code
8:44
And as you can see, this share icon is now changed. And you just need to find the same HTML code in the edit HTML section and replace it
8:56
So for this, I will go to this class nav share. So let me just copy this and I will type control plus F and paste the class
9:07
So this is the CSS code. And here it is. This is the HTML code
9:13
So here I can change the SVG code. So let me just copy this code
9:20
I will replace it from SVG to closing SVG. So let me just select the SVG code from here
9:29
And let me just replace this and let me just click on save
9:35
Now let me just replace this page. And as you can see, the icon is now changed
9:41
In the same way, you can change the menu icons. So let me just click on inspect element and let's click on menu
9:49
So these are the icons in the menu. So you can change this icon
9:53
So let me just show you how the icons looks like this in this website
10:00
So the home icon will look like this in this website. And the home icon looks like this in this website
10:08
So you can copy the home icon or you can copy a home icon from here
10:14
So let me search for a home icon. So this is the home icon
10:22
So let's copy this. And I will right click on it. And this is the SVG of the home icon
10:31
So I can just right click on it and click on edit HTML
10:37
And I will replace the icon here and I will click on enter
10:41
And as you can see, the home icon is changed. And I can search this class like home link
10:48
So let me just search it. And let me just find the HTML code
10:56
And here the SVG icon. So I can change the SVG code here
11:02
So let me just add the SVG code. And let me just save this
11:09
Okay, now the code is saved. Let me just refresh this page
11:13
And let's click on menu. And as you can see, the menu icon is changed
11:18
So in the same way, you can change the menu icon. So this is the list and under the list, this is the anchor class
11:25
So just click on it and this is the SVG icon. So if you want to change the SVG icon of about section, so let me just find a icon from here
11:37
So I can use this icon as a about us page. So let me just copy this
11:43
And here I can change the icon
11:56
So let's click on edit HTML. And let me just copy this code
12:06
And let me just replace it here. And as you can see, the about section icon is changed
12:13
And you can also further change this color. So let me just click on edit HTML
12:20
And I can add a inline style like style equal to fill, I can add a color like red
12:33
Let's click on enter. And as you can see, the icon of the about us page is changed
12:39
So you can just add a style like style equal to fill red
12:45
So in this way, you can further customize the icon and icon color
12:50
I hope this video helped you change the SVG icon in your blogger website
12:55
And if you have any doubt regarding this, then you can ask me in the comment section
12:59
And if this video is helpful to you, then make sure to hit the like button and do subscribe
13:03
to my channel for more upcoming videos like this. And don't forget to share this video
13:09
Thank you
#Online Goodies
#Skins
# Themes & Wallpapers