Make Your Own: Blogger's Button

Hello Everyone......As you know, I've been working on lots of design stuff lately and I thought as I am always learning new things in the blogging world (also known to bloggers as HTML coding, design, and other difficult and confusing stuff) I should share it with you in the easiest way possible. Lots of "help websites" aren't very helpful as I have learnt from previous experiences.

For my first tutorial, I thought I should share how to make a bloggers button (or a, "Grab My Button"). You know, those fancy pictures with boxes of code underneath. Those ones you see on really professional blogs. You don't have to be either professional or have design skills (I know I don't have much yet) Some ways are really long and complicated, but this way is quick and easy, especially if you need to whip up a different size for someone in a rush!!

First of all, upload your image (correct size of course) made in Photoshop or fireworks etc, to a image hosting server. I use Google Picasa Web Albums but Wordpress media upload and PhotoBucket could work. Now this is the important step. Make sure you find the correct file URL. This can be hard to find on Picasa, but the easiest is probably to open the image and right click to "copy image URL".

One of my links looked like this

https://lh3.googleusercontent.com/-h5_m45Pfn2A/Uap7VefXZBI/AAAAAAAABqE/8sbmElH3AD8/w200-h120-no/200x120.png

Tip: Note the last bit. If it doesn't end with your file name and .png or .jpg it won't work

Now the HTML coding stuff, I'm going to try and make this as clear as possible (I hope)

<div align="center" style="padding: 5px;"><img src="IMAGE URL ADDRESS"  title="BLOG NAME" alt="BLOG NAME" /></div><pre style="background:#ffffff;border:solid 1px #8f8f8f; color: #000000; font-size:90%; height: 50px; margin:auto; text-align: left; padding: 10px; display: block; overflow: auto; white-space: pre-wrap;  width: 150px;">&lt;div align="center">&lt;a href="BLOG URL ADDRESS" title="BLOG NAME" target="_blank"&gt;&lt;img src="IMAGE URL ADDRESS" alt="BLOG NAME" style="border:none;" /&gt;&lt;/a&gt;&lt;/div></pre>

Okay, want me to explain that confusing code up there. All the colored stuff needs to be edited to your customizations. The image link that you just copied needs to replace the red writing (IMAGE URL ADDRESS). The blue is pretty self explanatory as it's your blog name (BLOG NAME). And the red/brown (BLOG URL ADDRESS), is your blog address (eg. http://yourblog.com). Once you made all the changes, paste full code into page, or sidebar. Wherever you want to put it, but make sure you are in HTML mode on the page or gadget. And you're done, simple see. 

Hope this is easy to understand, and I hope you enjoy that tutorial, even if you aren't using it. I'll try to do more of these tutorials and I'll post them under my Design Tutorials label (link to page). Please comment on what you think of this post. I do hope you think it's okay.

Harri xx

(Google Reader is going away, follow me on Bloglovin to stay updated)