Show a text in a Text Box with Select All Button

Posted by Tricks Guru In | 0 comments»
People are always looking to make their blog look so nice and professional. In order to make it more professional, some kind of editing is needed than just using the blogger's default settings. This post shows how to highlight a particular text or highlight specific code from the rest of the texts that contain post or form the whole blog template.

This has another very important use too. For an example lets say that you have a long html/css code with you and  you need your blog readers to copy that code from your blog or your website. If the code is big enough, you readers would face a difficulty when scrolling down and coping the whole content.


But what if you can enter the whole big code in a small text box with a button to select all. Then that would be great. It will give a compact, professional looking for your blog and an easy solution to your readers as well.

For an example let's say your sidebar is 180 px wide and 200 px high and you need to insert a html code which can be copied by your readers. You may wonder how this is done. Because if you add a html code, it will be automatically converted in the html widget it self. But by this method, that is possible. Just look at the picture. The code is there in the text box. So readers can copy it and paste in their blog.

The same example is shown below as a gadget. Just have a look.



Now let's go for the code for the above widget. The code will look like below.

<div>
<form name="select">
<div align="center">
<input onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button" value="Select the Below Text" /></div><div align="center"></div>
<p align="center">
<textarea style="WIDTH: 190px; HEIGHT: 100px" name="txt" rows="100" wrap="VIRTUAL" cols="55"><a href="http://www.tricksfinder.com/" target="blank"><img src="http://goo.gl/26BNh" /></a></textarea>
</p>
</form>
</div>

In the above code replace the coloured content as your requirements and add your own the widget as a html/javascript or within a post itself.

Red Coloured Content This is the name which is shown in the button.
Purple Coloured Content -  This is the height and width of the text box.
Blue Coloured ContentThis is the content in the text box.

That's it. Now you can change your long huge paragraphs into a graphical text box.
0 Comments
Comments

0 comments:

Post a Comment

Related Posts Plugin for WordPress, Blogger...