25 Oct 2013

Make Your Own: Blogger's Button



Hello!! I've had a few emails lately about making "Grab A Buttons". I directed everyone to an old tutorial from back when I started my blog but I thought I should re post it for everyone's ease. They are really easy to do with a little bit of copying and pasting!!

First of all, upload your image made in Photoshop or fireworks etc, to a image hosting site. I use photo bucket but you can use any site that you prefer.  Now this is the important step. Make sure you find the correct file URL. This can be hard to find, but the easiest is probably to open the image and right click to "copy image URL".

An example of a correct image link is....

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>

Red: replace with the image link you just copied from Photo Bucket. The link with .png or .jpg ending. Blue: Your Blog Name - anything you want your blog to come up with when someone rolls over the image. Yellow: Your blog address. This address must start with "http://" not just www. Otherwise when people click on the image they will see an error page. 

Just copy and paste this code into your button page or into your sidebar. Anywhere that you think is easiest for your readers to find and add to your blog. I suggest making some different sized photos and repeating the same code. This gives your readers flexibility for photos that fit their sidebar size as everyone's varies. Happy Friday, see you in the (long) weekend for some fun crafts. xx Harri


Follow

2 comments:

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