Wednesday, February 10, 2010

Linda's How-Do-I Series: How To Create An HTML Text Box

I've been thinking about linkable buttons for fans and supporters to be able to display their support for a particular website and/or blog for awhile and thinking that I might like to create some for my "The Best Free Craft Articles" blog. These are basically clickable buttons that have a link to your website and/or blog built into the HTML coding.

In order for your readers, supporters, and fans to easily show their support and add one of your buttons you need to give them the ability to easily copy/paste the HTML code to their website or blog. This is especially true of your readers who are not HTML code savvy and who want to add your button to their website or blog.

To do this you can always use the old standby of 3 ***'s that allow you to display HTML coding in a blog post. The 3 ***'s have to be removed before they are copied/pasted into a website or blog for the HTML code to work.

But, there is also another way that is easier for your readers to just copy/paste the code with having to remove the 3 ***'s. It's done by utilizing an HTML <***textarea><***/textarea> (minus the 3 ***'s that are shown her to display the HTML code) command.

So, I decided to create a Fan button and a Contributor button for my The Best Free Craft Articles Blog and they are shown below:

BECOME A FAN

Show your support for the Best Free Crafts Articles Blog by placing our button on your website or blog. Just copy/paste the HTML code from the text box below to your website or blog.





I'M A CONTRIBUTOR

Tell everyone you're a contributor to the Best Free Crafts Articles Blog by placing our button on your website or blog. Just copy/paste the HTML code from the text box below to your website or blog.





All your readers have to do is copy/paste the HTML code from the text box to their website and/or blog and it will display a clickable button back to your The Best Free Craft Articles blog. Now, how easy is that?

If you want to create an HTML text box for your own website of blog like the "I'M A CONTRIBUTOR" button shown above the HTML coding you would use is as follows (minus the 3 ***'s that are shown to display the HTML coding in this post):

<***br><***center><***b>I'M A CONTRIBUTOR<***/b><***/center>
Tell everyone you're a contributor to the Best Free Crafts Articles Blog by placing our button on your website or blog. Just copy/paste the HTML code from the text box below to your website or blog.
<***br><***br>
<***center><***a href="http://freecraftarticles.blogspot.com/"><***img src="http://i24.photobucket.com/albums/c47/LWOriginals/FREECraftArticlesButtonContributor1.jpg" /><***/a>
<***br><***br>
<***textarea cols="15" rows="10" wrap="ON"><***a href="http://freecraftarticles.blogspot.com/"><***img src="http://i24.photobucket.com/albums/c47/LWOriginals/FREECraftArticlesButtonContributor1.jpg" /><***/a><***/textarea><***/center>

Your would remove all of the 3 ***'s in the coding above then change the "I'M A CONTRIBUTOR" to be what you want. Change the message to be what you want. And, change the URL in both paragraphs to be the URL of your website and/or blog and change the URL of the image to be the URL for your button.

The 1st paragraph above sets up the clickable button link. The second paragraph is for the HTML coding you want displayed within your text box. The "Cols" is for the width of the box - the larger the wider and the rows is for the height of the box - the higher the longer. Wrap tells the coding to be continuous.

The use of the text boxes for easily allowing copying and pasting of code are endless. For me - I'm happy with my new buttons. I may just have to create some more.



No comments:

Post a Comment