I am on


How To Add Social Media Icons

This blog started as a personal page to keep my family and friends from Manila updated on what's going on in my life.

Along the journey, I never thought I would meet many people and new friends from around the world. Most of them really inspired me to take blogging a little bit more seriously.

Now, apart from my own personal social networks and emails, I finally managed to get Petites Passions to have it's very own, Facebook, e-mail, Pinterest and Twitter like I've always wanted to and so I could get more connected to my bloggy friends!

I tried figuring out how to add those social media icons on my blogger such as this.

It is actually very easy. The only time consuming part was choosing which icons, because there are a lot of cute icons to choose from!
First, you have to find the images that you want to use. You can make your own or search for
some freeebies. However some are not for free. There are actually a lot of very nice social media icon set for free. Just read carefully the terms and conditions. Some of the contributors just want a link back.

Here are some samples of nice sets of icons I pinned in my Pinterest

There are a couple of ways to put the icons on your blogger, but I'm gonna tell you what I exactly did with this particular icons I chose.

I chose this set from leelou blogs. I find it so cute and easier. I didn't have to upload the image to image hosting site, and at the same time, I am giving credit to the designer.

 If you click the link leelou's link, you should see each banner has the code below. You will need that code later.

So, then go to your blogger dashboard then click 'layout'. Add a Gadget and click 'HTML/Javascript".

Copy and paste this code in the box

<a href="http://www.linkgoeshere.com"><img border="0" src="http://www.image-code- or-imageurlhere.com"/></a>

change the red highlighted link to your link.

do the same thing if you want to add another icon, but in the same box.

However, it's a little bit different with 'mail' icon. Instead, use...

<a href="mailto:youremailadd.com"><img src="http://www.image-code- or-imageurlhere.com" /></a>

then click save.

I hope this is helpful and I hope I didn't miss anything.


  1. This is a really helpful post. I have been puzzling over this for a while now, so a big thank you from me :)

    1. You are welcome Tracey. I am glad you find it helpful :)

  2. This is awesome. I am definitely going to try this as I've been wanting social media icons on my site for awhile now. Thanks, Myric!

    1. You are welcome Jacinda! My pleasure :)

  3. I also thought it was hard to put social media icons on my Blogger account, because I’m not quite savvy when it comes to HTML or CSS. With a little searching on the Net, I’ve found it’s actually quite easy. Glad you also have social media icons there now. These icons are helpful if you want to promote your social media sites on Blogger, and if you want your visitors and followers to connect with you easily. ->Pearlie Cybart

  4. This comment has been removed by the author.

  5. I heard one way to make your website SEO optimized is by linking social media accounts. Thanks for providing this method. I'd try this in my website.
    For effective and professional SEO advice visit http://firstpagehq.com/seo-company-miami/. This might help you as well.


Your sweet comment brightens my day