Monday, 8 April 2013

How to Make Your Own Social Media Icons/Buttons (HTML)



Twitter    Facebook    RSS Feed    Email me

This is a really simple code! One of the easiest! BUT... the more you do to it, the more complicated it gets...


The code I am giving you has a few borders included. Both the Borders and the Image sizes can be adjusted, as I will explain in a moment.


The code is as follows:


<center><div id="social-icons">

<a href="Website URL" title="Website Name" target="_blank"><img src="Image URL" alt="Image Name" style="border: solid #FFFFFF 1px;" width="48" height="48"/></a>

</div><center>


Now... what to do with this code...

Make the following changes:

Website URL - Copy and past the URL you want people to go to, eg your twitter home page, or rss feed, or your email "mailto: your mail address goes here"
Website Name - eg "Twitter"
Image URL - Please see my previous post which included information on uploading images to a photo storing website and obtaining the URL of such images here.
Website Name - Same as above.

For multiple social icons just repeat the code between <center><div id="social-icons"> and </div><center>

Repeated like this:

<a href="https://twitter.com/Designtips111" title="Twitter" target="_blank"><img src="https://lh5.googleusercontent.com/-6sATYDmWKJI/UCEbq8jR7rI/AAAAAAAAAUs/yD8FmwRUNes/s30/twitter.jpg" alt="Twitter" style=" border: solid #FFFFFF 1px; " width="48" height="48"/></a>

<a href="http://www.facebook.com" title="Facebook" target="_blank"><img src="https://lh4.googleusercontent.com/-a0NamylL3Kw/UCUOQoG0ViI/AAAAAAAAAXs/NXTDOC3-9hg/s55/FB.jpg" alt="Facebook" style=" border: solid #FFFFFF 1px; " width="48" height="48"/></a >

You may wonder where you can get your social media icons... you can either create your own, like I did, or you can search the web for any you like... they come in all shapes and sizes and colours, then just copy the image url from where you find them. Check these out.

You will note that within this code there is a reference to "border: solid #FFFFFF 1px" This gives you a border of 1 pixel around each image, and at the moment the colour is set to white (#FFFFFF). You can make each border larger by increasing the number of pixels, for example, instead of 1px you could make it 3px. You can also change the colour of the border by either obtaining the a specific colour code used in your template from the advanced section of your template, or you can visit this site for Hex Colour Codes. If you would like to remove the border altogether, you can simply replace the "border: solid #FFFFFF 1px;" reference to "border: none;"

It would read something like this...

<center><div id="social-icons">

<a href="Website URL" title="Website Name" target="_blank"><img src="Image URL" alt="Website Name" style="border: solid #FFFFFF 1px;" width="48" height="48"/></a>


<a href="Website URL" title="Website Name" target="_blank"><img src="Image URL" alt="Website Name" style="border: solid #FFFFFF 1px;" width="48" height="48"/></a>


<a href="Website URL" title="Website Name" target="_blank"><img src="Image URL" alt="Website Name" style="border: solid #FFFFFF 1px;" width="48" height="48"/></a>


<a href="Website URL" title="Website Name" target="_blank"><img src="Image URL" alt="Website Name" style="border: solid #FFFFFF 1px;" width="48" height="48"/></a>


</div><center>


You may know with HTML coding that a space (space bar press) does not mean you add a space in your design. If you think your icons are too close together you can add the following code between your icon codes, to space them apart:


&nbsp

and multiples of it (eg &nbsp&nbsp&nbsp&nbsp will move each image further away... a bit of trial and error will occur.

That's it! Your done!



To insert this code into your widget side bar, do the following:
  1. Go to your blog's "Layout".
  2. Click Add Gadget
  3. Scroll down to HTML/Javascript
  4. In the title box, you can either write something or not... most people would write something like "Follow me..."
  5. Post your completed code into the content box and click save!

Hopefully I have covered everything, but if you have any questions, please let me know.



All the best,

No comments :

Post a Comment

Facebook Twitter Google + RSS Feed Email Me