GUYS GUYS GUYS!
I learned something today, like just today, that I thought would help out some of you. I don’t know if it really will. But I might as well share it. And I’m just burning from giddiness.
So here’s the thing.
Ever see those neatly arranged social media icons on the sidebar of some blogs? You know how they look TOTALLY professional and salivating design-wise?
Some weeks back, I was thinking of adding social media icons on my blog. Preferably on the sidebar but on the footbar, above the header, below the post… I don’t care. So long as it’s there. And back then, I thought that the only way for me to have those icons lined up neatly in one row will be if my theme had a Social Menu. And because multiple menus is not a feature in my theme, Gateway, I thought there was no hope for me.
BOY WAS I WRONG
Apparently you could do a little DIY, some basic coding and voila! Custom social media icons! Even for the Free Plan users! 😀
So you upload your chosen images of the icons to your library. I highly suggest that their dimensions be equal. (Ex. Width = 120, Height = 120) That way, you won’t have to deal with distorted images when you put them in the Text Widget.
If you want really awesome-looking icons, like the one you see above, there are TONS of free social media icons in Pinterest. You can pick from geographic ones or watercolor ones or whatever takes your fancy.
In my case, I’m temporarily using those cute hand-drawn icons until I can make my own. And I do plan on making my own blog graphic kit.
So you can basically follow the format below:
Just change the ones underlined.
For URL, change it to the URL of your social media. Ex: twitter.com/awesomeunicorn
Img Title is not necessary but you can put the name of the social media in it.
For IMG URL, you simply copy the image url of your uploaded images from your media library.
Ideally, the sizes of the width and height is equal. Somewhere below 100 since this is measured in pixels.
If you want to add another, simply copy from [<a href=”URL”>] to [</a>] before the [</div>].
For further instructions, you can go to WordPress.com’s Support Page.
So what’s the lesson here, Kate? Always research further.