Adding Social Media icons on website or blog helps increasing more engagement with the audience and also increase the traffic on the website. Social Media Buttons are the major part of the blogger/ website. In this digital era, online presence is very necessary so it is mandatory to create Social Media pages(like - facebook page, instagram page, twitter page, etc.) of your website/blog. You can reach a wider audience by using social media icons on your website and linking to your social networks.
Whenever you visit a website or blog, I'm sure you have noticed they definitely have at least one or two social media handles and to increase their social media followers they will surely have social media icons in their blog or website. Many Creators face difficulty in bringing traffic from search engines, so they try to bring traffic from social media platforms. Social media platforms not only help them to increase traffic but also help them build a brand.
Social Media icons have become a necessity for business, brand building and marketing. Nowadays, a website or blog cannot exist without creating the social media handles. So I suggests each and every creators to add their social media pages and display it on the website. These icons increase user engagement on the website/blog and help spread awareness about your site social media platforms.
If you a Blogger and using Blogspot, and facing difficulties in adding social media icons to their blog. I know that, for the people using WordPress it's become very easy to Add Social Media icons than the people who uses Blogger or Blogspot. Don't worry, here we going to learn How to Add Social Media icons in Blogger?
Nowadays, most of the Blogger Templates are already coming inbuild with Social Media Icons and Social Media Sharing Bottoms. That would be the other scenario if you likes a Blogger template who doesn't have Social media icons or in case if you are using an old Blogger template. So if you falls in these categories than follow the given steps to add Social Media icons on your website or blog.
So, Now Let's begin our article on How to Add Social Media icons in Blogger? But before moving on, let me tell you that you do not need coding knowledge and no need to be a professional in Blogger to add HTML Code for social media icons. Here you get simple solution. BloggingZero.in have written many articles on - How to Add Popular Posts Widget in Blogger?, How to Add Related Posts Widget with Thumbnails in Blogger?, Basic SEO Tips, generating Sitemap, Privacy policy or contact us pages, and many more so if you are interested in it you may read them.
How to Add Social Media icons in Blogger?
Here I will show you two different methods of adding social media icons in Blogger throught HTML codes-
(1) 1st Method with Awesome front-
(i) First of all Go to the Blogger Dashboard.
(ii) Go to the Theme Section from the left menu.
(iii) then Edit HTML.
(iv) Using CRTL+F search for </head> tag and paste the given code below this tag-
<script src="https://kit.fontawesome.com/2a22590b5b.js" crossorigin="anonymous"></script>
(v) After Saving this Go the Layout option just above of Theme option.
(vi) Click on Add a Gadget option and Select HTML/Javascript gadget and paste the given code-
<div style="font-size: 2rem ;text-align:center">
<a href="URL-HERE" title="Facebook" target="_blank" rel="nofollow"><i
class="fa-brands fa-facebook"></i></a>
<a href="URL-HERE" title="Twitter" target="_blank" rel="nofollow"><i
class="fa-brands fa-twitter"></i></a>
<a href="URL-HERE" title="Pinterest" target="_blank"
rel="nofollow"><i class="fa-brands
fa-pinterest"></i></a>
<a href="URL-HERE" title="Instagram" target="_blank"
rel="nofollow"><i class="fa-brands
fa-instagram"></i></a>
<a href="URL-HERE" title="Youtube" target="_blank" rel="nofollow"><i
class="fa-brands fa-youtube"></i></a>
</div>
(vii) Now Replace the URLs with your Social Media pages link.
(viii) Click on the Save Option. And You're Done !!
(2) 2nd Method-
(i) First, Go to the Blogger Dashboard.
(ii) Go to the Layout Section from the left menu.
(iii) Now in a slidebar widget add HTML/Javascript Gadget.
(iv) After that Copy the given below code and Paste it in the HTML/Javascript gadget section.
<html> <head> <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css" rel="stylesheet" /> <style> body { margin: 0; padding: 0; } .social-media { display: flex; flex-wrap: wrap; } .social-media a .fa { font-size: 20px; line-height: 50px; color: #000; } .social-media a { display: block; width: 50px; height: 50px; margin: 3px; text-align: center; background: rgba(0, 0, 0, 0.1); transition: 0.3s; border-radius: 50px; } .social-media a:before { content: ''; top: -6px; left: 3px; width: 100%; height: 10%; background: rgba(0, 0, 0, 0.5); transform: skewX(-45deg); } .social-media a:after { content: ''; top: -2.5px; left: 50px; width: 10%; height: 100%; background: rgba(0, 0, 0, 0.8); transform: skewY(-45deg); } .social-media .social-media .bloggingzero-facebook { color: #3b5998; } .social-media a:hover { transform: translate(-10%, 10%); box-shadow: 10px 0 35px #000; transition: 0.3s; } .social-media .bloggingzero-facebook { background: #3b5998; } .social-media .bloggingzero-facebook .fa { color: #fff; } .social-media .bloggingzero-twitter { background: #55acee; } .social-media .bloggingzero-twitter .fa { color: #fff; } .social-media .bloggingzero-youtube { background: #cd201f; } .social-media .bloggingzero-youtube .fa { color: #fff; } .social-media .bloggingzero-instagram { background: #f09433; background: -moz-linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); background: -webkit-linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#f09433', endColorstr='#bc1888', GradientType=1); } .social-media .bloggingzero-instagram .fa { color: #fff; } .social-media .bloggingzero-quora { background: #b92b27; } .social-media .bloggingzero-quora .fa { color: #fff; } .social-media .bloggingzero-linkedin { background: #0077b5; } .social-media .bloggingzero-linkedin .fa { color: #fff; } .social-media .bloggingzero-whatsapp { background: #25d366; } .social-media .bloggingzero-whatsapp .fa { color: #fff; } .social-media .bloggingzero-pinterest { background: #b3001b; } .social-media .bloggingzero-pinterest .fa { color: #fff; } .social-media .bloggingzero-telegram { background: #0088cc; } .social-media .bloggingzero-telegram .fa { color: #fff; } a { text-decoration: none; text-align: center; } .tutorial-button { margin: 10px 0px; width: 30%; height: 50px; background: rgba(205, 32, 31, 0.3); position: relative; transition: 0.2s; } .tutorial-button p { padding: 12px; text-align: center; color: #333; font-size: 1rem; font-family: sans-serif; transition: 0.2s; } .tutorial-button:hover { background: rgba(205, 32, 31, 1); box-shadow: 5px 5px 5px black; transition: 0.2s; } .tutorial-button:hover p { color: #fff; transition: 0.2s; } </style> </head> <body> <div class="social-media"> <div class="demo"> <a href="https://facebook.com/bloggingzero" target="_blank" class="bloggingzero-facebook"><i class="fa fa-facebook"></i></a> </div> <a href="https://twitter.com/bloggingzero" target="_blank" class="bloggingzero-twitter"><i class="fa fa-twitter"></i></a> <a href="https://www.youtube.com/channel/UCZVn54mHcoFmaq6se7gtS-w" target="_blank" class="bloggingzero-youtube"><i class="fa fa-youtube"></i></a> <a href="https://instagram.com/bloggingzero" target="_blank" class="bloggingzero-pinterest"><i class="fa fa-instagram"></i></a> <a href="https://bloggingzero.quora.com" target="_blank" class="bloggingzero-quora"><i class="fa fab fa-quora"></i></a> <a href="https://www.linkedin.com/in/bloggingzero/" target="_blank" class="bloggingzero-linkedin"><i class="fa fa-linkedin"></i></a> <a href="https://whatsapp.com/" target="_blank" class="bloggingzero-whatsapp"><i class="fa fab fa-whatsapp"></i></a> <a href="https://in.pinterest.com/bloggingzero/_saved/" target="_blank" class="bloggingzero-pinterest"><i class="fa fab fab fa-pinterest"></i></a> <a href="https://t.me/blogtriggers" target="_blank" class="bloggingzero-telegram"><i class="fa fab fab fa-telegram"></i></a> </div> Made By <a href="https://www.bloggingzero.in" target="_blank"><b><i><u> bloggingzero</u></i> </b></a> With ❤</a> </body> </html>
(v) Now click on the Save option and You are Done!!
Note : Replace bloggingzero with your handle.
Conclusion -
I recommends you if you are not using social media platforms then, make social media pages and display the social media icon on your website. Because this will not only bring traffic, but also rank your website in search engines like Google, Bing, Yahoo, etc.