Sunday, 13 July 2014

Blogging 101: Social Media Icons

Hello Princesses!

Today I'm going to be showing you how I got these cute little social media buttons that are down the bottom of each of my blog posts! You might notice that my sidebar social media icons look different at the moment, but I used the same method to create these as I did to create the circular ones so don't worry!

Truth be told (and I'm always truthful) I had a lot of trouble learning how to  create these icons, for the simple reason that I couldn't figure out what they were called! *facepalm* Once I found out what they were called I found a whole bunch of tutorials to teach me how to code them properly. There are so many tutorials out there to teach you how to create your own Social Media Icons, but this is how I did mine.

The first thing you need to do is find your perfect social media icons. These might be pink, blue, transparent or floral, whatever you think suits your blog! You can create your own, or use someone else's. My social media icons came from the lovely Carrie Loves who has an amazing set of blogger tips and I highly highly recommend you check out her posts! Otherwise you can google search "free social media icons" or "cute free social media icons" to find your perfect set of icons!

Please make sure that the icons are free and that you're not indirectly stealing them. If it's within your means, make a donation to the creator! They will have spent hours/money on creating these icons so it's always nice to give back or give credit!

The hardest part of the social media icon installation is actually getting the pictures. The next part is super easy, all you need to do is create a click-through picture code using the simple codes I showed you in last weeks Blogging 101 post. You can also follow this tutorial to create a super cool hover effect.

<a href="Linktodestination">
<img src="Yourimagehostlink"width="300px"/></a>

This is really easy to get confused by, but really simple once you know what's happening! The first line is where the clickable picture is taking you to (affiliate links, shop links etc) so all you need to do is pop the hyperlink in the red text section. The next line is the image line, so you need to host your image on your image hosting site, copy the hyperlink, and paste it into the blue text section. Make sure there are no spaces where there shouldn't be spaces, and change the green numbers to change the size.

<a href="Link to destination">
<img src="Your image host link"width="40px"/></a>

That's the quickest way to create your social media icons! To install them on your sidebar, you need to create a HTML/Java gadget and insert the clickable image code. You will create a separate code for each image with the correlating URL's and insert them all into the same gadget. You can change the size of the icons to fit three or four on one line.

To create the icons in a main text blog, you will need to take the same code and insert it into your HTML tab IN your blog post, and that's all! I hope this post was helpful for you princesses starting out with your blogs! Be sure to let me know in the comments below if you're having any troubles and I'll try my best to help you out! ^.^

Next week I'll be showing you how to create your own personalized text and signature at the end of each post!


  1. Ahhh how cute!!! Kawaii dear!!! I always love the cute icons on your blog! I used to use the same codes on my websites before too <3 this is a really good share for bloggers dear! You're an example to all of us! <3

    love lots,

  2. Bluehost is ultimately the best hosting provider with plans for any hosting requirments.


This blog is no longer run or moderated. Please visit me at if you want to chat!

Note: only a member of this blog may post a comment.

Related Posts Plugin for WordPress, Blogger...