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.

Cara membuat teks area

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


Art of Sand

<style>
div.pasir{ width: 353px; height: 254px; background: url(https://lh3.googleusercontent.com/-UuhmranprYk/UN9IZQDZvmI/AAAAAAAABFk/d4JlaiPLIzc/s492/pasir.jpg); border: 1px groove gray; }
div.misty{ 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.5; filter:alpha(opacity=50); }
div.misty p{margin: 15px 15px ; color: #000000; }
</style><div class="pasir"><div class="misty">

<p>Tulis kode atau atau teks yang ingin anda tampilkan dalam teks area di sini
</p></div></div>

Black Stone

<style>
div.blackstone{ width: 353px; height: 254px; background: url(http://www.interiordesignforhouses.com/wp-content/uploads/images/31695-black-and-white-design-free-desktop-wallpaper-hd-wallpapers-download_531x331.jpg); border: 1px groove gray; }
div.kabut{ 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.75; filter:alpha(opacity=75); }
div.kabut p{margin: 15px 15px ; color: #000000; }
</style><div class="blackstone"><div class="kabut">

<p>Tulis kode atau atau teks yang ingin anda tampilkan dalam teks area di sini
</p></div></div>

The Eye

<style>
div.eye{ width: 353px; height: 254px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixpP4HEyrC1dMnxDlB8v5ywfpJtBfFnhywRKphgXmCz1yWoDXMr7qjVRO7mDf5A6QixMDHYSGz7JDQMAdwPvsSWYQ6nPmd2Md1K2RZ8wD_FX1CmNni6CzS-S954RZdqf2rMdNJ56srPXjn/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>

Modifikasi teks area

Tentunya, tidak ada hasil yang lebih memuaskan dibanding karya sendiri, silahkan anda kreasikan teks area di atas sesuai selera anda sendiri, saran saya, cobalah merubah gambar background nya terlebih dahulu.

Semoga posting cara membuat teks area yang saya berikan kali ini bermanfaat, terima kasih.

Artikel Membuat Teks Area Dengan Background ini 100% bukan hasil copy paste
Dibaca oleh12606 pembaca dari 12727 pengunjung.
Ditulis Oleh Unknown
Semua artikel terproteksi DMCA.
Hanya script dan kode tutorial yang boleh di copy paste, dengan menyertakan sumbernya.
Artikel The Art of SEO lainnya bisa anda temukan pada menu related post berikut ;