 |
| How To Add Social Media Buttons Widget In Blogger Free |
What is a social network link button? What's the benefit?
First of all, let's find out what is a social link button (social icon or social link button) and its benefits.
Social icons are buttons with the icons of social networking sites, usually placed at the top, footer or sidebar of a website. When you click on those icons, it will lead to social networking sites such as Facebook, Instagram, Twitter, etc. of the website owner.
However, do not confuse the social link button with the share button on social networking sites. The share button allows you to share an article or page about your own social networking site.
Adding social media buttons to your website will increase people's awareness of you on different social networks. In particular, they help you and users increase interaction with each other. In addition, if you choose lovely icons, suitable for the design of the page, your website will be more beautiful.
Okay, that's it, I'll give you an idea so you can see how it's done.
The first step is to choose the social media you want to add. You can find many different types of social buttons on the web.
Next, you'll need to generate the code for the social button you want to use. This code will allow your website to embed the button and track clicks and engagement on it.
Finally, you will need to add the code to your site. You can use pre-packaged widgets or scripts that work with languages like HTML and CSS etc.
So you can imagine everything in this article, right, if not, don't worry, I will help you solve it with NVH Corp's design pattern. Please read it all and follow 2 simple steps. simple below!
How To Add Social Media Buttons Widget?
To add social media widget to your blogger or wordpress site, you need to add HTML, CSS, and JavaScript codes. These codes have to be added in 2 steps. We will add HTML code in the 1st step and CSS In the last step.
Add this below Highlighted piece of code in your head section if you are in wordpress or making an HTML file, otherwise, copy and paste as it is.
Step 1 - Adding HTML for Social Media Buttons
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css"/>
<div class="middle-socl">
<a class="btn-socl" href="#">
<i class="fab fa-facebook-f"></i>
</a>
<a class="btn-socl" href="#">
<i class="fab fa-twitter"></i>
</a>
<a class="btn-socl" href="#">
<i class="fab fa-google"></i>
</a>
<a class="btn-socl" href="#">
<i class="fab fa-instagram"></i>
</a>
<a class="btn-socl" href="#">
<i class="fab fa-youtube"></i>
</a> </div>
Step 2 - Adding CSS
These CSS Codes are formatted if you want to minify you can use our tool by Following this Link - CSS Minifier Tool
<style type="text/css">.middle-socl {
width: 100%;
text-align: center;
}
.btn-socl {
display: inline-block;
width: 70px;
height: 70px;
background: #f1f1f1;
margin: 10px;
border-radius: 30%;
box-shadow: 0 5px 15px -5px #00000070;
color: #555eed;
overflow: hidden;
position: relative;
}
.btn-socl i {
line-height: 73px;
font-size: 26px;
transition: 0.2s linear;
}
.btn-socl:hover i {
transform: scale(1.3);
color: #f1f1f1;
}
.btn-socl::before {
content: "";
position: absolute;
width: 120%;
height: 120%;
background: #555eed;
transform: rotate(45deg);
left: -110%;
top: 90%;
}
.btn-socl:hover::before {
animation: aaa 0.7s 1;
top: -10%;
left: -10%;
}
@keyframes aaa {
0% {
left: -110%;
top: 90%;
}
50% {
left: 10%;
top: -30%;
}
100% {
top: -10%;
left: -10%;
}
}
</style>
Conclusion
The social media widget is a great way to show off your social media channels to your customers. It's also a way to make it easier for them to stay connected with you. If you haven't already, it's time to start adding social media buttons to your website!
This post covered how to add social media buttons to your website in just 2 steps. Now, you have all the information you need to easily add the social media widget to your website.
Reference:
www.soipro.com