Monday, July 18, 2016

How To Add Social Media Buttons Like Mine

I've been spending this summer of mine trying to fix up my blog. I had a new header made, new font chosen, links and labels updated, about page fixed, Hall Of Fame added. And guess what? I even added social media links on the side!

Initially, I had been going for the small, cute circular icons that are found on most bloggers profiles that had respective social media icons stamped on them. I had gotten in touch with a blogger and asked for her help in trying to get something similar on my blog. How hard could it have been? I had designed a bunch of buttons with a moon for a background and they looked pretty sweet.

But of course, something like this was too good to be true. I am absolutely clueless about coding and so when the time came to get things done, there were gigantic social media icons on the side of my blog and I flinched and deleted everything. Several weeks later, I decided to pick things up again, but from a different approach. I found a guide on how to install icons in a really easy way and it worked for me! I'm going to be sharing what I did :)



STEP ONE: Make Your Social Media Button
I used BeFunky.com to make these. Of course, you might want to use a background which is the same color as the background of your blog or perhaps use a transparent background. You could also put labels around the words or other designs. I, for example, used grunge techniques and some further color editing. 

STEP TWO: Upload the Buttons
Create a new page and label it Social Media Icons. You're not going to be publishing this page!
Instead of uploading the files immediately, switch the post setting to HTML (red box).
Upload pictures on the HTML version. You'll get a pop up box like this.
And choose these setting: Center for Image alignment and Small for Image size.

STEP THREE: Add Links
Switch post settings back to Compose and click on each picture, highlighting it and then add links to each button.
Make sure you get them all right! It would be terrible if your twitter button went to Instagram and your Instagram went to Facebook!

STEP FOUR: Copy Your New Code
Once you've got the links all added, go back to HTML and copy the code you see.
It's turned your images and the added links into a code that you can now put anywhere you like!
Don't forget to SAVE your page! Don't publish it!

STEP FIVE: Apply Code
Go to Layout settings and add a new HTML/Javascript gadget (the one that lets you put in a lot of code) and paste things there.
Set the gadget up where you'd like it to appear on your blog- whichever column etc you like.

STEP SIX: Look at Your Blog!
Isn't it beautiful!!
You can check to see if things are still working by hovering your cursor over the icons and seeing if they do have the redirect link they're supposed to have.

I hope this post helped you out a bit! Have a nice day!

4 comments:

  1. Thank you for the tutorial! I was particularly interested in the program you used to make them - I might use that to make a new header sometime.

    Ellie | On the Other Side of Reality

    ReplyDelete
  2. How can we put them in HTML ? Is there any app for it or once have to write that particular code in HTML?

    ReplyDelete
  3. Gorgeous! I love the galaxy effect! I had to get "basic" ones, lol.

    ReplyDelete
  4. This is an excellent post and will certainly benefit people who don't really know how to do these sort of things! Great stuff! Keep it up!

    ReplyDelete

Feel free to comment and leave a link.

Related Posts Plugin for WordPress, Blogger...