Links



The images above, are actual Image Links, and are click-able. Use them to navigate to the sites indicated!

Sunday, 24 April 2011

Clickable Blog Buttons & Text Boxes



One particular way to make a clickable image icon, or Blog Button, is to design your own, and display it in your sidebar by itself, or put it in a Text box, or html/Javascript gadget, as a code. That way, your readers can add it to their blogs, if they wish to, and have a "one-click" image link to your blog! It sounds complicated, but it is fairly easy - just a little time consuming.

Everyone knows MS Paint, and it's ability to do many things - one of those is designing. It took me a few minutes to design this (rather basic) image for Roberto's Blogs - the Report blog (this blog).

The next part of the job is to reduce the image in size, to a workable icon - I did that in MS Picture Manager. Now, with an image around 4 Kbs in size, I can upload it to the Blogger editor. It will look like this ...




The code for it looks like this...


<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-ac7-tnfOa1M/TbgGGKL95nI/AAAAAAAADnQ/5Us-vgRWonQ/s1600/the%2BREPORT%2B-%2Bblog%2Bbutton.jpg" imageanchor="1" style="margin-left:1em; margin-right:1em"><img border="0" height="70" width="70" src="http://4.bp.blogspot.com/-ac7-tnfOa1M/TbgGGKL95nI/AAAAAAAADnQ/5Us-vgRWonQ/s200/the%2BREPORT%2B-%2Bblog%2Bbutton.jpg" /></a></div>



Now, how do you make that clickable? How do you make that image into a hyperlink to YOUR blog? Well, that's easy, too. In the following script, I have highlighted the part of the code which needs to be changed. This change necessitates you adding YOUR blog URL, instead of the Blogger URL (of course, don't remove any tags (< and >) - just replace the URL) ...

Add your blog URL where the following highlighted code is ...

<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-ac7-tnfOa1M/TbgGGKL95nI/AAAAAAAADnQ/5Us-vgRWonQ/s1600/the%2BREPORT%2B-%2Bblog%2Bbutton.jpg" imageanchor="1" style="margin-left:1em; margin-right:1em"><img border="0" height="70" width="70" src="http://4.bp.blogspot.com/-ac7-tnfOa1M/TbgGGKL95nI/AAAAAAAADnQ/5Us-vgRWonQ/s200/the%2BREPORT%2B-%2Bblog%2Bbutton.jpg" /></a></div>


In the case of this blog, the Report, the code would end up looking like this ...

<div class="separator" style="clear: both; text-align: center;">
<a href="http://www.blogging.robertosblogs.net/"target="_blank"><img border="0" height="70" width="70" src="http://4.bp.blogspot.com/-ac7-tnfOa1M/TbgGGKL95nI/AAAAAAAADnQ/5Us-vgRWonQ/s200/the%2BREPORT%2B-%2Bblog%2Bbutton.jpg" /></a></div>


Now, you have a clickable, (hyperlinked) image for your blog. Easy as! ( You can Click it if you wish.). Here it is...


Note: There's no real need to include <div class="separator" style="clear: both; text-align: center;">...</div> around the actual image script, and it can be removed.


Hyperlinked Image code in a Scrollable Box


Another useful tip, which quite a few bloggers1 use, is to offer their Readers a chance to add the icon to their blogs2, as I mentioned above, as well. To achieve that, you need to add code for a Text box, to 'wrap' what you already have. That's easy, too.

The script for the Text box is ...


<textarea name="HTML for Picture" rows="4" cols="20"> at the start, and with </textarea> at the end. eg:

The code that you add to your sidebar, or wherever, actually contains the link and the image, would look like this ...


<div class="separator" style="clear: both; text-align: center;">
<textarea cols="20" name="HTML for Picture" rows="4"><a href="http://www.blogging.robertosblogs.net/"target="_blank"><img border="0" height="70" width="70" src="http://4.bp.blogspot.com/-ac7-tnfOa1M/TbgGGKL95nI/AAAAAAAADnQ/5Us-vgRWonQ/s200/the%2BREPORT%2B-%2Bblog%2Bbutton.jpg" /></a></textarea></div>


Together with the actual Image icon, my icon looks like this finished product ...









All your Readers have to do, is copy the script from within the scroll text box, and add it to a Text gadget, or html/javascript gadget, and they will have the hyperlinked icon on their blogs!


Just a click away from your blog! You'll see some samples in my sidebar!

And you don't have to keep it all to yourself, either. You can make these boxes for your Favourite 'other people's' blogs. I could make one for any of the Great Blogs I read, or Follow. I'm sure, the owners would not mind. It's a great way to help them build their readership, and maybe, in turn, you'll get more, too.


Examples:

1. - Bonnie Calhoun's wonderful blog "How Can I Do That?"

2. - Annie's Creative Blogging Blog U


TOP

1 comment:

Hilary Melton-Butcher said...

Hi Roberto .. interesting how much one can do .. thanks for showing us .. Cheers Hilary