How To Add Social Media Icons in Blogger
In this tutorial, How to add social media icons in Blogger Website With HTML And CSS code. Adding Social Widget to your Blog site in simple way.
Adding social media icons to your Blogger site can increase the engagement of the visitor community with your content.
Because, in different cases, social media icons have become necessary for various businesses. As such, these social icons increase the engagement of users or visitors to the Blogger site and are very helpful in spreading the awareness of the visitors about the social platform.
Currently, there is a great need to be active online. But in many places it is very important that they be accessible. Because, it makes it easy for your site visitors to find you through social media and they will be able to contact you directly.
If you have a post related problem or talk about business, it will be easy to contact you, especially for blogger sites. Obviously, You want to connect with your visitor on popular social media platforms like ; Facebook, Twitter, WhatsAppb, Instagram etc.
You leave a social media icon on your blogger site. You can reach a wider audience by linking to your own social networks This will increase the number of followers of your social media account.
Benifits Of Adding Social Media Icon / Widget On Blogger
- If your visitor click on one of the icon from this widget , it should open your social media page in direct apps or new tab on your browser.
- You can increase the audience for your blog site by putting social media icons in your site header.
- For business blogs, having social icons on the website is very important.
- It makes readers interact with your blog site.
- This will allow visitors to keep in touch with you about their problems.
- If you are looking for the first email or social page to give any business related advertisement, adding social media account will help you to find it.
How To Create Blogger Social Media Icon With HTML And CSS
Below is how to create it with HTML and CSS. Follow step by step to use it.
- Go To Blogger Dashboard
- Now Go To The Layout Section.
- Then, Add a Widget ( Where you want to add icons)
- Here Add a HTML/ Javascript Gadget Box.
- Then, Paste Blew HTML And CSS Code.
Code :
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css" rel="stylesheet" />
<style>
.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 .blogbn-facebook {
color: #3b5998;
}
.social-media a:hover {
transform: translate(-10%, 10%);
box-shadow: 10px 0 35px #000;
transition: 0.3s;
}
.social-media .blogbn-facebook {
background: #3b5998;
}
.social-media .blogbn-facebook .fa {
color: #fff;
}
.social-media .blogbn-twitter {
background: #55acee;
}
.social-media .blogbn-twitter .fa {
color: #fff;
}
.social-media .blogbn-youtube {
background: #cd201f;
}
.social-media .blogbn-youtube .fa {
color: #fff;
}
.social-media .blogbn-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 .blogbn-instagram .fa {
color: #fff;
}
.social-media .blogbn-quora {
background: #b92b27;
}
.social-media .blogbn-quora .fa {
color: #fff;
}
.social-media .blogbn-linkedin {
background: #0077b5;
}
.social-media .blogbn-linkedin .fa {
color: #fff;
}
.social-media .blogbn-whatsapp {
background: #25d366;
}
.social-media .blogbn-whatsapp .fa {
color: #fff;
}
.social-media .blogbn-pinterest {
background: #b3001b;
}
.social-media .blogbn-pinterest .fa {
color: #fff;
}
.social-media .blogbn-telegram {
background: #0088cc;
}
.social-media .blogbn-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>
<div class="social-media">
<div class="demo">
<a href="https://facebook.com/blogbn" target="_blank" class="blogbn-facebook"><i class="fa fa-facebook"></i></a>
</div>
<a href="https://twitter.com/blogbn" target="_blank" class="blogbn-twitter"><i class="fa fa-twitter"></i></a>
<a href="https://www.youtube.com/channel/UCZVn54mHcoFmaq6se7gtS-w" target="_blank" class="blogbn-youtube"><i class="fa fa-youtube"></i></a>
<a href="https://instagram.com/blogbn" target="_blank" class="blogbn-pinterest"><i class="fa fa-instagram"></i></a>
<a href="https://blogbn.quora.com" target="_blank" class="blogbn-quora"><i class="fa fab fa-quora"></i></a>
<a href="https://www.linkedin.com/in/blogbn/" target="_blank" class="blogbn-linkedin"><i class="fa fa-linkedin"></i></a>
<a href="https://whatsapp.com/" target="_blank" class="blogbn-whatsapp"><i class="fa fab fa-whatsapp"></i></a>
<a href="https://in.pinterest.com/blogbn/_saved/" target="_blank" class="blogbn-pinterest"><i class="fa fab fab fa-pinterest"></i></a>
<a href="https://t.me/blogbn" target="_blank" class="blogbn-telegram"><i class="fa fab fab fa-telegram"></i></a>
</div>- Now, Save it.
Conclusion : In this post, I will Discus How To Add Social Icons in Blogger. If You have any problem for Adding Social Media Icon In Blogger with HTML and CSS Code. Please Comment blew on this post or Contact With Us.