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;"><div align="center"><a href="BLOG URL ADDRESS" title="BLOG NAME" target="_blank"><img src="IMAGE URL ADDRESS" alt="BLOG NAME" style="border:none;" /></a></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)
Harri xx
(Google Reader is going away, follow me on Bloglovin to stay updated)
Wow! I can't wait to try this out, thank you!
ReplyDeleteHayley
http://fewgoodideas.blogspot.com/
Glad I might help - please email me if you get stuck or need further assistance
DeleteAwesome! 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!
ReplyDeletexx Julianne
http://blinkandblur.blogspot.com
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