9.8.13

Friday Freebie! How to install social network icons onto your blog

Happy Friday, friends! I get a lot of questions about how to install image links and buttons and things to blogs, so today I am sharing a little how-to as well as some free graphics for your sites! You will get these cute social networking icons and the matching sidebar widget titles and also learn a thing or two about putting them on your blog. They have transparent backgrounds so will blend in nicely with any layout.


click image to download

After extracting the images, you'll need to upload them to an image hosting service. You can use Photobucket for this step.

Let's start with the social network icons.
Once uploaded, all you need to do is copy the full image URLs of each image (the ones that start with <img src=") and paste them into a new HTML/Javascript widget in your sidebar, side by side like so:

.... etc.

Of course using your own image URLs instead of my example ones.

To add links to the social networking icons, you just need to wrap your <a href=> link around each image code like so, and remember to close the code with the ending </a> tag:

... and so on.

For the sidebar titles, it's best to place these inside their own HTML/Javascript widgets in Blogger. So, create a new HTML/Javascript widget in your Layout dashboard and paste in the <img src> code of your first graphic title, just as you did above for the first social network icon.

Save your widget and position it properly in your sidebar. Make a new HTML/Javascript widget and do the same for the next. Continue for each title until they are all properly in place. Click Save Arrangement at the top.

That's all there is to it!

Some new premade Blogger templates have been added to my design shop as well:



Enjoy and have a great weekend.


By Dana Fox Updated at: 8:00 AM

Awesome posts from around the web:

37 comments:

  1. Thank you so much for this! I love all your blogging tips. Hanna Marie

    ReplyDelete
  2. This is wonderful! I'll tuck this away if I add some more buttons onto my website, they would look great on there! It's so nice that you're sharing this <3

    www.deannacm.com

    ReplyDelete
  3. This was actually so helpfull and needed, doing this right now!

    ReplyDelete
  4. This is very generous of you! I'm sure it will help out a bunch of people x
    Maria xx
    thefashionsucker.blogspot.dk

    ReplyDelete
  5. Thankyou so so much for making these and letting us all have them for free, you are so generous and amazing!
    Sarah :-) xx

    ReplyDelete
  6. these are awesome! I wasn't sure if I was installing these properly but apparently I am. I used your 'how to make a header' video yesterday and it was so, so incredibly helpful. Thanks so much!
    www.thisanalogadventure.com

    ReplyDelete
  7. THANK YOU SO MUCH it looks so good <3

    firozablog.blogspot.com

    ReplyDelete
  8. These are adorable! Thanks so much for creating pretty, FREE things! Awesome.

    ReplyDelete
  9. I always wondered how to do that! Thanks for sharing!

    Sarah

    ReplyDelete
  10. Thanks for the free stuff Dana. I love the new premade templates too especially Tiffany.

    ReplyDelete
  11. Thank you so much for this stuff! It's really helping me! I'm currently trying to make my own themes and stuff for my new blog but I seem to be failing miserably :( Your tutorials like this are really helping me though! I love all your pre-made themes! x

    ReplyDelete
  12. Hi there^^,
    Thats soo great, the buttons are so so cute with this ruffled rim :D
    You are so awesome and your blog is just so so lovely!
    XOXO Abby
    http://one-dollar-milkshake.blogspot.com/

    ReplyDelete
  13. this is such a good idea to put on your blog!
    and that new penelope layout is so beautiful.
    i love the watercolour flower elements!
    keep it up Dana!

    Reva
    www.daughterziondesigns.com

    ReplyDelete
  14. Wow thank you this is amazing! :) love your blog! X

    ReplyDelete
  15. Thank-you so much! I can't believe it worked, your instructions were so good, this is the first time I've been able to do anything to do with html!!!
    I can't thank-you enough! :)

    http://theearththroughalens.blogspot.co.nz

    ReplyDelete
    Replies
    1. hey i couldnt do it cause you know i just not smart can you help me

      Delete
  16. Thank you, this is great! Always wondered how to do this :)

    http://laurenslittleblogs.blogspot.co.uk/
    xx

    ReplyDelete
  17. Thank you for this freebie; the social network icons are super cute. Right when I saw them, I immediately utilized them in my blog, thanks again! :)

    lots of love, Dana Carmella
    Bloglovin' & Blog: Pretty Odd ♡

    ReplyDelete
  18. These are super cute, thank you for sharing them! I love the Blogger templates too, especially the blue one. I have shared these with my followers, I think they will love them.

    ReplyDelete
  19. This was so helpful, just what i'd been looking for.
    http://feranmer.blogspot.co.uk/

    ReplyDelete
  20. I just had a little peek into your shop and gosh your designs are beautiful~ I know who I'll be coming to if I ever want a re-design. Great work!

    Lou x

    ReplyDelete
  21. so helpful http://justlilameera.blogspot.com/

    ReplyDelete
  22. Wow I am so glad I stumbled across your name on Zoella's blog. Your webdesign as well as just beauty blog is aMAZING! I snagged these freebie social media icons and I have to say thank you SO much! I just started my blog here (dreaminlace.blogspot.com) and I added you to my blog roll to hopefully spread the word about how amazing you are! <3 I also purchased your book from Amazon! You're such a gem! Can't wait to read it! xoxo

    ReplyDelete
  23. Thank you so much. That was so helpful
    Beth x
    chroniccosmetics.wordpress.com

    ReplyDelete
  24. First i'd like to say thank you for providing these tips. Secondly though due to me being a newbie I'm actually struggling to put these on my blog I've got as far as creating an account with photobucket and dragging the folders and license on to the desktop but beyond that I'm confused.

    ReplyDelete
  25. none of mine start with the src, so confused..

    ReplyDelete
  26. Thank you sooooo much!I just created a blog and this was really helpfull!Keep posting I love your blog and your tipps!

    ReplyDelete
  27. I just created a blog and all the tips that you have given have really helped! Thanks so much. Much love. Xx

    http://poppadomprincess.blogspot.in/

    ReplyDelete
  28. I've managed to get the icons on my blog, but I can't link them to my social networks? I'm not smart when it comes to these things. Can you help me lol ? Thank you x x x

    ReplyDelete

Pin It button on image hover
Back to Top