Membuat Teks Area Dengan Background

Pada blog yang menyajikan tutorial, biasanya kita akan menemukan teks area untuk menampilkan kode dari tutorial yang mereka berikan. Meskipun sebenarnya —menurut saya pribadi — teks area lebih nyaman dilihat dengan tampilan default nya, namun tidak ada salahnya jika kita berkreasi dengan memberi background dan transparent scroll bar pada teks area tersebut.

Berikut cara membuat teks area dengan background.

Pada saat membuat posting baru, anda hanya perlu menyalin kode berikut sesuai style yang anda pilih pada mode HTML.
Ini  Kodenya :

<style> div.eye{ width: 353px; height: 254px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoXRtZoKIbMp3_J_Vi9yCgrySnynOzUeKmW6t0bytmQrgNtnCSyXoMkcxWUqIZOqMN2DT7c8yx8ApraoZ8yvoXSPbgIQY2X7lvgYMuIwd7w0_oYvzsc12LZsKYfnWxUuIf8ACxMJeQIKPl/s1600/45.jpg)center; border: 1px groove gray; } div.asap{ width: 350px; margin: 0px 2px 2px 0px; height: 250px; overflow:auto; background-color: #ffffff; border-top: 1px solid grey; border-right: 3px solid grey; border-bottom: 3px solid grey; border-left: 1px solid grey; opacity:0.8; filter:alpha(opacity=80); } div.asap p{margin: 15px 15px ; color: #000000; } </style><div class="eye"><div class="asap"> <p>Tulis kode atau atau teks yang ingin anda tampilkan dalam teks area di sini </p></div></div>

Tweet