Post by Corinne on Jan 6, 2014 1:01:54 GMT
I went a good few months having clumpy widgets of my side bar for all my social networks. I saw loads of bloggers having a neat and tidy side bar with everything all together and looking proper dapper.
I went 11 months thinking you needed to have amazing HTML knowledge, or pay somebody to get your own social networking buttons. After a jumpy start, I managed to work out how to do it on my own. This is what I came up with.
First thing you need to do is find free social media icon silhouette vector images online. There are many sites that do these, I got mine from here. I downloaded my pack.
I then headed over to www.picmonkey.com/ and clicked on 'design' and put my measurements in at 300 pixels wide and 80 pixels high.
I then clicked on the butterfly/overlay icon down the left hand side and clicked stars (you can explore and use different shapes, I just liked the stars!)
Then you can click on the icon you want, move it where you want and change the colour.
After I got the colour and size I wanted, I right clicked and selected 'duplicate overlay' to allow me to have the same size and colour icon.
I was then able to add the icons I had previous downloaded from my computer to image, and positioned them over the stars.
Once you have your image how you like it, save it to your computer and upload it to a photo hosting program such as www.photobucket.com
When this is done, head over to www.image-maps.com, paste in the URL of the hosted image and use the rectangle function to map your image.
When all icons have been mapped with the link, click on 'get code' and grab the HTML code.
You will need to edit the code slightly by putting the URL of the image you have uploaded after the src=" section of the code, deleting the link that is in there. Other wise your image will not show up.
This is how my code looks - the highlighted section is what I edited to add my own URL in.
I hope this helps!
If you have any other questions, please ask!
I went 11 months thinking you needed to have amazing HTML knowledge, or pay somebody to get your own social networking buttons. After a jumpy start, I managed to work out how to do it on my own. This is what I came up with.
First thing you need to do is find free social media icon silhouette vector images online. There are many sites that do these, I got mine from here. I downloaded my pack.
I then headed over to www.picmonkey.com/ and clicked on 'design' and put my measurements in at 300 pixels wide and 80 pixels high.
I then clicked on the butterfly/overlay icon down the left hand side and clicked stars (you can explore and use different shapes, I just liked the stars!)
Then you can click on the icon you want, move it where you want and change the colour.
After I got the colour and size I wanted, I right clicked and selected 'duplicate overlay' to allow me to have the same size and colour icon.
I was then able to add the icons I had previous downloaded from my computer to image, and positioned them over the stars.
Once you have your image how you like it, save it to your computer and upload it to a photo hosting program such as www.photobucket.com
When this is done, head over to www.image-maps.com, paste in the URL of the hosted image and use the rectangle function to map your image.
When all icons have been mapped with the link, click on 'get code' and grab the HTML code.
You will need to edit the code slightly by putting the URL of the image you have uploaded after the src=" section of the code, deleting the link that is in there. Other wise your image will not show up.
This is how my code looks - the highlighted section is what I edited to add my own URL in.
I hope this helps!
If you have any other questions, please ask!
