Welcome to our Tech Talk for Non Techies mini-series. Some of the most frequent questions that I receive from friends (both real and virtual in the handmade community) are about websites, blogs, photo editing, HTML and all things "nerd". To help you on your way to better blogs, flashier Facebook, wicked websites and all that jazz, Tech Talk for Non Techies is a little mini-series here at Creativity Unmasked with "tech talk" for regular people, just like me. Requests for post topics are (as with everything here at Creativity Unmasked) always welcome. Today, we tackle HTML buttons.
Don't be scared, my friends. Its just a harmless little button....right? Right! Here is how to add a button to your blog using basic HTML code.
Writing code? Say it isn't so! Don't be so silly. You can do this. You are a smart and confident blogger, you have a great button picture ready to use and you are ready to tackle the HTML beast. Open your blog post/page composer or the HTML widget (wherever you want to place your button) and get ready for the easiest coding of your life.
- I am not a HTML guru by any stretch of the imagination, but it is really as simple as: <a href="URL"><img src="IMAGE URL"/></a> and there you have it!
- Need to see a real example? No problem. The code behind this little button is as follows: <a href="http://creativityunmasked.blogspot.com/"><img src="http://rightclickcopyofyourimagelocation" /></a> Note that the red text is the image source and the green is the web link.
- Hehe...are you copying the code right now? Don't worry - that is exactly why I posted it here. :) Don't forget to change my website link for your own so that the button takes folks to your sites, not mine! ♥
Errr...Houston, we have a problem! Here are a few of the most common questions and answers on basic buttons for blogs.
- How do I center my button? <center><a href="URL"><img src="IMAGE URL"/></a></center>
- How do I resize my button? Well, you can resize the source image or your can add size details to your HTML code. For example, this code will ensure the image is a 150x150 square. <a href="URL"><img src="IMAGE URL" width="150" height="150"/></a> Be careful with non-square images, and adjust your width or height so the image isn't stretched or squashed.
- How do I add alternate image text to my button? <a href="URL"><img src="IMAGE URL" alt="Whatever you want the alternate text to be"/></a>
Yes!!! Go forth and button! You can totally do this! :)