blogging

How to Add Social Media Buttons on the Sidebar

3:07:00 PM

How to Add Social Media Buttons on the Sidebar

If you are currently working on your blog design or you are thinking of adding some social media buttons on the sidebar of your blogger blog, then this is the tutorial you are looking for.

I also wanted to change the social media buttons in my blog but I didn't have the time to do it. If you fear of tweaking things on your blog, don't be because adding social media buttons isn't as hard as you think it is. You don't have to mess up with your template too because we will just add a gadget for this one. So, no fear at all. Here is the how to:

1. Look for beautiful social media icons for free download. You can search that in Pinterest or even in Google. For the ones I used for my blog, I got it from Verve and Sass while the icons above are from Lil Blue Boo.

Social Media Buttons

2. After you download the icon, upload it to whatever you use to store/ host your photos like Photobucket or Imageshack. I use Photobucket for my images. Upload each photo to it.

3. Then copy this code to a notepad or to a word document:

<!--social media icons--->
<center>

<a href="RSS FEED URL" target="_blank">
<img src="RSS FEED ICON DIRECT IMAGE URL" width=55px border="0"
alt="youtubeicon"/ ></a>

<a href="FACEBOOK URL" target="_blank">
<img src="FACEBOOK ICON DIRECT IMAGE URL" width=55px border="0"
alt=" facebookicon"/  ></a>

<a href="TWITTER URL" target="_blank">
<img src="TWITTER ICON DIRECT IMAGE URL" width=55px border="0"
alt=" twittericon"/ ></a>

<a href="PINTEREST URL" target="_blank">
<img src="PINTEREST ICON DIRECT IMAGE URL" width=55px border="0"
alt=" pinteresticon"/ ></a>

<a href="GOOGLE PLUS URL" target="_blank">
<img src="GOOGLE PLUS ICON DIRECT IMAGE URL" width=55px border="0"
alt=" googleplus icon"/  ></a>

<a href="INSTAGRAM URL" target="_blank">
<img src="INSTAGRAM ICON DIRECT IMAGE URL" width=55px border="0"
alt="instagramicon"/ ></a>

<a href="BLOGLOVIN' URL" target="_blank">
<img src="BLOGLOVIN' ICON DIRECT IMAGE URL" width=55px border="0"
alt=" youtubeicon"/ ></a>

<a href="TUMBLR URL" target="_blank">
<img src="TUMBLR ICON DIRECT IMAGE URL" width=55px border="0"
alt="tumblricon"/ ></a>

<a href="mailto:EMAIL ADDRESS">
<img src="EMAIL ICON DIRECT IMAGE URL"  width=55px
alt="Click to email me" ></a>
</center>

4. Change those in all caps. For example, change FACEBOOK URL to the link of your own Facebook Page. In my case it is https://www.facebook.com/PinkHeartString. Then look for the direct image url you uploaded. It has to be a .png file to make sure that there isn't any background. In my case, the direct url is http://i273.photobucket.com/albums/jj211/Kareen_Liez_Ecal_Datoy/facebook_zps46e0547d.png. I will change the FACEBOOK ICON DIRECT IMAGE URL to that link. So, the final look of my html code for the Facebook icon is like this:

how to add social media buttons

Do this to every URL and icon in the code.

About the width, you can change it if you want to depending on the size of your sidebar. If it looks big, then try a smaller value like 42px.

5. Once you are done with all the codes, go to your Blogger account. Then go to Layout>Add Gadget>HTML. Paste the code above and then Save. Place it on the area where you want the social media buttons to appear.

how to add social media buttons

6. Check your blog and your new social media buttons are there!

How to Add Social Media Buttons


This is my first ever tutorial! Wooot!! I hope you found this tutorial useful. If you have questions, feel free to leavee that in the comment section below. And if there is something that you want me to write about, lemme know.


You Might Also Like

