How To Add Social Media Icons To Blogger Sidebar

Hey! In my previous post I shared How To Add PopUp Like Box in Blogger. It's quite easy tutorial. In this post I will show you How To Add Social Media Icons in Blogger. It is very necessary to keep your blog connected with Social Media Sites. And adding social sharing icons in your blog will allow your users or visitors to connect with your blog more easily. In this post I will provide you codes which will add these icons in your Blogger blog. I will also explain each step one by one so that you can understand it easily.

Giving your users a way to connect with you on social sites is very important. It will really help you in increasing relationship with your users and understanding what users want. It can also works as a SEO for your blog. Yes, Social networking sites brings lots of traffic to sites. But you have to connect your blog with these social sharing sites in proper way and adding social sharing icons in your blog will help you in connecting with Social Sites properly. Don't Worry! I will not take more time on these conversation. Let's see How To Add Social Media Icons to Blogger.

Follow these steps:

• First of all you need to Sign in to blogger if you haven't until now.
• After signing in Click on the blog in which you want to add social sharing icons.
• Now go to Dashboard. In the Dashboard click on Layout.
• In the Layout page you will see "Add a Gadget" on the sidebar. Click on Add a gadget.
• Now you will see a PopUp. Scroll down and click on HTML/JavaScript.
• Now write a Title for your social sharing icons like Connect With Us, Become Our Fan on Social Sites, etc. Write it according to your need.
• Now Paste the HTML code given below on the content box.

<a href="http://www.facebook.com/MobileTechz" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhewA-xgj9H1_Od45617Wdi9x2a-MxlZhrtzAuoJ9CZ1q4un5_YBjmgNPNCP2Hno0vzid8w4GhOq-U0DfBPiCQb5d15VvHz648ZchN4quj9BST6uwkajZiTvuZnSHE5SRZYcZqqa85ZazQ/h120/facebook.png" border="0" height="52" width="52" title="Facebook" /></a>
<a href="http://twitter.com/sashish302" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkYYPX98CVaKuXPCThTbaXoPsn71fgY8v97-uYFtrCSb-5V2lZ1nGG2t90yeM7d6K8fKg4mtWa8Qg8cCGgvhw3LhuCaP5MO1Hi5UDHBhJO4uAou0MxTCURAk4rhECvDclS9CsTA6F3_tg/h120/twitter-old.png" border="0" height="52" width="52" title="Twitter" /></a>
<a href="http://pinterest.com/sashish302" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh90GZpQ2FfVBXSZL3IMqLSdHSwKmUVhFdljfd0w2zMcCmSsmvs-BAeZB17qI1EvxaJHjT-3Kd8k1BPQj83YHOj8QFgvg8a1BNgXBR7cjSAqwVYGMB752k-JmHVtMfDHh5YcazEz6_-oiU/h120/pinterest.png" border="0" height="52" width="52" title="Pinterest" /></a>
<a href="https://plus.google.com/+HackersthiefsBlogspot" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoexhnUt4tVsT6sjB4iIFCF7hLGB5fDMfG_Z_Bie1VaS2nkFGrEGV20kEAD8QNVRviyZm9VibtimEYYwwCJIg0M5eD-zJoSCj-b7qxcEnJbSwVIm_H12ADNmeVCf-qFd6l4QjjBnoQ-NE/h120/googleplus.png" border="0" height="52" width="52" title="Google+" /></a>
<a href="http://feeds.feedburner.com/HackersThiefs" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDpIA4e8meQ7TxnKwBmvxFkdFfKmUqQIj_xNMNjuGPbKTOeFmpT8dVw5XyxgcyXBAk1Tad8VbfkzPevri0pPRmMuQMJnOdK98FT4zpCjV-Caf8-2lyeBM2ljOYuDiEoW5zRx61wageb2g/h120/rss.png" border="0" height="52" width="52" title="Rss" /></a>

You may not be able to copy code from above properly. If you face problem in copying than copy the code from the Get Code button given below. The code is at the Google Drive. It is same as the above code for adding Social Media Icons in Blogger.

Get Code

