Adding social media icons to your blog can increase community engagement with your content. In the digital age, having an online presence is an absolute necessity. It's essential to be accessible in many locations. Social media makes it possible for people to find you...even if they don't actually know that they found you. You can reach a wider audience by having social media icons on your site and linking to your social networks.
Social Media icons have become a necessity for businesses. These icons increase user engagement on the blog and help spread awareness about social media platforms. If you are a blogger, then you probably use Google’s blogging platform, Blogger. In this tutorial, we will learn how to add social media icons in Blogger.
Now let's begin our tutorial on adding HTML and CSS code to add social media icons in blogger in simple ways.
How to Add Social Media Icons in blogger?
Follow some steps to Add Social Media Icons in blogger.Step1) First of all, log in to the blogger.com dashboard.
Step2) Now go to the Layout Section.
Step3) In Layout Section, go to the Sidebar widget.
Step4) Now in Sidebar Widget add a HTML/ Javascript Gadget.
Step5) Now, Copy this Code and paste it into HTML/Javascript Widget as given below.
<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 .blogtriggers-facebook {
color: #3b5998;
}
.social-media a:hover {
transform: translate(-10%, 10%);
box-shadow: 10px 0 35px #000;
transition: 0.3s;
}
.social-media .blogtriggers-facebook {
background: #3b5998;
}
.social-media .blogtriggers-facebook .fa {
color: #fff;
}
.social-media .blogtriggers-twitter {
background: #55acee;
}
.social-media .blogtriggers-twitter .fa {
color: #fff;
}
.social-media .blogtriggers-youtube {
background: #cd201f;
}
.social-media .blogtriggers-youtube .fa {
color: #fff;
}
.social-media .blogtriggers-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 .blogtriggers-instagram .fa {
color: #fff;
}
.social-media .blogtriggers-quora {
background: #b92b27;
}
.social-media .blogtriggers-quora .fa {
color: #fff;
}
.social-media .blogtriggers-linkedin {
background: #0077b5;
}
.social-media .blogtriggers-linkedin .fa {
color: #fff;
}
.social-media .blogtriggers-whatsapp {
background: #25d366;
}
.social-media .blogtriggers-whatsapp .fa {
color: #fff;
}
.social-media .blogtriggers-pinterest {
background: #b3001b;
}
.social-media .blogtriggers-pinterest .fa {
color: #fff;
}
.social-media .blogtriggers-telegram {
background: #0088cc;
}
.social-media .blogtriggers-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/blogtriggers" target="_blank" class="blogtriggers-facebook"><i class="fa fa-facebook"></i></a>
</div>
<a href="https://twitter.com/blogtriggers" target="_blank" class="blogtriggers-twitter"><i class="fa fa-twitter"></i></a>
<a href="https://www.youtube.com/channel/UCZVn54mHcoFmaq6se7gtS-w" target="_blank" class="blogtriggers-youtube"><i class="fa fa-youtube"></i></a>
<a href="https://instagram.com/blogtriggers" target="_blank" class="blogtriggers-pinterest"><i class="fa fa-instagram"></i></a>
<a href="https://blogtriggers.quora.com" target="_blank" class="blogtriggers-quora"><i class="fa fab fa-quora"></i></a>
<a href="https://www.linkedin.com/in/blogtriggers/" target="_blank" class="blogtriggers-linkedin"><i class="fa fa-linkedin"></i></a>
<a href="https://whatsapp.com/" target="_blank" class="blogtriggers-whatsapp"><i class="fa fab fa-whatsapp"></i></a>
<a href="https://in.pinterest.com/blogtriggers/_saved/" target="_blank" class="blogtriggers-pinterest"><i class="fa fab fab fa-pinterest"></i></a>
<a href="https://t.me/blogtriggers" target="_blank" class="blogtriggers-telegram"><i class="fa fab fab fa-telegram"></i></a>
</div>
Made By <a href="https://www.blogtriggers.com" target="_blank"><b><i><u> Blogtriggers</u></i> </b></a> With ❤</a>
</body>
</html>Congratulation🎉✨🎊 You have successfully added a Social media Icon to blogger.
Benefits of Adding Social Media Icons in blogger
👉You can significantly increase the audience for your blog by putting social media icons in your header.
👉Lending to the credibility of your blog, it makes readers interact with your site. These icons are a visual cue that social networking sites exist for your business or blog.
👉It is an easy way to show your active audience and stays in touch with your readers.
👉People can follow you more quickly on your social networks by clicking your icons.
👉Increase interaction and engagement, drive more traffic to your post.
👉If your posts rank and your content is good, users will follow your social media account via your website.
👉Adding social media icons increases your website’s visibility and search engine optimization.
👉By adding social-media badges to your blog’s sidebar, you avoid making readers click back and forth between your site’s pages to share content with friends.
Final Verdict
Social media icons are basically buttons that, when clicked, access your official social media pages. Blog and website designers mainly use it to make their sites more interactive and attractive to readers. By integrating social media icons into your blog, your readers will have more reason to share the contents of your blog primarily through Facebook or Twitter.
If you have already added social media icons for bloggers and liked them, then it's a nice feature to add to your blog. In this article, I am just sharing my experiences on adding social media icons to bloggers. Maybe it can help you.
If you're unsure of anything about any part of this article, please ask us in our telegram group.
Join our Telegram Group: Blog Triggers Discussion Group
