How To: Add Social Media Icons To Your Blog

I can't count the amount of times I've changed my blogs look. I've gone through about 5 different backgrounds, 4 layouts, and dozens of widgets and gadgets. But as of the 19th of March this year {Yesterday} I've finally completed my blogs look!... 
Ok, you've caught me, you've caught me! 
That's a lie, since I'll probably change something about my blog before lunchtime again haha

But I guess that's the beauty about blogging, my blog gets to grow with me!



 How Do I Add Social Media Icons To My Blogger Blog?

Step 1~ Before you can start adding any social media icons to your blog or website, you'll first need to find {Or buy} a set. I have a few FREE SET's on my blog, but I also sell them in my Etsy Shop.
Before you can use them, you'll need to download the files. If they're squares they can be JPEG files, but if they're circles or odd shapes they should be PNG files.

Step 2~  Now you'll need to upload your icons to Photobucket or a similar site.

Step 3~ You'll need to find your images URLS now.
If you stored your images on Photobucket, you'll see a box on the right hand side of each image with the name "Image Links". You want to copy the link called "Direct Link". See below.


Step 4~ Head on over to your Blogger blog. You want to head to the section "Layout"
Once there you want to click "Add a Gadget". A window will pop up with a couple dozen of gadgets to choose from. You want to choose the one that says "HTML/JavaScript". The new page that appears will be where you'll be adding your HTML code.


Step 5~ In this new page, do not add a title. You can if you want to, but I always feel things will look cleaner in the end if you don't. In the big blank box in the middle you'll want to add the following code.

<a href="http://www.YourWebsiteAddress.com"target="_blank" ><img src="http://www.URLofImageLocation.com" height="70" width="70" /></a> 

http://www.YourWebsiteAddress.com ... this is the URL http address for each of YOUR websites like your Facebook, Twitter, Etsy, Pinterest etc.

For example my Facebook Page's is,
http://www.facebook.com/HopefulHoney

Email is a bit different.
To link to email, fill in the "Your Website Address" like this,
<a href="mailto:hopefulhoney@hotmail.com"target="_blank >

target="_blank"  This bit of code makes the link/icon open in a new window.

http://www.URLofImageLocation.com... this is the Direct Link address from each image you got from Photobucket previously. 

height="70" width="70"... this is where you get to decide to size of your icons/buttons.

{You can keep adding this same code over and over directly behind each other if you want to add more icons, just remember to change the URLS.}

Click SAVE. 



To move your icons, drag and drop them where ever you want your icons to be on your side bar and click save again.



That's it...Your Done!!!

For more blogging tips click the link below.
"5 Tips To Improve Your Blog"



Don't the icons look so pretty! It's amazing how media icons can give any blog a 
more professional feel, isn't it?
Now I know words like "HTML", and "Coding" sound pretty scary, 
but wasn't this tutorial easy peasy?
I hope everyone reading this who owns a blog will challenge themselves and give it a go!
If it doesn't work the first time, just give it another go!... You wouldn't want to give up and then be deprived of the amazing feeling you get after having improved your blog!
Surprisingly, once you know how to work with basic HTML it can be pretty fun!
I hope you all enjoyed that tutorial, if you have any questions, comment away!
Have a great day blogging!


