Pages

▼

2012/07/09

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.


at

7 comments:

  1. AnonymousJuly 9, 2012 at 10:08 PM

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

    ReplyDelete
    Replies
    1. Myric July 10, 2012 at 9:21 AM

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

      Delete
  2. JacindaJuly 10, 2012 at 4:02 AM

    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!
    Jacinda

    ReplyDelete
  3. UnknownMarch 15, 2013 at 1:35 PM

    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

    ReplyDelete
  4. UnknownMay 9, 2014 at 1:12 PM

    This comment has been removed by the author.

    ReplyDelete
  5. UnknownMay 9, 2014 at 11:53 PM

    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.

    ReplyDelete

Your sweet comment brightens my day