stylish text area

 Text area formed by <textarea> tag. The function oftext area is to give a frame for special words. But, there are many blogger/webmaster using text area for script box. There are many text area, so now I will give you example the kinds of text area.

Standard Text Area

Browseyourblog

<textarea>Browseyourblog</textarea>



Text Area that can you set the widht and height
Browseyourblog

<textarea cols="50" rows="10">Browseyourblog</textarea>



Text Area with dashed line

Browseyourblog

<textarea cols="50" rows="5" style="border: 2px dashed;">Browseyourblog</textarea>

Colorful Text Area

Browseyourblog

<textarea cols="50" name="code" rows="3" style="-moz-border-radius: 10px; background: #000000; border-bottom: 4px solid #FF0000; border-left: 4px solid #00FF00; border-right: 4px solid #FF00FF; border-top: 4px solid #FFFF00; color: red; line-height: 1.5em; padding: 5px;">Browseyourblog</textarea>

Text Area with Select All button

Select All

<div>
<form name="copy">
<div align="center">
<input onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button" value="Select All" /> </div>
<div align="center">
</div>
<div align="center">
<textarea cols="55" name="txt" rows="100" style="height: 85px; width: 185px;" wrap="VIRTUAL">Select All</textarea></div>
</form>
</div>

Add Zoom Hover Effect to Image

Now, we will make new effect. That's Add Zoom Hover Effect to Image. Shortly, when you put your cursor on an image, the image will be zoom (larger). Do you want to try the demo? OK, this is it. And if you want to know how to make the effect, just follow the steps below.

1. Log in to your blogger account
2. Go to Design --> Edit HTML
3. Copy the code below, and paste above ]]></b:skin>

.hovergallery img{ -webkit-transform:scale(0.8); -moz-transform:scale(0.8); -o-transform:scale(0.8); -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; -o-transition-duration: 0.5s; opacity: 0.7; margin: 0 10px 5px 0; } .hovergallery img:hover{ -webkit-transform:scale(1.1); -moz-transform:scale(1.1); -o-transform:scale(1.1); opacity: 1; }

4. Then if you want to active the effect, use this code

<a class="hovergallery" href="http://full-tricks.blogspot.com/" target="_blank"> <img_proxy_proxy_proxy_proxy_proxy_proxy_proxy src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrFD7aD4sRPtoS8efofBQ609REmZtDjgdPc4ug0nlPhZWMoIhEj6yMsJcXdp0AvtHHRmmGCEbaIIFuz4wIZbw1XuKVbIozkPduEkTLXz8ygd0ZreIaDd1eu5pEjUMcgP48BzyfgihXpgg/s1600/my-friend-ganesha-3-15-12x9.jpg" /></a>

5. Finish.....!