You are required to change my UserName with yours.  See the text in red in the above code, replace it with your social sharing sites UserName. Now see the URL in blue, it's the URL of the Social Media Icons. You can use your own beautiful social media icons. Just replace the URL which is written in blue with your social sharing icons. You are also free to change the height and width of the image. By default it is set to 52 but you can change it according to your need.

• Now you can save the Gadget. Go to your Blogger blog and see how your new social media icons looks in your Blogger blog.

Isn't it too simple to add these Social sharing Icons to Blogger Sidebar. Yes, it is. You can add more social sites in your social sharing icons list. You will only need to add another line of code. See the code below.

<a href="SOCIAL-MEDIA-URL" target="_blank"><img src="SOCIAL-SHARING-IMAGE-URL" border="0" height="52" width="52" title="WRITE-THE-TEXT-WHICH-WILL-APPEAR-ON-HOVER" /></a>

The above code will help you in adding new social sharing sites icons in your Blogger blog. The text "SOCIAL-MEDIA-URL" will be the URL address of your Profile or Page in the Social Sharing Sites. Now you will need to replace SOCIAL-SHARING-IMAGE-URL with the icon/image of that social media site. There are many social media icons which you can get for free. I will provide you the links a little later in this tutorial. You will have to replace the text in purple color with the alt text, it is text which will appear when users will hover mouse on that particular icon. It will help users in determining the Social Site.
If you want to add more Social Media Icons in your Blogger blog than just copy and paste the above code in your Gadget. If you don't like all the Social Sites or if you don't use one than remove that site from "<a" to "</a>".
You can get the social icons of your choice here and here and here too. If you don't find your favourite icons in these links than try Googling the Social Media Icons. You can also get awesome icons in Pinterest. Just choose the icon pack. It will not be good idea to have icon which doesn't look similar.

Do you know you can make your Social Media Icons to look awesome with the use of CSS. So, you want to add CSS effect in your Social Media Icons.

Add Awesome Effect With CSS in Social Icons

It may be little difficult for you to add the effect to Social Media Icons. If you will follow the instructions carefully than you will do it without any difficulties. Now see the instructions given below.

At first make a Backup of your Template. It will really help you if you destroy your template with little mistake.

• To Backup Template. Go to Blogger Home > Dashboard > Template. Now click on Backup/Restore which is located at top right corner.

Now you are ready to customize your Social Media Icons in your Blogger blog. You will only need to add few lines of Stylesheets in Template HTML. I will show you how to add this.

• After making backup of your Template Go to template page if you aren't right now.
• In the Template page click on Edit HTML.
• After that search for the code given below in the Template HTML.

]]></b:skin>

• Now add the CSS code given below just above/before ]]><.

.sm-icons {
opacity: 1;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.sm-icons:hover {
opacity:  0.8;
-moz-transform: scale(1.1) rotate(-350deg);
-webkit-transform: scale(1.1) rotate(-350deg);
-o-transform: scale(1.1) rotate(-350deg);
-ms-transform: scale(1.1) rotate(-350deg);
transform: scale(1.1) rotate(-350deg);
}

• Now save the Template by clicking orange Save Template Button. It's not over yet.
• After saving Template go to Dashboard > Layout. In the layout page click on "edit" on the Social Icon Gadget which you have added a little before.
• Now you have to determine class to each image. It is very simple. Just press CTRL+F to open search box and than search for "<img" without quotes.
• Now the time to give a class to each image. For that you have to write the code given below after every <img.

class="sm-icons"

See Image Above To Know Where To Add Class

• After writing class="sm-icons" after every "<img" you can save the gadget.
• Phew! it was little difficult adding CSS effects on Social Media Icons. But at last you did it. Go to your blog and see how your Social Media Icons in your Blogger blog sidebar looks.

If you are new to all these than you may feel it a little difficult in adding these icons. But if you go through each step carefully than you should have added a cute looking social Sharing Icon in Blogger Sidebar. I have tried to make this post as simple as possible.

I hope this post helped you in adding social media icons to blogger sidebar. If you face any problem in adding the icons in your blog than feel free to ask me or leave a comment below. I will try to help you in adding these social icons in your Blogger blog.