30 (mga) komento

  1. That's a good tutorial. Helps to make your blog more personal when it's customized.

    ReplyDelete
  2. I remember when I was first learning to tweak my blog's design. Adding social icons was one of the first things I learned. Now, I know how to code the whole layout! :)

    ReplyDelete
  3. Wow, thanks for this post, I will try to follow the steps. I've been meaning to do this in my blog and I just don't know where to get the icons.

    ReplyDelete
  4. This is so timely :) Thanks for sharing this idea ♥ a struggling where to get icons :)

    ReplyDelete
  5. Wow. Thanks for sharing! I'm still learning the hoops on this whole blogging and looking for ways to customize my site. Does this work in Wordpress too? :)

    ReplyDelete
  6. Thanks for the tips! :) Will follow this on my other blog. :)

    ReplyDelete
  7. Helpful tips u have there.. Will try it later :) thanks for sharing!

    ReplyDelete
  8. great tips! My designer always do the job for me hihi

    ReplyDelete
  9. Thank you! I'm glad you all found this useful. @Ayi: It is only for blogger :(

    ReplyDelete
  10. This was very helpful! Thank you for posting. I've tired searching how to do this and thanks to you for presenting it in a very easy manner. I willd definitely try this out my blog now.

    xo,
    Louise of The Legendary Ukayista

    ReplyDelete
  11. Social Sharing Media Buttons are really an important part of making your website popular and driving traffic, they are an indispensable part of a marketing campaign so I agree they are essential for bloggers, great code suggestions!

    ReplyDelete
  12. This one's a challenge for me. But this could work for me. Thanks!

    ReplyDelete
  13. Your post is very timely and at the same time, it's informative and helpful. These days, social sharing buttons are very important. I'm all for social sharing buttons because it makes passing information a lot easier.

    ReplyDelete
  14. What a great tutorial! I am forever wanting to change mine, so may give this a go over the weekend :) Simone x

    ReplyDelete
  15. very helpful! and BTW the instructions are very clear- thanks for sharing!

    ReplyDelete
  16. Oooh, the code's already supplied, cool! That makes it easier for less techie peeps like me, hehe. Thanks so much!

    ReplyDelete
  17. I just added my social media button this week. I realized I only have three. I should start to develop my google+ page and facebook page. I feel I do not have time to update those so I did not create one.

    ReplyDelete
  18. Very nice tutorial. I will get back to this and see if your buttons will look good on my blog or not. Thanks!

    ReplyDelete
  19. I'm not using blogspot but the buttons are naise! Wordpress has loads of pretty ones too :)

    ReplyDelete
  20. I need to bookmark this page because I've been looking for customized share buttons and the way you presented this tutorial is very user friendly. Thanks for sharing.

    ReplyDelete
  21. I was looking for this before when I still hosting my blog in blogger, but i really find tweaking blogger hard so i shifted to wordpress

    ReplyDelete
  22. I am going through some changes to my site right now so this will possible come in handy. It is great to have it nearby.

    ReplyDelete
  23. I used to blog on blogspot and I had a swell time customising everything on my blog.
    Thanks for sharing!!

    ReplyDelete
  24. This is so helpful! I've been thing of doing this to shorten my sidebar, so this came at the right timing.

    ReplyDelete
  25. Oh man! That is so cool! Thank you for sharing! :) I've been trying to figure out how to do it in blogger since it's very easy to add in Wordpress. Now, here's the solution to my dilemma. Thank you sooo much! :)

    ReplyDelete
  26. Does this only work for Blogger or will this work for wordpress too? I really need to change out the social media buttons on our site too, but frankly.... am thinking of just getting someone to do that for me!

    Am sure this tutorial will help many out there!

    Best,
    Ling Tan
    www.kidsonboard.net

    ReplyDelete
  27. Thank you for easy tutorial! I'm thinking about doing a re design on my social buttons. This is great! :)

    ReplyDelete
  28. This is just in time. I am about to change my blog layout and I can't find the links to add social media buttons. Thanks.

    ReplyDelete