Social Media Buttons and HTML Coding!

I have always been fighting a losing battle against the design of my blog. Since its started, I had a floral background, with a lot of unnecessary applications, icons, etc in the way, distracting my readers from the post content itself. Since, I have decided to clear that away and have a basic white background, to create a professional finish to my blog, with a simple header and the appropriate info at my side bars.

Today, I decided to get rid of all of the buttons that can be accessed from Facebook, Twitter, etc and create some simple coordinated blog buttons, that will take you directly to the corresponding site. I know I must be the last blogger to have this, bit for some reason, I have had such difficulties trying to do this, from searching the buttons I really like, to the HTML coding. Thankfully, I Gemma had written a post on how to get and install free social media icons (read here!), which made the whole process so much easier!

I decided to opt for a light pink button, which would give a neutral finish, not to distract from the post content. I got my buttons from a recommendation Gemma included in her post, so make sure to check it out! The only bother I really had, was resizing my images, to squeeze into a line. I wish I only chose four, as they would have then been bigger, but hey-ho! The most important social media that a blogger should have and interact with, is most definitely Twitter, Facebook, Instagram and at the moment Bloglovin. I also added my email, for a quicker approach for me to be contacted.

As I said, I'm not entirely happy with the small layout, but I finally have a neat, organised method of contact, in one space.

• To install my social media icons, I firslty searched for the appropriate buttons. There is SO many, with the simple search on Google, so for me, this was one of the hardest parts; choosing

• Once I had chosen mine, I downloaded/saved them to my computer, and then uploaded them to my PhotoBucket account. Very simple to sign up, if you are new!

• You can then head over to your Blogger account, select Layout, Add Gadget then select the HTML/Javascript.

• Add this code: <a href="Your Twitter/facebook/bloglovin profile URL" target="_blank"><img src="direct link to the image in photobucket" alt="Twitter"/></a>.

• You can now change the red text, to your appropriate links, such as Facebook, Twitter, etc. You can repeat this code process for each social media icon - you will end up with a paragraph of repeated coding, with the red text changed. This will allow the icons to appear in a row.

• If you would like them centred, you can also add the HTML code <center> at the beginning of the coding, and </center> at the end.

If you find you have the same difficulty as me, with the icons being too big, you can also add some HTML coding to adjust this. This is an example of my Twitter HTML coding:

<center><a href="https://twitter.com/LuceeLoves" target="_blank"><img src="http://i1171.photobucket.com/albums/r559/Luceeloves/twitter-1.png" width="40" height="40" alt="Twitter"/></a>

• Normally, you would not include this red text. But if you would like to alter the sizing of your icon, add the red coding, changing the numbers, depending on the size you want to go. I altered this several times, by saving and previewing, to see whether I like the outcome.

All in all, it is an easy process, but as there is so many different tutorials and ways of doing HTML out there, it can get daunting. Just follow the simple steps, a little Google search here and there, and you will begin to recognise the steps.

I hope this helps anyone that is new to blog designing or comes across it through a Google search.

I would also like to thank Gemma for her helpful post and would recommend you to check out her blog!

If you need any help, don't hesitate to contact me, and I will do my best to help!

What do you think of the finished look?

LuceeLovesBeautyBox.

xxx