Do you have buttons in your blog sidebar? I recently added some new ones. If you do, then there is some code like this that puts them there:
style=”border: 0px solid ; width: 30px; height: 30px;” img src=”http://thecraftymummy.com/wp-content/uploads/2012/05/facebook.png” />
Now I have pretty much taught myself everything I know about blogging, including HTML, by reading tutorials and other blogs. So I thought I’d share something I learnt about this HTML code recently.
First, let me break this down for you:
<img style=”border: 0px solid ; width: 30px; height: 30px;”
img src=”http://thecraftymummy.com/wp-content/uploads/2012/05/facebook.png” />
The Green Section is the code for what your button looks like and where it is stored online. The URL is where I uploaded my Facebook icon – a cute freebie from Carrie Loves.
The Blue Section is the code for where you want people to go when they click on your button. So this piece of code is to send my readers to my Facebook page.
The Red Sections are the bits of code that show the beginning and end of the code block – kind of like the beginning and end of the paragraph. Without them, the whole thing won’t work!
What I learnt to add
I recently realised that I could change the size of the buttons with this code. For example, if I wanted to add my friend B’s button to my sidebar but it was bigger than all my other buttons, I can add some extra code that resizes it. So I can keep all my sidebar buttons in line and pretty!
I added some code in the Green Section above. You could just have this and it would grab the button and put it in place for you:
<img src=”http://thecraftymummy.com/wp-content/uploads/2012/05/facebook.png” />
But if you add this bit in, you control the size:
img style=”border: 0px solid ; width: 30px; height: 30px;”
You then create:
- a border – in my case it is set to 0 so there’s no border, but you could change the number
- width – in my case 30px (for my little social media icons)
- height – in my case also 30px to make them square
In my sidebar, all my sponsor buttons are 125 x 125 pixels because my sidebar is 250 pixels wide.
Keep in mind, it is better to make the size smaller than the original. If you make them too much larger, the image could become distorted.
So there you have it – a snippet of code that resizes your buttons or images when you want to add them to your blog sidebar.