Are searching tutorial for how to add social media icons on blogger? If yes, then this is the right place for you. Here, you will learn steps to add different social media icons on blogger.
Blogger is one the most popular platform where you can easily post blogs and by adding social media icons on the blogger, you can connect with your readers on various social media platforms like Instagram, Facebook, Twitter, GitHub etc. Blogger allows us to add social media icons so that we can build our presence outside the blog as well as it also helps in bringing new visitors to our blogs.
Benefits of Adding Social media icons on blogger
Adding social media icons on blogger brings us many benefits which are as follows;
• It makes our blog more interactive.
• By adding social media icons, we can reach to more people.
• With the help of social media icons, we can easily connect with the visitors on different social media platforms.
• It also increase the engagement of new visitors.
• With this, readers can easily reach to you.
How to Add Social Media Icons on Blogger
Now, we will learn the steps to add social media icons on blogger;
1. Go to Blogger site and Sign-in with your Google account.
2. In the left side, Go to Layout > Add a Gadget.
3. Choose the HTML/Javascript option then paste the following HTML code inside the Content area;
<style>@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css");a {
color: grey;
}
a:hover {
color: white;
}
.wrapper {
display: inline-flex;
}
.wrapper .icon {
position: relative;
background-color: #ffffff;
border-radius: 50%;
padding: 15px;
margin: 10px;
width: 50px;
height: 50px;
font-size: 18px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
cursor: pointer;
transition: all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.wrapper .tooltip {
position: absolute;
top: 0;
font-size: 14px;
background-color: #ffffff;
color: #ffffff;
padding: 5px 8px;
border-radius: 5px;
box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
opacity: 0;
pointer-events: none;
transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.wrapper .tooltip::before {
position: absolute;
content: "";
height: 8px;
width: 8px;
background-color: #ffffff;
bottom: -3px;
left: 50%;
transform: translate(-50%) rotate(45deg);
transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.wrapper .icon:hover .tooltip {
top: -45px;
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.wrapper .icon:hover span,
.wrapper .icon:hover .tooltip {
text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.1);
}
.wrapper .facebook:hover,
.wrapper .facebook:hover .tooltip,
.wrapper .facebook:hover .tooltip::before {
background-color: #3b5999;
color: #ffffff;
}
.wrapper .twitter:hover,
.wrapper .twitter:hover .tooltip,
.wrapper .twitter:hover .tooltip::before {
background-color: #46c1f6;
color: #ffffff;
}
.wrapper .instagram:hover,
.wrapper .instagram:hover .tooltip,
.wrapper .instagram:hover .tooltip::before {
background-color: #e1306c;
color: #ffffff;
}
.wrapper .github:hover,
.wrapper .github:hover .tooltip,
.wrapper .github:hover .tooltip::before {
background-color: #333333;
color: #ffffff;
}
.wrapper .youtube:hover,
.wrapper .youtube:hover .tooltip,
.wrapper .youtube:hover .tooltip::before {
background-color: #de463b;
color: #ffffff;
}</style>
<div class="wrapper">
<div class="icon facebook">
<div class="tooltip">Facebook</div>
<span><a href="#"><i class="fa fa-facebook-f"></i></a></span>
</div>
<div class="icon twitter">
<div class="tooltip">Twitter</div>
<span><a href="#"><i class="fa fa-twitter"></i></a></span>
</div>
<div class="icon instagram">
<div class="tooltip">Instagram</div>
<span><a href="#"><i class="fa fa-instagram"></i></a></span>
</div>
<div class="icon github">
<div class="tooltip">Github</div>
<span><a href="#"><i class="fa fa-github"></i></a></span>
</div>
<div class="icon youtube">
<div class="tooltip">Youtube</div>
<span><a href="#"><i class="fa fa-youtube"></i></a></span>
</div>
</div>Replace highlighted # with your social media link
4. Hit the Save button to add social media icon with Pop-up style on blogger.
Add New Social media icon (Optional)
In order to add new social media icon, you have to add some minor HTML and CSS codes.
1. Paste the following CSS code above to the tag ;
.wrapper .Name:hover,.wrapper .Name:hover .tooltip,
.wrapper .Name:hover .tooltip::before {
background-color: #3b5999;
color: #ffffff;
}2. After adding CSS code, paste the following HTML code just above to the last tag ;
<div class="icon Name"> <div class="tooltip">Name</div>
<span><a href="#"><i class="fa fa-Name"></i></a></span>
</div>Note : Replace the RED Highlighted area with the name of Social Media site(eg. Pinterest, LinkedIn, Snap chat etc.) GREEN Highlighted area with Social media profile link and Blue Highlighted area with Background color of icon button.
Demo
Conclusion
Above we have discussed the tutorial for how to add social media icons on blogger. Blogger allows us to add social media icons so that we can build our presence outside the blog as well as it also helps in bringing new visitors to our blogs. By following the above mentioned steps anyone can easily be able to add social media icons on blogger.