Cara Membuat Textarea dengan Background Kertas

Cara Membuat Textarea dengan Background Kertas - biasanya Textarea sangat berguna untuk sobat yang suka membuat tutorial yang mengutamakan script atau kode Html yang panjang. Berbeda dengan Textarea yang satu ini, textarea ini menggunakan tampilan dan background yang menarik jadi enak untuk dilihat,

Cara membuatnya,

• Login ke Blogger,
• Selanjutnya, Template - Edit Template HTML,
• Gunakan ctrl-F untuk mencari kode seperti di bawah ini,

]]></b:skin>

•  Selanjutnya, letakan kode HTML di bawah ini sebelum kode yang sudah sobat temukan,

/* scroll ----------------------------------------------- */ .scrollboxs{ background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCFWY9T_mTB2pdF8IFktoG7E1i6QJrPpD3u5MrfAIKoM0gY5lLrU9E5SU3L84WAHNhVzQfTiFYUPD7oSrOvZ0U-g0RwxvtxQvbBEbj65Xn2ULrnJvG8gurCG7FRCA7poHOOIn9pEv6Sbo/s1600/papers.jpg) repeat; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f3f3f3', endColorstr='#cccccc'); color: #940f04; color:rgba(0,0,0,0.9); border:1px solid rgba(0,0,0,0.5); -moz-border-radius-topright:10px; -webkit-border-top-right-radius:10px; -moz-border-radius-bottomright:10px; -webkit-border-bottom-right-radius:10px; -moz-border-radius-topleft:10px; -webkit-border-top-left-radius:10px; -moz-border-radius-bottomleft:10px; -webkit-border-bottom-left-radius:10px; -webkit-box-shadow: 3px 3px 5px #000000; -moz-box-shadow: 3px 3px 5px #000000; -webkit-border-bottom-left-radius:10px; text-shadow:1px 1px 0px rgba(255,255,255,0.8); text-decoration: none; padding: 3px; overflow: auto; width: auto; height: 150px; padding-top:3px; padding-bottom:3px; } .scrollboxs a, .scroll:hover { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRJoOZX9P5bu7RlrCY40wFlshNmtNtt20JRcXMCJhqy8wgkNG4ikCqQzB0_Zr_ByHw7HtNbgFE7vSews8H53e0UOXcDbXDkbz9HnhcnskSg5xdDbfPSZxG3huTejduZriL63RNk7CrcB4J/s1600/papers.jpg) repeat; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#f3f3f3'); color:#000; color:rgba(0,0,0,0.9); border:1px solid rgba(0,0,0,0.5); -moz-border-radius-topright:10px; -webkit-border-top-right-radius:10px; -moz-border-radius-bottomright:10px; -webkit-border-bottom-right-radius:10px; -moz-border-radius-topleft:10px; -webkit-border-top-left-radius:10px; -moz-border-radius-bottomleft:10px; -webkit-box-shadow: 3px 3px 5px #2E2E2E; -moz-box-shadow: 3px 3px 5px #2E2E2E; -webkit-border-bottom-left-radius:10px; text-shadow:1px 1px 0px rgba(255,255,255,0.8); text-decoration: none; padding: 3px; overflow: auto; width: auto; height: 150px; padding-top:3px; padding-bottom:3px; }

Keterangan :

width: auto; - Lebar Textarea, bisa diubah sebagai contoh 200px;  
height: 150px; - Tinggi Textarea, bisa diubah

Selanjutnya untuk pemanggilannya gunakan Html Posting atau HTML di posting
Dan kode pemanggilannya sebagai berikut,

<div class"scrollboxs">masukan text atau kode html disini</div>

Selamat mencoba.

Posted in: BLOGGER