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:
<img
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:
<a
href=”http://www.facebook.com/CraftyMummy”
target=”_blank”>
<img style=”border: 0px solid ; width: 30px; height: 30px;”
img src=”http://thecraftymummy.com/wp-content/uploads/2012/05/facebook.png” />
</a>
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.
Now if only I knew where to add this code onto the new wordpress platform I’d be set. I’m new too. Thanks so much for your info =)
Hi Lean On WordPress you can add this code as a widget to your sidebar. In your dashboard go to Appearance > Widgets. Find a text widget in the centre section and drag it into the sidebar area in the right. Paste the HTML into that box and save.
If you’re familiar with Blogger, widgets are like gadgets.
Hope that helps!
Sorry! “Leana”!
This is fantastic! Thanks for sharing…. I used to be really good at html (about 10 years ago), but since then, having not used it for ages, I’ve been procrastinating about getting my head around it again! lol… You’ve explained it really well 🙂
You’re welcome. I wish I could say I was really good at it but I’m still learning.
Well I’m here to tell you, that your page looks great. You’re way ahead of me and I’m learning from you. So thank you!!
Thank you so much!
Do you offer tutorials in connecting WordPress blogs to update automatically on Facebook? Thanks again.
I used to use NetworkedBlogs to post to Facebook automatically, but I found that often the update got grouped in the FB stream with everyone else who had used the same thing, so your readers may not actually see your update. Now I try to post myself each time I post a new post or use BufferApp to post for me at a certain time.
You can find NetworkedBlogs if you search on FB.
You can BufferApp here: http://bufferapp.com/r/4f817
is it OK if I say that I LOVED the colour coding..but I went completely AWOL with the words…I am sorry. it’s not you, it’s me. I get my web guy to do mine. I am so not into this code stuff. YOU are though, and good for you.
I am bowing to your awesome work.
Popped in from #TeamIbot today
Denyse
Thanks Denyse. I sometimes wonder whether I should have studied something related to computers… I kind of like it!
And you have resized my button to prove it! 😉
I’m self taught in HTML too and kind of love it. I use it predominantly to align text and pictures.
It’s good to have someone break it done for you though.
I did, Jess. I love that I’ve worked out how to make all my linky buttons line up!
thanks so much for sharing. HTML is something i definitely want to learn
I’m dyslexic so for me HTML may as well be Chinese! I tried to add follow me buttons recently and it took hours and they still don’t look quite right. I like the way you’ve broken it down.. maybe i’ll be brave and give it another go! Thanks for visiting Cup of Tea and a Blog too 🙂
Go on, Catherine. One you get one right, you can copy the code and just change the URLs for the next one
I can tell I will be coming back to this sometime soon! Buttons are hard work for me at the moment!
It took me ages to feel I knew what I was doing! Hang in there, Lauren
OMG thank you so much – I have been looking for info like this. Thank you again 🙂
You’re welcome!
I love when you share info like this, I find it so useful! html is not my native tongue at all, but you almost make it seem easy.
xx
Thanks, Lisa. I need a “HTML for Dummies” book, but since I haven’t found one yet, I have had to work things out for myself and I’m happy to share.
More HTML gold! Thank you, thank you, thank you!
You’re welcome!