3 Jun 2013

Make Your Own: Blogger's Button

Make your Own: Grab a 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)



Follow

4 comments:

  1. Wow! I can't wait to try this out, thank you!

    Hayley
    http://fewgoodideas.blogspot.com/

    ReplyDelete
    Replies
    1. Glad I might help - please email me if you get stuck or need further assistance

      Delete
  2. Awesome! I'm having one of those Me Vs Technology battles with HTML and always wondered how to make buttons like these! Can't wait to try this out! If I gather up enough creativity to make my own blog button haha!

    xx Julianne
    http://blinkandblur.blogspot.com

    ReplyDelete
    Replies
    1. Haha I'm always having those moments. If you need a custom made one just drop an email into my inbox and ill make one for you

      Delete

Thank you for taking the time to write a comment. I read everyone and try to reply as soon as possible so check back. Hope you enjoyed this post x Harri