0:00
Hello everyone, welcome to K2 blogging and in this video I will show you how you can
0:04
add a social follow buttons like this to your blogger website. So as you can see when I hover this, it will reveal the title of the social media platform
0:13
So you can use it anywhere like in the sidebar or directly in the post or you can add it
0:19
anywhere in your website. So let's take how can add a social follow buttons to our blogger websites
0:27
So if you are new to this channel, then make sure to hit the like button and do subscribe
0:31
to K2 blogging. So let's get started. So first of all, let me just log into the blogger dashboard and I want to implement
0:40
that social follow buttons in this website. And what I can do is if I want to add it in the sidebar, then I will just go to the layout
0:50
section here and I will find the sidebar option and I will click on add a gadget and
0:58
I will click on HTML slash JavaScript and I will paste a HTML slash CSS code from here
1:07
So let me just copy the HTML and CSS code and you have to paste it here HTML slash JavaScript
1:15
So let me just paste it here and then you need to add your social media links
1:20
Suppose I want to add the Facebook link here and what I can do is I will change the hash
1:25
value and I will add the Facebook link here and this is the Facebook icon in SVG and you
1:32
can change the name of the social media icons. So let me just change the Facebook icon to a WhatsApp icon
1:42
And I will just search for SVG resources for bloggers and I will leave the link of
1:49
this web page in the description. So suppose I want to add a WhatsApp button instead of Facebook, then what I can do is
1:57
just copy the WhatsApp icon link here and I will go to layout and let me just change
2:03
the SVG to closing SVG. So let me just change it and I will change the WhatsApp link here and I will change the
2:13
text from Facebook to WhatsApp. Now I can add my Twitter link here
2:20
So let me just add my Twitter link and I have added the Twitter link here using a shortcode
2:29
So I have already made a video on how to use shortcodes using a Chrome extension
2:33
You can also watch this video to learn how to insert it
2:38
So I have added the Twitter link here and this is the Twitter SVG code and you can change
2:43
the link here like follow me or you can add a Twitter level like this
2:49
So in this way you can change link, SVG code and its level
2:53
So let me just save the code. Now let's go to the front end and let's refresh this page
3:04
As you can see, we have changed the Facebook to WhatsApp and we have added the link in
3:08
the Twitter. So let me just click on the Twitter button here and it will redirect me to the Twitter website
3:15
And if you want to open this link in a new tab, then what you can do is just go to the
3:20
HTML slash JavaScript and find that anchor tag. This is the anchor HREF Twitter
3:28
So I will add a property like target equal to, I will add a underscore blank
3:43
I will close the quotation and let me just save the code
3:55
Now let me just go back and let me just refresh this page fast and let me just hover over
4:01
the Twitter button and let me just click on here and as you can see, it will open that
4:06
link in a new tab. So you can add a target equal to underscore blank and it will be open in a new tab
4:15
And you can also further customize the color of the icons and you can customize the text
4:22
color using the CSS code. And I will write a brief article on this topic so you can learn more about this
4:31
So if you found this video helpful, then make sure to hit the like button
4:35
And if you have any doubt regarding this, then you can ask me in the comment section
4:40
I will see you in the next video. Thank you
