How to add social button through html in wordpress and blogspot?

Will effectuate with the help of anchor tag and little amount of style sheets codes. This is possible you can add social button through html and css manually. In most of theme or template there is already an option to add social media widgets to sidebar but in this post I gonna implement it by small chunk of code through html and css . Additional you can also use this similar code to add social button on wordpress as well so it's all up to you will use this to wordpress or blogspot.

Using Blogspot

Follow this steps to add social button in blogger tamplate am using soho red template which is pretty good template as compared to rest of template and after complete execution it looks something like this vertically oriented.

Step 1: Sign in to blogspot.

Step 2: Go to layout section.

Step 3: Click to Add Gadget Option below of sidebar.

Step 4: Click on plus button which is behind of html/javascript option.

Step 5: Do check this checkbox which is visible javascript.

Step 6: Paste this below code in large text area which is below of content.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.fa {
padding: 20px;
font-size: 30px;
width: 50px;
text-align: center;
text-decoration: none;
margin: 5px 2px;
}
.fa:hover {
opacity: 0.7;
}
.fa-facebook {
background: #3B5998;
color: white;
}
.fa-twitter {
background: #55ACEE;
color: white;
}
.fa-google {
background: #dd4b39;
color: white;
}
.fa-linkedin {
background: #007bb5;
color: white;
}
.fa-youtube {
background: #bb0000;
color: white;
}
.fa-instagram {
background: #125688;
color: white;
}
.fa-pinterest {
background: #cb2027;
color: white;
}
.fa-snapchat-ghost {
background: #fffc00;
color: white;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
.fa-skype {
background: #00aff0;
color: white;
}
.fa-android {
background: #a4c639;
color: white;
}
.fa-dribbble {
background: #ea4c89;
color: white;
}
.fa-vimeo {
background: #45bbff;
color: white;
}
.fa-tumblr {
background: #2c4762;
color: white;
}
.fa-vine {
background: #00b489;
color: white;
}
.fa-foursquare {
background: #45bbff;
color: white;
}
.fa-stumbleupon {
background: #eb4924;
color: white;
}
.fa-flickr {
background: #f40083;
color: white;
}
.fa-yahoo {
background: #430297;
color: white;
}
.fa-soundcloud {
background: #ff5500;
color: white;
}
.fa-reddit {
background: #ff5700;
color: white;
}
.fa-rss {
background: #ff6600;
color: white;
}
</style>
</head>
<body>
<h2>Style Social Media Buttons</h2>
<!-- Add font awesome icons -->
<a href="#" class="fa fa-facebook"></a>
<a href="#" class="fa fa-twitter"></a>
<a href="#" class="fa fa-google"></a>
<a href="#" class="fa fa-linkedin"></a>
<a href="#" class="fa fa-youtube"></a>
<a href="#" class="fa fa-instagram"></a>
<a href="#" class="fa fa-pinterest"></a>
<a href="#" class="fa fa-snapchat-ghost"></a>
<a href="#" class="fa fa-skype"></a>
<a href="#" class="fa fa-android"></a>
<a href="#" class="fa fa-dribbble"></a>
<a href="#" class="fa fa-vimeo"></a>
<a href="#" class="fa fa-tumblr"></a>
<a href="#" class="fa fa-vine"></a>
<a href="#" class="fa fa-foursquare"></a>
<a href="#" class="fa fa-stumbleupon"></a>
<a href="#" class="fa fa-flickr"></a>
<a href="#" class="fa fa-yahoo"></a>
<a href="#" class="fa fa-reddit"></a>
<a href="#" class="fa fa-rss"></a>
</body>
</html>

Now paste this code in large text area for manually adding button to your blogger template and do paste your links whether it is instagram, facebook, twitter or anything at href element or replace "#" with "https://www.instagram.com/yourUserNAme" and done.

Step 7: Click on save button that reflects the button in your soho template see this change that looks pretty awesome.Congratulations now you are done with adding it manually.

Using Wordpress

On your WordPress dashboard, navigate to Customizer -> Widgets. Then, add “Custom HTML” by dragging it to your header, sidebar, or footer section. Use the similar code as i mentioned on blogspot and paste it in HTML widget that you add earlier and now you are done.

Pro Note:Adding social media icons to your website is a great way to increase your following and overall brand’s visibility.

Now you know how to add social media icons to Blogspot and Wordpress. Hopefully, this article was helpful for you to implement this task Namastey!