How to create social media icons and link them FAQ - Blogging tips Vol.3

by - Tuesday, October 21, 2014

Hey babes, today I wanted to share with you how I created my social media icons and how I linked them. I'm actually gonna teach you all about social media icons from A-Z ...
Looking for blogging tips online is a super helpful way to boost your blog, I always look for help to improve my own blog and it never disappoints me.
But before I start, I just wanted to inform you that I have a "Blogging tips series" here on my blog that you might be interested in ..

I personally find them so helpful, as a reader. When I read a nice article I feel like following the blogger who wrote it or for example when I like their photography skills, I'd probably look for their instagram page therefore looking for their social media icons to connect with them and receive the latest updates from their blog, which means reaching out for more people, getting readers and building a base !

there are many ways you can create your social media icons and customize them to your liking. The easiest way to create them is using paint or photoshop (and I'm not going to talk about this in this post) but you can easily search for "Social media icons" on either pinterest or google and use them for your blog only if the creator doesn't mind it.
I found mine online and I quite like them..

♥ First of all, choose the icons you want then save them to your desktop ..
then you need to get the html code of each icon you have, one icon at a time. Don't worry it's not as complicated as it sounds, I did it which means that it's not a big deal at all :D I'm not really into complicated technology things hahah ( I sound like a grandma ) All you need to do is to go over and do the following:
browse (choose the icon you want it's html code) > Choose family safe > upload it
 > scroll down > find the "Direct link" and copy it .. this should be the html code of the image or the social media icon.
Now go to then choose layout and let's get started..

♥ Choose add gadget > then choose html javascript
And this is what you're supposed to write in the JavaScript gadget ..

♥ The Pink area is where you should write the link to your social media ..
here I have the link to my twitter account, I'm not sure if it changes anything but make sure you include "http://" before typing the link ..
♥ The mint green area is where you should type the html code of your image or the social media icon you got before by uploading it to ..♥ The lavender part is where you should adjust the height and width, if you ask me ..
I'd say keep it minimum, it's better and more professional to have your social media icons small, but make sure people can notice them as well..
oh and make sure the width and height are equal, it looks way better that way.

Then repeat the steps above till you create all your social media icons and oh 
! one more thing, don't add a new gadget for each social media icon, just type the code once again right next to the one you created, like this ..

♥ Here I linked facebook right next to twitter in the same exact gadget and then I'll link the rest as well ..
Keep in mind that the space between the "a>" at the end of  twitter code and the "<a" in the beginning of the facebook code controls the distance between the social media icons on your blog ..

That's it 
! I hope this was somewhat helpful and I hope you check out my social media sites and follow me or something :D feel free to ask me any question below and I'm definitely going to answer as soon as possible, also leave any requests below for the next "blogging tips" post, thanks for reading Xox Instagram | Facebook | Twitter

You May Also Like