Looking for some social media buttons? Yes then you're on the right place, Social media has become a way to increase your web traffic by engaging people through post, in this post you will learn how to put social media buttons in sidebar so lets get started.
Adding Social Media Button To Sidebar
- Go to Blogger.com > Layout and in the sidebar area click "Add a Gadget" a popup will appear
- Click on "HTML/Javscript" and you will be redirected
- Now in the content box paste the following code below
<style><br />
/* CSS Social Network Sidebar */<br />
#social_networks{text-align:center;display:block;margin:0 auto;}<br />
#social_networks ul {display:block;height:36px;margin:0 auto;list-style:none;}<br />
#social_networks li{text-align:center;display:inline-block;margin:0 auto;margin-left:2px;margin-right:2px;width:38px;height:38px;opacity:0.9;transition:All 0.3s ease-out;}<br />
#social_networks li:hover{background:#333;color:#fff;opacity:1;cursor:pointer;}<br />
#social_networks li:hover a{color:#fff;}<br />
#social_networks li a{display:inline-block;color:#fff;line-height:38px;font-size:20px;transition:All 0.3s ease-out;}<br />
#social_networks li a:hover{color:#fff;box-shadow:none;}<br />
#social_networks li a span{display:none;}<br />
#social_networks li.facebook,#social_networks li.twitter,#social_networks li.youtube,#social_networks li.googleplus,#social_networks li.linkedin{text-align:center;transition:all 0.3s ease-out;}<br />
#social_networks li.facebook{background:#3b5998;}<br />
#social_networks li.twitter{background:#62c8f8;}<br />
#social_networks li.youtube{background:#e14e42;}<br />
#social_networks li.googleplus{background:#d64136;}<br />
#social_networks li.linkedin{background:#006699;}<br />
#social_networks li.facebook:hover,#social_networks li.twitter:hover,#social_networks li.youtube:hover,#social_networks li.googleplus:hover,#social_networks li.linkedin:hover {background:#333;color:#fff;cursor:pointer;}<br />
#social_networks li a.facebook:hover,#social_networks li a.twitter:hover,#social_networks li a.youtube:hover,#social_networks li a.googleplus:hover,#social_networks li a.linkedin:hover{color:#fff;}<br />
</style><br />
<br />
<div id='social_networks'>
<br />
<ul><br />
<li class='sorting-06 facebook' title='Follow us on Facebook'><a href='#'><i class='fa fa-facebook'/><span class='inv'/></span></i></a></li>
<br />
<li class='sorting-07 twitter' title='Follow us on Twitter'><a href='#'><i class='fa fa-twitter'/><span class='inv'/></span></i></a></li>
<br />
<li class='sorting-08 googleplus' title='Follow us on Google+'><a href='#'><i class='fa fa-google-plus'/><span class='inv'/></span></i></a></li>
<br />
<li class='sorting-09 linkedin' title='Follow us on LinkedIn'><a href='#'><i class='fa fa-linkedin'/><span class='inv'/></span></i></a></li>
<br />
<li class='sorting-10 youtube' title='Follow us on Youtube'><a href='#'><i class='fa fa-youtube'/><span class='inv'/></span></i></a></li>
<br />
</ul>
<br />
</div>
- You can choose a title if you want for E.g :- "Follow Me On Social Media" and click Save
If you’re having trouble with the widget, please leave a comment below. I'm here to help you!
EmoticonEmoticon