Add Social Media Icons to Blogger Sidebar

Social networks play an important role in building our readership and blog traffic. Social media is a great way for promoting your blog and for increasing your traffic/visitors. If you want to become a successful blogger then it's important to be active on social networks. Social media is the only place where you can easily interact with your visitors. You can use social networks for your blog promotion, blog updates and for blog notifications. But all this will be possible only if there is an option for your visitors to join you on social networks and the solution is to add social media icons widget to your blog. So, today in this tutorial we'll show you that How to Add Social Media Icons to Blogger Sidebar.

Add Social Media Icons to Blogger Sidebar

First and foremost log in to your Blogger Account >> Select a Blog >> Go to Layout >> Add a Gadget and select HTML/JavaScript gadget from the list of Gadgets. Copy (Ctrl + C) the below code and Paste (Ctrl + V) it in the empty widget box

<style>
#sidebar-subscribe-box{width:317px;padding:3px 0}
 .sidebar-subscribe-box-wrapper{background:transparent repeat scroll 0 0 #f7f7f7;color:#111;font-size:14px;line-height:0px;padding:1px 20px 10px;text-align:center;text-transform:uppercase}
a.social-icons{margin-right: 5px;height:50px;width:45px;}
a.social-icons:hover { opacity: .7; filter:alpha(opacity=70);}
</style>

<div id="sidebar-subscribe-box">
<div class="sidebar-subscribe-box-wrapper">
    <br/>
<a class="social-icons" href="https://www.facebook.com/blogolect.official"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhGOShQdLPHWwO-T8jDg7tIpoVW0VeO65zXelYlOb8Mvub-UWLQaWady5QZT0qavR4Pi0qgvGvZ-oK4d7yUICwHPt7K8UADOQJgzEgz7Xap7WcYHm-aaB8zegsdBZxyvcxH2vWz_vm9yEE/s1600/facebook.png" /></a>
<a class="social-icons" href="https://www.twitter.com/blogolect"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidtjNSzVOl__WeddSCCQs7gWowuCP4NMz7bSUADdYn0ariqrJk29AwnyjrEfAwqekZu23VE7GZWkB4dP4cKkt2UAXTES3X99Edm-qVidVt2ZCH90PVfdMhcDqvPtDhzFX_c6GVC9in0tVt/s1600/twitter.png" /></a>
<a class="social-icons" href="https://plus.google.com/+zohaibliaqat"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNb789cQDYx14MrSZxnqbzZv7zS0I3EE7-Y1iA2VJgt4Qajm-h8a6jgaTh8E6ZUx6Asjz3O9yfjD4vofErYeh-5KH93kkFtOQB1nn1Ey_EKoYLgmTzDr8Ih_Yxl7fWLU27jZx_K8g2bNag/s1600/google+.png" /></a>
<a class="social-icons" href="http://feeds.feedburner.com/blogolect"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjma1G8GB031u3T0CgUJ3NVQTl3hHBeTjOtr-ho80V4OCbzcv1ecbPEJqhQQ9go8JqvKX0gZiE2ADZDdPlHVr_d9xR9V8rsxSrUN3vQlsC0WNSwqB6VOY518tNCE04W-u9dPv3VLnuoRIJf/s1600/rss.png" /></a>
<a class="social-icons" href="http://www.pinterest.com/blogolect"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmwGGA4Gwu29HS-DhUSdQSnkXpXrb4AFbyYc9_PzDLQj2BD3yg8nO5RMhlwvPsiOYImeueJ-Yb6giWI18Vw1gHSIrQwzB9oo44Brsob1aIyx0eJ_uS5JWO2Pna_a2SRy8LUoA5nY9tFVmv/s1600/pinterest.png" /></a>
</div></div>

Customization:

• Replace https://www.facebook.com/blogolect.official with your Facebook Fan page URL

• Replace blogolect with your Twitter Username

• Replace https://plus.google.com/+zohaibliaqat with your Google+ Account URL

• Replace http://feeds.feedburner.com/blogolect with your RSS feed URL

• Replace http://www.pinterest.com/blogolect with your Pinterest Account URL

Hit the Save Button
Congratulations: You've successfully added social media icons to your blogger blog.

From Editors Desk

We hope that this article may have helped you in adding social media icons to your blog. Share this widget with your friends and don't forget to subscribe us!

Share This:

Tags:

Widgets

• Prevoius
• Next