394 comments:

  1. I was just searching the web for the "hows" on adding these to my blog! Thanks for the post here...very helpful!

    -Michelle
    http://ardourofadreamer.blogspot.com/

    ReplyDelete
    Replies
    1. Hi Michelle!
      You know what, you just gave me a huge smile! I love being able to help people out so knowing that I did makes me super happy!

      I love your blog by the way! Your writing skills are amazing, you're very talented!

      do you have any social media icons? If you don't, in my previous blogpost I shared a set of free social media icons. If you like, if you have a certain colour you'd like those icons and you don't know how to change them, I could make you the same set but in a different colour for free :) I have some time on my hands at the moment haha Just let me if you'd like that or not :) you can find my email at the contact page above.
      Have a great day!
      Olivia Xx

      Delete
    2. This comment has been removed by the author.

      Delete
    3. This comment has been removed by the author.

      Delete
    4. Thank you! Finally an explanation that makes sense to someone with only the tiniest understanding of code!

      I used this for both my blogs!

      Selena Marie

      http://savingwithselena.blogspot.com/
      http://kindredclosets.blogspot.com/

      Delete
  2. This is really helpful - Thanks! I haven't really got any social media sites for my blog as it's still pretty new, but I'm thinking they might be a way of attracting a bit more attention? xx

    ReplyDelete
    Replies
    1. Aw I'm glad this was helpful!
      I'd definitely say social media icons are an important aspect of any blog! One of the first things I do once I like a blog is search for their social media icons, since that's an easy way to find them everywhere else in the web :)
      So it's great for more likes and followers on all your social media sites :)

      Delete
    2. Hiya! I'm using your buttons, and love how easy this tutorial was to follow! I'd like to make a 'ravelry' to match the ones I'm using (I used these: http://www.myfavouritethingsblog.com/2013/04/free-pink-social-media-icons.html) and was wondering if you could help point me in the right direction?

      Thanks a million,

      Amy @ http://creativelyinclinedways.blogspot.co.uk/

      Delete
    3. Hey Amy!
      Gosh they look so cute on your blog!
      I just went ahead and created a "Ravelry" icon and added it to that post, hope it's what you're looking for! :)
      Thanks for stopping by Xx

      Delete
    4. You're such a star that's exactly what I wanted! Thanks so much :)

      xx

      Delete
  3. I love it when people share info like this. It takes a village and if we all shared with others, there would be a whole lot of empowering going on. Wonderful info, well written...huge thank you for the time and effort behind this post. Annette

    ReplyDelete
    Replies
    1. Wow, thank you so much! This is the first time I've ever written a HTML coding blogpost, and I was scared I did a terrible job, but it's great to know that I did it right!
      Xx

      Delete
  4. Thank you so much Olivia!
    I've got a new blog and tried to inset these, however I must be doing something wrong with the "Photoshop" link. I'll keep plugging away! (Pun intended) ;)

    Peggy
    http://south47th.blogspot.com/

    Xo

    ReplyDelete
    Replies
    1. Hi Peggy!
      Aw I'm so sorry you're having such difficulty! Using HTML can be quite tricky at times.
      If you'd like me to do the HTML coding for you, just send me an email with the links of the places you want your buttons to go to, and the DIRECT links of the photos from photobucket :)

      Otherwise, just keep trying! :)
      Your blog is beautiful by the way. I love your backround!
      Olivia Xx

      Delete
    2. Thank you so much Olivia for your kind words and generosity!

      I'm going to keep trying for a wee bit longer! If I still can't get it, I'll send you the info and THANK YOU for your help!!

      Xo

      Peggy

      Delete
  5. Love these! For some reason though -- each button takes me to our facebook page instead of google+ or pinterest! I've gone back through the codes and they seem to be right, any ideas? Thanks!

    ReplyDelete
    Replies
    1. Umm I'm not sure. If you'd like, you can send me the finished code via email and I'll take a look :)
      Xx

      Delete
  6. Saw your post on Pinterest, this is exactly what I have been looking for! I'm going to give it a try! And I'm joining your blog too!
    Thank you,
    ~ joey ~

    ReplyDelete
  7. Thank so much for these! I am loving my new mint icons on my blog!
    (http://livinglaughingandinlove.blogspot.com/)

    ReplyDelete
    Replies
    1. Aw you're welcome! :) Glad I could help!
      I love the bold and beautiful colours on your blog, and I think the mint icons look right at home :)
      Xx

      Delete
  8. im having a hard time loading this onto my blog??? ive tried several times maybe im doing it wrong?

    ReplyDelete
    Replies
    1. i got the Pinterest Image to show up on blog but it wont link to my page?it links to my photobucket site?

      Delete
    2. Hi Ericka!
      I'm not sure why it's not loading, so sorry!
      About the Pinterest button I think you might have pasted the the photobucket link into the place where your Pinterest profiles URL should have gone.
      If you're still having trouble you can send me an email with the URLS of the sites you want, and the Photobucket photo links and I can do the HTML coding for you :)
      Xx

      Delete
  9. hello
    i followed your tutorial but it's not showing up at all :/

    i clicked save, and uploaded the icons to photobucket then linkedthem so i can't understand it ? help

    ReplyDelete
    Replies
    1. Heya Kathy!
      Oh I'm so sorry it's not showing up!... I'm not sure why that's happening, but if you're still having trouble with it I wouldn't mind doing the coding for you if you just send me the photobucket links and website links to my email ~ myfavouritethingsblog@hotmail.com
      It'll only take me a few minutes :)
      Xx

      Delete
  10. Thank you so much for your post and icon ^.^ It's very helpful
    I'm using your pink icon. Love the color.
    (http://d4zzlingme.blogspot.com)

    ReplyDelete
    Replies
    1. "Wow!" I just took a look at your blog and that's all I can say! Your nail art is amazing :) Have you ever considered starting a nail art youtube channel?? I think you'd be really good at it!
      I'm so glad this tutorial could help you out! The icons look adorable on your blog!
      Xx

      Delete
  11. Olivia thank you SO much for sharing a set of free social media icons and your amazing tutorial to follow!
    I am so happy that I found It... It's very helpful!!!
    Before I was having a hard time on find out how to add social media icons and loading on to my blog, I just could not understand how to do it! This is the first time I've ever I used HTML code.
    Now I'm using your pink icon and I love it!
    I was wondering if you could help point me in the right direction on how to change the colour and size if I need.

    Tanira xx
    http://tantiquelondon.blogspot.co.uk


    ReplyDelete
    Replies
    1. YAY! I'm so glad you took that brave step forward in blogging where you begin to use HTML :) Once you start it just gets easier and easier! I'm so glad I could help you out!
      If you want to change the size you'd just use the coding below. All you're adding to the orginal code is the height and width right at the end :)

      "YourImageLocation" height="45" width="45"(Add a space HERE and then the rest of the code)

      If you want to change the colour you could use Picmonkey. It's a free photo editing site. You just click on the action "Tint" and then pick a colour! Pretty simple, right??

      Hope this helped you out :)
      By the way your blog looks really cool!
      Xx

      Delete
  12. This comment has been removed by the author.

    ReplyDelete
  13. Thank you so much for your help! xx

    ReplyDelete
  14. Thanks so much for this post! I just started working on my own blog and I don't know much about how blogger works! I can't wait to get home and get my cute icons!
    p.s. your blog looks lovely!

    http://hellolupi.blogspot.com/

    ReplyDelete
    Replies
    1. That's ok! I didn't know much until 6 months into blogging haha
      Thank you for the super sweet words :) Your blog looks like it's going to be super interesting!... Any idea yet what you'll blog about??
      Xx

      Delete
    2. I'm not sure yet! I would like to share cute outfits inspiration posts and some diy projects too! I see your blog has a lot of different info! Did you start your blog with an specific topic and it grew with your interests?

      Milu

      Delete
    3. That sounds like a great plan! :)
      Well I started out mostly doing jewellery tutorials, but over time I added different things that were "My Favourite Things" :)
      The reason I started blogging was to share things that helped me so I could help others :)
      Xx

      Delete
    4. Cool! Hey Olivia another question, how did you get your profile image to be in a circular shape? I've looking on google everywhere and I can't find an answer :/

      Delete
    5. I cropped it in photoshop, but you should be able to do it in Picmonkey which is free. Just go to the section Frames, then click on the tab Rounded Corners.
      Then I just saved it as a PNG file :)
      Hope this helps!

      Delete
    6. HA I thought it was an html code or something! I got it to work yay! thanks for your help. Check out my blog now! I have added a lot more! I haven't posted anything yet though lol

      Delete
    7. It's looking great so far! Can't wait to see what you'll blog about :)

      Delete
  15. After researching all day and becoming more frustrated, I finally found your site and managed to add my buttons. Sigh...

    Thank you SOOOO much, Olivia, for the great tutorial and for the free buttons!! Here they are: http://dorahiers.blogspot.com/

    ReplyDelete
    Replies
    1. Hi Dora,
      You don't know how happy it makes me that I could help you out! :)
      The buttons look great on your blog!
      Olivia

      Delete
  16. Thank you for this! It's so helpful. My new blog hasn't launched yet but I'll be sure to let you know =)

    quick question- Do you know the code so that the links open in a new window? I would like readers to be able to keep my site open while browsing my social media profiles. Thanks again!

    ReplyDelete
    Replies
    1. I can't wait to see it! What do you plan to blog about?

      I'm sorry but I don't know, I usually just right click and "Open in a new tab"... Wish I could've helped!
      Xx

      Delete
  17. Thank you so much for this post! It has been featured on My Favorite Blogging Resources post. You can view it here: http://kraftycardsetc.blogspot.com/2013/05/my-favorite-blogging-resources.html

    Have a great day!
    Maria

    ReplyDelete
    Replies
    1. Thank you for the sweet comment and the feature! It means a lot to me :)
      Hope you have a great day too!

      Delete
  18. Hi Olivia,

    thanks so much for this icons and tutorial, I really like it! :) I have a question, how do I place them horizontally like yours?

    Cheers,
    KT http://ktlifestyle.blogspot.com/

    ReplyDelete
    Replies
    1. Hi!
      I just made the icons smaller and my sidebar bigger :) There just needs to be enough space for them to be placed vertically.
      Xx

      Delete
  19. Thanks Olivia,
    Excellent tutorial - one of the easiest I've found so far!
    Marie
    www.InteriorFrugalista.com

    ReplyDelete
  20. Hey, Olivia! I'm working on doing these, and when I said the HTML gadget, the buttons come up (larger than I like, but I can fix that), but it has height="70" width="70" /> next to each button. Pretty sure I copied and pasted correctly... Any suggestion?

    ReplyDelete
    Replies
    1. Nevermind! Apparently, I tinkered with the code enough and I fixed it. Love it!

      Delete
    2. I'm glad you were able to figure it out! :)

      Delete
  21. Hi Olivia, thank you so much for the tutorial, the buttons worked! Mine are a little bigger than i'd like though and changing the values in the height and width section doesn't seem to be helping, i tried adding a space like you suggested above but that didn't work either, any suggestions? :)

    ReplyDelete
    Replies
    1. Hi!
      Whoopsy, I just realised I made a mistake in the HTML about the size. Sorry about that!
      I just fixed it, and tested it so it should be working fine now :)
      If you have any more trouble with the icons just let me know, I'd love to help.
      By the way, your blog is really cool! :)

      Delete
    2. thank you so much, got it working now! thank you! :)

      Delete
  22. Thank you so much! Your instructions were clear and easy to follow once I practiced.
    Please stop by my blog sometime; I'm quite new. Would be very greatful for a follow.
    Love Rachel xx
    http://heartoceansecrets.blogspot.co.uk/

    ReplyDelete
    Replies
    1. Aw I'm glad I could help you out!
      Your blog is super cute! I love all things beauty :)
      Sincerly,
      A new follower

      Delete
    2. Thank you so much, it means a lot. I'm reading your older posts and I might even pick up crochet again x

      Delete
  23. Once you've followed her tutorial, you'll want to upload your images to an image hosting site. I use Flickr. To grab the link for the code. get more instagram followers

    ReplyDelete
  24. Thank you! It was very easy to do it with your method. I'm also using your buttons. Super cute.

    ReplyDelete
    Replies
    1. They look great on your blog! :)

      Delete
  25. Thanks so much for the free icons... LOVE LOVE LOVE them! I'd love for you to stop by and check them out at http://finleygray.blogspot.com/

    ReplyDelete
    Replies
    1. I just had a look and read of your blog and I have to say I think you're a great blogger! :)
      Thank you for the sweet comment Xx

      Delete
  26. hey, I have a problem, all keep opening as the first link, even when the images are different, and I have changed the links

    ReplyDelete
  27. No worries, I got that sorted out, thanks also used your images and followed your blog xx. my first right html code.

    ReplyDelete
    Replies
    1. YAY for your first time using HTML! :) Once you start working with it it really opens up a whole new blogging world!
      Thank you for the follow Xx

      Delete
  28. You have no idea how excited this made me! I had spent three hours trying to figure this out and with your post I've finished it in 15 minutes. I had planned to do a tutorial of how I added my buttons but, because yours is so well done, would you mind if I directed people your way instead?

    ReplyDelete
    Replies
    1. ... and YOU have no idea how happy it makes me that I was able to help you out with my tutorial!
      I don't mind at all, in fact I feel very honoured :)

      Delete
  29. Hi Olivia,

    Thank you, thank you, THANK YOU!!! After spending a month admiring other bloggers' social media icons, I decided to google 'how-to' and came upon your post. This tutorial was extremely helpful and easy to follow. I was able to get this done in a matter of minutes without any frustration. I used your light pink square icons. Thank you for this gift. Looks great on my blog! Check it out: www.theclosetbychristie.blogspot.com

    I love your blog design! Where did you get your template? I'm thinking about re-styling my blog.

    Thanks again,

    Christie
    The Closet by Christie

    ReplyDelete
    Replies
    1. Hi Christie,

      Wow, thank you! I'm so glad it was so easy to follow.
      I use the template "Picture Window" on my blog, but I customised the colours, backround etc.
      Isn't it always so exciting (and extremely satisfying) when you do a blog makeover and it turns out great??

      Your blog is super cute! I also love the way you write about style and clothes, very captivating :)
      Have a great day!
      Olivia

      Delete
  30. I can't get them in a straight line but it's better than before!! THANK YOU!!!
    Jules
    jenesaisquoijules.blogspot.com

    ReplyDelete
    Replies
    1. Maybe try making your sidebar wider? Or the icons smaller?
      Xx

      Delete
  31. Hi Olivia! I'm BRAND new to blogging-as in 24hours brand new ;) - and was given your link by a friend to get the social media buttons and first try got them to work! Thanks so much for posting free buttons and such an easy tutorial for those of us out here starting up blogs! That was extremely helpful and I want to give YOU all of the credit because there is no way without those codes and directions that I would be able to get up and going with my connections to social media :) My blog has one post and not quite designed yet, but I'd love for you to pop over and check it out sometime (http://a-beautiful-life-thru.blogspot.com/)! I'm really excited about meeting and connecting with new people through this blogging adventure :)
    Thanks again!

    Erica

    ReplyDelete
    Replies
    1. Hi Erica!
      Wow, congratulations on starting your blog! I have to warn you though, blogging can become quite addicting ;)
      Thank you for being so sweet, I'm just really happy that my post and icons helped you out!
      I just visited your blog and read your first post, and all I can say is I can't wait for more! You are quite the natural when it comes to blogging.
      I wish you all the best of luck on your new adventure,
      Xx

      Delete
  32. How to get these icons in png??? Thank you. Kisses from Barcelona.

    ReplyDelete
    Replies
    1. Just hover over the image you want, right click and click "Save Image" It will automatically save as a PNG file to your computer.

      Delete
  33. Sorry again. When I save the image all icons are together. Not in PNG.

    ReplyDelete
    Replies
    1. Which image are you saving? Every time I save one of my free icons it's saved to my computer as a PNG file.
      Wish I could help you, but I'm not sure why it's not working for you.

      Delete
  34. Thank you so much! This post was very helpful.
    I'd been wanting to add social media buttons to my blog for the longest time, and your method worked like a charm!

    ReplyDelete
  35. Can I just say thank you so so so much! Such a helpful post which was super easy to follow - I owe you alot! Really really pleased with the result! Thanks again you are a star!! xxxxxx

    http://ayellowbrickblog.blogspot.co.uk/

    ReplyDelete
    Replies
    1. They look G.R.E.A.T on your blog! :)
      I love all things beauty related so I'll have to read some of your blog posts!
      Xx

      Delete
  36. Wao Olivia great working I bookmark your blog and you are awesome!

    ReplyDelete
  37. Thank you so much Olivia! This was a great help after two days of confusion with other instructions!

    Rose
    xx

    maamerose.com

    ReplyDelete
  38. Your tutorial REALLY helped me!! I felt so proud of myself after I got the code to work:) I am giving you a shout out on my blog post tomorrow. I hope that is okay!
    ~Holly
    Fourth Grade Flipper

    ReplyDelete
    Replies
    1. That's great that my post helped out out so much!
      I don't mind at all, in fact I'd love a shout out! :)
      Xx

      Delete
  39. Thank you so much for sharing this information! My buttons look great on my blog, www.FranticMama.blogspot.com. I really appreciate it!

    ReplyDelete
    Replies
    1. They look great on your blog! :) Glad I could help you out Xx

      Delete
  40. Super duper helpful! I like the Pantone icons I chose for my blog : www.eastevelynsquare.blogspot.com

    Thank you for this post. I had no idea how to get the icons on my blog. lol. Found you via Pinterest. :)

    ReplyDelete
    Replies
    1. Aw thank you for the sweet comment!
      I love all the beautiful photos of jewellery on your blog :)

      Delete
  41. Thanks for writing this entry! I'm just learning how to design my blog and I've set up my social media but felt stunted without the buttons. Very much so appreciated!

    ReplyDelete
  42. Thank you so much for this tutorial. I have been searching all over - thinking that these buttons came from some nifty blog plugin. But no - instead it was just very basic html and some pretty icons. Yeah!
    I've shared your post on my facebook page.

    And also thanks for admitting that you are totally addicted to changing your blog around - I suffer from the same affliction :-) Your blog looks lovely at the moment <3

    Thanks again
    xx
    Eddie

    Come over and ‘like’ Eddie's Room on Facebook for some crafty ideas and conversation. :-)

    ReplyDelete
    Replies
    1. Thank you for the share!
      I'm so glad my post was helpful to you.
      Hahaha yes I am addicted! In fact, I've changed a few other things on my blog since this post... I just can't help myself!
      Hope you have a wonderful day,
      Xx

      Delete
  43. so this was way easier to follow than any other website. I made my own social media icons with pic monkey and then used this for the uploading a html coding! You are a rockstar! I ill have to give you a shout out when I mention my new buttons in a post. Thanks so much and check them out here: gaudyssey.blogspot.com

    Chloe

    ReplyDelete
  44. Hi Olivia, really enjoying going through your blog, very delightful and this post is exactly what I was looking for.

    Thanks!
    Amani

    Pass by and say hi www.biblefoodfashion.blogspot.com

    ReplyDelete
    Replies
    1. Aww thank you! I'm glad my post could help you out!
      Xx

      Delete
  45. Thank you so much for these <3 I'm brand new to blogging and had always wondered how people got these links.

    http://misfitxtoy.blogspot.co.uk/

    ReplyDelete
  46. Thank you for this tutorial! :) I used your mint-colored social media icons. They're lovely. :)

    ReplyDelete
  47. Thank you so much, I've been trying to to created these links for ages but failed every time but, thanks to you, I have some lovely pink buttons that link to my social media. Thank you, they're amazing!

    xx

    razmataz-girl.blogspot.com

    ReplyDelete
  48. Thanks Olivia! I have launched my first website http://www.mushrooms.co.nf a few days ago and I was looking for the information that you provided in a simple way. thanks again.

    ReplyDelete
  49. Thank you! For both the tutorial and your lovely pink social media icons.

    ReplyDelete
  50. Hi Olivia! I love this post. I'm currently working with a blog designer, and thought I could do this bit on my own. One quick question, every time I make an icon, it only uploads the first one, and the rest are broken links, with broken pictures. Any thoughts? I would love you're help!

    This tutorial is AWESOME! I'm technically challenged, so it's probably just me. ;) It's VERY easy to understand, and fun. You definitely have a talent for teaching, and you're responses are genuine too. I love how invested you are, it's admirable. Thanks for your time!! :)

    ReplyDelete
    Replies
    1. Hi Kelly!
      Oh I'm sorry you're having trouble with the HTML coding.. I'll try my best to help you out!
      Every time you want to add another media icon you need to add the entire code I shared above right behind or before it. If you leave anything out it won't work.
      If somethings still wrong try doing the code again. You might have left out one small number or coma and unfortunately HTML is not very gracious about mistakes. You need to get it completely right.
      The broken pictures could be because you're not using the right direct photo link.
      If the codes still not working you can send me the direct photo links, and the links to your sites to my email address (myfavouritethigsblog@hotmail.com) and I'll create the code for you.

      Your comment is so incredibly sweet! Thank you for making my day :)
      This is my first blogpost about blog designing and I was super worried that no one would understand it haha You've finally put my mind at ease!
      I hope you have a fantastic day!
      Olivia

      Delete
  51. Thank you soooo much for this! I literally have been wanting to do this for so long now but have never been able to understand it from any other sites so gave up and then came across yours and have finally managed to do it - so thank you!! I used your pretty pink buttons on my blog at http://modemadeleine.com/ keep up the good work!! xx

    ReplyDelete
    Replies
    1. Aww I'm glad I could help!
      Your blog has such a beautiful and elegant feel!
      I love fashion as well so I'll have to keep reading your future posts :)
      Xx

      Delete
  52. Thanks for totally awesome tutorial for social media icons. It took me a while to get the icons to my liking and how they look on my new blog. I really like your pink free icons but it doesn't match my blog colors and the mint green is too bright. Nonetheless, everything is so cute.

    My new WIP blog:
    http://the-quiet-mouse.blogspot.com

    ReplyDelete
    Replies
    1. Hi Kae!
      I'm glad the tutorial helped you out :)
      If you'd like to change the colours of the icons just upload them to Picmonkey (a photo editing site) and click "Effects" and then "Tint" and choose the colour you'd like.
      Olivia

      Delete
  53. THANK YOU! You post was exactly what I needed & So Very Easy to understand! THANK YOU! We are just getting our blog set up ~ www.becomingwealthy101.com. Please stop by to see up in a bit.

    ReplyDelete
  54. Benefits of Online Social Networking. While there are risks inherent in online social networking, there are also many potential benefits. www.realigfollowers.net

    ReplyDelete
  55. thank you these are beautiful and the colour matches my blog perfectly!

    www.retrococktail.co.uk

    Jodie x

    ReplyDelete
    Replies
    1. Your blog has such a unique and adorable feel about it!
      They look great on your blog :)

      Delete
  56. Thank you somuch for helping me.:D Here's my blog: http://annedorothy.blogspot.com/

    ReplyDelete
  57. It worked! Thank you SO much for the tutorial and the pretty pink buttons, they go perfectly with the rest of my blog design. I've been trying forever to do this and could never figure it out, and thanks to you my blog looks prettier and more organized now. Thank you!!

    ReplyDelete
  58. For ages I have been trying to find out where you find these icons or how you put them on!

    Absolute LifeSaver :)

    I have added them to my blog, check it out, I really appreciate a comment on what you think of my blog...

    Do you have the subscribe one and popular post one as well?

    XoXo

    http://girlchasingthedream.blogspot.com

    Thank you soo much!

    ReplyDelete
  59. Hi !! i just started my blog and when i found yours i was so happy because it's so hard to find any help online sometimes !! This was clear and an overall awesome post ! Thanks so much for the free icons <3
    :)

    ReplyDelete
  60. Thanks for your helpful post, really useful trying to navigate the minefield of blog design!

    ReplyDelete
  61. You can actually implement any kind of social media icon that you wanted in there. You can also add CSS styles via the

    "style" tag

    I have some new "floating" social media icons that you can feature for free if you'd like.

    They are over at
    http://samuelhollis.com/blog/

    I can also help anyone with implementing HTML/CSS or customization of something you want or can't find.

    If you need any help with further HTML/CSS posts I wouldn't mind co-writing for it as well.

    You can let me know via my website or Twitter
    @SamHollisDesign

    Have a good one and good luck with your social media icons everyone.

    ReplyDelete
  62. I've been looking for this for absolutely ages ! Thank you so so so so MUCH ! It looks so much better now. Thanks again !

    http://passion-for-beauty.blogspot.com

    ReplyDelete
    Replies
    1. I love all things beauty related! Your blog looks very interesting :)

      Delete
  63. Thank you soooo much for this tutorial and cute mint green icons. I felt my blog is extra fancy with them on ha ha ha thank you so much again :)

    ReplyDelete
  64. Thank you so much for this fantastic tutorial! I was always annoyed by how untidy things looks with random links of my social site splattered all over my blog but now I finally have buttons on my blog all thanks to you! Keep in touch
    xx
    www.JuneWantsItAll.com

    ReplyDelete
    Replies
    1. I was just as annoyed as you are before I got my icons!.. Everything just looked so much more tidy and professional when your blog has social media icons :)
      Your blog is amazing! I've already read through 4 or 5 posts and I'm really enjoying them!
      Have a great day,
      Xx

      Delete
  65. Thank you oh so much I love these gorgeous buttons, they look fabulous on my blog http://www.densultnestuderende.com/

    I've been looking everywhere for something like this and thanks to you I've finally found it :D:D:D:D

    ReplyDelete
    Replies
    1. I love your blogs whole look! The backround and header image are really cute!
      Glad I could help!
      Xx

      Delete
  66. So Helpful! Thanks for such a fantastic tutorial Olivia.

    It seemed like I was searching forever on how to add these and here you were :)
    Keep rocking!

    - Nicole xo
    http://blondeoneverything.blogspot.ca/

    ReplyDelete
    Replies
    1. Aw I'm just glad I could help you out :)
      The icons look very cute on your blog!

      Delete
  67. Thank you so much...I was able to make it work with your directions :) www.heartfeltbyrobin.blogspot.com

    ReplyDelete
    Replies
    1. Your links are perfect thank you so much, for some strange reason i was unable to write my own comment, so sorry for invading this one!
      I was wondering if you had a post on how to add your social media networks under your signiture like you do above? I have been looking for a while but not yet found a decent how to.

      Thankyou so much again

      http://polkadella.blogspot.co.uk
      xxx

      Delete
    2. Hi Daniella!
      All I do is write the names of my social networks, attach links to them and then I separate them with the pipe symbol on my keyboard (This symbol | )
      And I created my signature on Picmonkey as a PNG image and used one of their texts.
      Hope this helps!
      Xx

      Delete
    3. Ah brilliant i'll try that :) thankyou! something so simple yet so hard to find.
      I love your blog, it's the cutest.
      Thankyou again!
      xxx

      Delete
  68. Thank you, just what I have been looking for for my blog, and your tutorial is very clear and easy to follow.
    website design

    ReplyDelete
  69. Thank you so much for the tutorial, this was the best won i've found!

    withalltheglitter.blogpsot.com

    ReplyDelete
  70. So excited to have just added these to my blog! Thanks so much for the super helpful tutorial and free icons :)

    ReplyDelete
  71. This was super helpful; thank you!

    ReplyDelete
  72. hi i am beginner in blogging.
    if i remove my images from photobucket after i have used the link would my button (social media) disappear?

    ReplyDelete
    Replies
    1. Yes, if you delete the images off of photobucket your icons will disappear.
      Xx

      Delete
  73. I have been searching for hours tonight on how to do this. This tutorial is the easiest one to understand, and the only one I was able to follow. Thanks so much for your help.

    ReplyDelete
  74. hi olivia.. thank you for the tutorial. it is very helpful. :)
    http://madebyfarhani.blogspot.com/

    ReplyDelete
    Replies
    1. Glad I could help!
      Those cookies on your blog look super yummy :)

      Delete
  75. hei, i really do not understand it.could you please help me out. is this the code...because it does't work on my blog.. please help me

    ReplyDelete
    Replies
    1. Hi!
      I'm not sure why it's not working, did you check the code? If you have any other questions just let me know.
      Xx

      Delete
  76. Hi! I'm a new blogger. When I add the pic to photobucket, how do I get each image to have a domain link? Thanks!!

    ReplyDelete
    Replies
    1. You can bulk upload to photobucket and once it's in your library click on each individual image and copy the direct link from the right sidebar.
      Xx

      Delete
  77. I used your amazing mint free social media icons!! Thanks so much for this tutorial! It helped me so much... I wouldn't have been able to do it!

    Xo,
    Kahana

    abeautifullife42.blogspot.com

    ReplyDelete
  78. I can't count the amount of times I've changed my blogs look. I've gone through about 5 different backrounds, 4 layouts, and dozens of widgets and gadgets. instagram followers for sale

    ReplyDelete
  79. Thank you so much for sharing =) It was super easy and super helpful =)

    ReplyDelete
  80. This was so helpful! Thank you so much!
    xx Rena Kiss and Make Up

    ReplyDelete
  81. Thank you so much for this post Olivia!!! I have been working on getting social icons on my blog for quite a while now and until I stumbled upon your blog post I just could NOT figure it out! Your tutorial was simple, easy and best of all IT WORKED!!! thank you so much for taking the time to show us "first timers" how to better their blog! P.S. I love what I have seen of your blog so far! Its adorable- keep up the good work:)- Devon

    ReplyDelete
    Replies
    1. Hi Devon,
      I'm so glad that my post helped you out!
      Thank you for the super sweet compliments, they really made my day!
      Have a lovely day,
      Xx

      Delete
  82. Thank you so much Olivia, you are a gem! These icons are gorgeous and your instructions on how to do it was fabulous. Please feel free to check them out on my new blog http://glamourcoastalliving.blogspot.com.au/
    Thanks again xx

    ReplyDelete
    Replies
    1. Your blog looks great and I'm glad this post helped you out! :)
      Xx

      Delete
  83. Hi Olivia! This is a great read and I'm looking forward to trying it! Quick question though--will this work in Blogger Dynamic View templates?

    http://primpmybride.blogspot.com/

    Thank you!
    Martine

    ReplyDelete
    Replies
    1. I'm pretty sure it will work, but I can't be a 100% sure, sorry!
      Maybe just try one icon and see if it works?
      Xx

      Delete
    2. Hi Olivia and Martine,

      I think I can help with this question. Blogger Dynamic view doesn't have a side bar, so it wouldn't work unless it is inserted into each blog in the html code tab on the Blogger post page. I tried it and decided to switch over to Simple View.

      The benefits of Dynamic View is that it is very image rich, but the drawbacks are that it is not very friendly for customization or for not-so-tech-savvy visitors because it only allows a few "apps" in the scroll over area. And they only show up when you scroll over it. Also the scroll is hard to use because of this.

      This code works fantastically in the Simple View through an HTML insert in the side bar.

      Hope that helps!

      Selena Marie
      http://savingwithselena.blogspot.com/
      http://kindredclosets.blogspot.com/

      P.S. Love the tutorial!

      Delete
    3. Thank you for all your help Selena! I'm sure your answer will help out a lot of other bloggers :)
      Xx

      Delete
    4. Thanks Selena for clarifying!

      Delete
    5. Hi Olivia,

      I changed the format of my blog and was able to install your icons with no problem at all. I finally feel like my site now looks beautiful--thank you so much again for posting this tutorial!

      http://primpmybride.blogspot.com/

      Delete
    6. Your blog is looking super cute! :)

      Delete
  84. Thank you for posting this! I used your mint icons on my blog! xx

    Daphne | Peanut Butter and Chocolate | bloglovin'

    ReplyDelete
  85. Nice widget Olivia Sis. Thanks for sharing this awesome and beautiful widget.

    Also Check : http://www.spicytechtips.com/2013/07/pop-out-effect-retro-social-widget-for-blogger.html

    ReplyDelete
  86. Thank you SO much for this post! I had no idea how to get the buttons and you made it very user friendly :)
    I used some of your free ones on my blog and love them! Thanks again,
    Hannah.

    glossfox.com

    ReplyDelete
  87. Thanks so much for the free icons! Your blog is great. I used them on my site at www.kdbrownwriter.blogspot.com.

    ReplyDelete
  88. Hi Olivia,

    Your guidance helped me get social media icons up on my blog (http://newyorkfoodfight.blogspot.com/) Thank you for being so helpful. I really really appreciate it!

    Larisa

    ReplyDelete
  89. This is so helpful, thank you! I've been reading blogs for aages, but only just had the confidence to start one myself. When you have no idea where to start, it seems so daunting but I've got my first post up and lots of ideas for more. And now, with your help, I can make it look how I want too! Thank you :) Essie xxx

    http://thelilsparrowblog.blogspot.co.uk/

    ReplyDelete
  90. Thank you so much Olivia ! :) I'm just a beginner in blogging world and I loved the fact you provided the icons for free. I have used them on my newly born blog highheelsonwheel.blospot.in

    Thanks again, lovely lady!

    ReplyDelete
  91. Hi Olivia:)

    I'm having some issues lol. I've gotten my images saved to photobucket, and did everything else, but when I hit save, and view my blog, the images of the icons don't work. Instead of being the icon, it's a broken box. The link to the site (i.e. facebook, pinterest) works perfectly, but the image doesn't work at all. Do you think you might know what I could be doing wrong?

    If it helps to know this, I got the button images from this site called irocksowhat.com under 'free social media icons'. I then downloaded them to my computer and then but them into dropbox. From there uploaded them to photobucket.

    ReplyDelete
  92. Hi Olivia:)

    I actually just solved my problem! lol but thank you for your clear and concise directions! It was just a small oversight.. :-) And I will definitely be following yours, it's so cute!

    check out my blog too;) I'm a beginner as well...

    www.wafflesonsaturday.blogspot.com

    ReplyDelete
    Replies
    1. I'm glad you were able to figure it out! :)
      I popped over to your blog, it's great! The photos and writing are wonderful!
      Xx

      Delete
  93. Hey Olivia, I found your post over google and I'm so happy I did - a so well explained tutorial even complete blogging/html beginners like me can understand!
    I think everything I did worked, however I had the same problem as Kelly and was not able to figure it out like she did.
    Any ideas on why the broken image thing appears?
    Thanks a ton anyways for this tutorial that even makes something as visually unattractive as html look absolutely stunning!
    love from south africa,
    katharina
    pancakesundproteas.blogspot.com

    ReplyDelete
    Replies
    1. I'm not sure why it appears as a broken image, maybe you selected the photos as private instead of public on photobucket?
      Olivia

      Delete
  94. Hey Olivia,

    Absolutely loved this post, it was so useful and easy!
    I just added the free sets to my blog www.maquillageundercover.blogspot.co.uk and i think it looks great, I'm still on the stage where I'm still trying to figure out the layout and everything but thanks to you I've stepped up my game!

    Thankyou! xx

    ReplyDelete
  95. This was such a useful post! I'm using your blue social media icons on my blog... You're AWESOME! Thank you so much!

    http://www.ritahasablog.blogspot.com

    ReplyDelete
  96. Great tutorial! Found it through Google :) I used a set of your buttons on my blog, thanks so much!

    http://somegoodthingstoremember.blogspot.ca/

    ReplyDelete
  97. Super easy and straight forward tutorial! Thanks for sharing. Can't wait to try this tonight :)

    ReplyDelete
  98. just did this! thanks!

    Laura @cookiecrumbsandsawdust.blogspot.com

    ReplyDelete
  99. Thank you SO much Olivia! I've been wanting to do this for AGES and now I finally know how to! You're amazing, and I love the way it looks on my blog! Thank you!!!!!

    Rachel-- bakesbyrach.blogspot.com

    ReplyDelete
  100. Thank you so much, this has helped me out so much! My blog is relatively new, and your tutorial was so easy to follow, so well done!
    Natasha fatcatsandcountrymusic.blogspot.com

    ReplyDelete
  101. Thank you Olivia for your tuition. I was looking for how I can arrange and How I can make my blog cuter. Regarding Contact email icon and HTML, Could you explain me more specific? Because even I replace my email address on URL, it doesnt work, so i will appreciate if you will help me more.

    Thank you!

    ReplyDelete
  102. Hi Olivia thank you for making this! I struggled to get the email link to work, and I cant get the icons to sit side by side, please help me.

    Thanks

    thosestarsthatshine.blogspot.co.uk

    ReplyDelete
  103. Thanks, Olivia, for your clear explanation. I didn't know how to put the icons side by side, either, but that's because I didn't pay attention to everything in the post. Sarah, What I found works to get the icons to sit side by side is to make sure you put them all in the same HTML box. I had put each one in a separate box, at first, and then they were arranged in a vertical line. You can arrange them so that there are as many as you want next to each other side by side; it depends on how many icon codes you put in an HTML box.

    ReplyDelete
  104. Olivia, one more thing people might want to know (maybe you could add this in to your post?) I just learned, in putting some icons on my blog, that there is one more step that most people will probably want to do-- it is to make the link open in a new window (so when someone clicks one of the social media icons they will still remain on your blog. To do that, there is just a tiny bit more code to add in; this goes after the destination URL (right after the end quotation mark and before the end caret)-- here is the code: target="_blank"

    ReplyDelete
    Replies
    1. Hi Diane!
      Thank you so much for reminding me about that piece of code, I completely forgot about it! I just went ahead and added it to this post.
      Hope you have a great day!
      Olivia Xx

      Delete
  105. Hi,

    I'm new to blogging and have no idea about using html and I found your tutorial very easy and helpful. thanks a lot! :)

    Danielle
    http://formybabykaelyn.blogspot.co.nz

    ReplyDelete
  106. Hi,

    Took me a few tries to get it perfect, but thank you very much for posting this tutorial.

    Very helpful indeed!

    ReplyDelete
  107. thank you so much for posting this easy tutorial and for the buttons! I was trying for awhile to figure it out on my own and couldn't for the life of me get it! This was super easy thank you thank you!

    ReplyDelete
  108. Just used your pink socail media icons and you made the coding easy to understand thanks xx

    http://justkellyrambling.blogspot.co.uk/

    ReplyDelete
  109. You are amazing! Thanks so much for this tutorial and the script!

    ReplyDelete
  110. Thank you SO much for this easy, straight forward tutorial! I'm new to blogging and found designing it pretty confusing but you made this so simple to understand and the pink social media icons match perfectly with my blog theme! Xx

    http://oh-sobridie.blogspot.co.uk

    ReplyDelete
    Replies
    1. Your blog is absolutely adorable!!
      Sincerely, a new subscriber,
      Xx

      Delete
  111. Hi Olivia! I am new to blogging and I am trying to download the the baby blue media icons to my blogger blog, but to no prevail. I went to Photobucket and clicked on the "Upload" link so I can upload your icons, but when I click on the blue big button that says "Choose Photos & Videos", it goes to my personal pictures. How do I upload your baby blue icons to my computer?

    Thank you!

    P.S: I love your blog, so wonderfully done.. :-)

    ReplyDelete
    Replies
    1. Hi Rebecca,
      I'm not sure why it's not working properly but I'll try to help.
      To download my icons all you need to do is right click and select "Save Image". It's as simple as that. Then you upload them to photobucket.
      If you're already doing this then I don't know what's wrong, sorry!
      Olivia Xx

      Delete
    2. Hi Olivia..

      I was able to download the icons onto my blog. :-) Now that they are on my blog, I get stuck on how to add the following code in step 5.

      Help.. :-(

      Delete