I feel like I may be shooting myself in the foot here a little bit by showing you all how to do this for yourselves. I currently offer this as well as a range of other blogger services but felt it was a skill I could be passing on to other bloggers too.
Below is the code that I use to show my blog button at the top and then a grab box underneath in case some lovely person wants to showcase my blog elsewhere. I know it looks mean and scary but I’m going to break it down into short sections, explain each one and highlight where changes can be made to the code to make it apply to your blog too. One thing you will need (if you’re not already) is to be registered with a photo storage site, such as imgur or photobucket as the image of the blog button needs to be stored online.
<div align=”center” style=”padding: 5px;”><img src=”http://i.imgur.com/uagC9j7.png” title=”Wishes, Hopes and Dreams” alt=”Wishes, Hopes and Dreams” /></div><pre style=”background: none; border: none; padding: 0;”><textarea style=”background:#ffffff;border: solid 1px #ffffff; color: #000000; font-size:100%; height: 150px; margin:auto; text-align: left; padding: 7px 0 2px 5px; display: block; width: 200px;”><div align=”center”><a href=”http://fromfiona.com” rel=”nofollow” title=”Wishes, Hopes and Dreams” target=”_blank”><img src=”http://i.imgur.com/uagC9j7.png” alt=”Wishes, Hopes and Dreams” style=”border:none;” /></a></div></textarea></pre><div align=”center” style=”padding: 5px;”><img src=”http://i.imgur.com/uagC9j7.png” title=”Wishes, Hopes and Dreams” alt=”Wishes, Hopes and Dreams” /></div>
- The div align refers to the positioning of the button on box within my sidebar (in this case the centre).
- img src is where the picture to be shown is located. As you can see from the code I use imgur for mine and you can tell its the link you need as it will start http and end with .jpg or .png depending on the file type you’ve uploaded.
- Title would be the title of the blog the button is for
- Alt is where you can add alternative text to the blog title but I just the same again and haven’t had any issues doing so as yet.
<pre style=”background: none; border: none; padding: 0;”><textarea style=”background:#ffffff;border: solid 1px #ffffff; color: #000000; font-size:100%; height: 150px; margin:auto; text-align: left; padding: 7px 0 2px 5px; display: block; width: 200px;”
- This section of code refers to the design of the grab box and how the code will be displayed within that. It’s fairly self-explanatory but I would be tempted to leave this the way it is, as it will fit in all sidebars the way it is.
><div align=”center”><a href=”http://fromfiona.com” rel=”nofollow” title=”Wishes, Hopes and Dreams” target=”_blank”><img src=”http://i.imgur.com/uagC9j7.png” alt=”Wishes, Hopes and Dreams” style=”border:none;” /></a></div></textarea></pre>
- This section of code refers to the code which will be displayed within the grab box and therefore also forms the code which another blogger would need to add the code to their blog.
- The href refers to the URL the button will take you to when clicked and should be changed to your blog URL.
- Title again refers to the title of the blog and should be changed to your blog title.
- img src is the same as the image source above and is the online link for the image.
- Alt can be changed to something aligned with your blog name or the same as your title. Whichever suits you is best in this case.
- The last section about style is how the whole HTML gadget will appear once it is on your blog.
Once the pieces which need to be changed are highlighted it looks a lot easier to do than it first appears. All that remains to do once you have the code is to add it as an HTML gadget to your sidebar.
