Cara Membuat Teks Area Keren dengan CSS

Arahkan cursor anda pada box atau teks area di bawah ini dan silahkan baca pengantar tutorialnya.

Teks area adalah sebuah wadah tulisan, script, dan gambar dalam suatu posting area. Pada beberapa posting di blog lain, kita menemukan teks area biasa yang memuat tampilan teks atau script, sehingga menjadi daya tarik tersendiri bagi blog tersebut. Kali ini saya akan share teks area elastis yang menarik dan dapat menambah gaya tampilan posting blog anda.Bagaiman? anda tertarik? Sekarang mari kita bahas cara membuat teks area elastis. Ikuti langkah berikut. (setelah gambar)

Log in ke blogger Klik Rancangan Klik Edit HTML Masukkan kode berikut di atas ]]></b:skin> 
.blogonolrelative{ float:left; position:relative; width:170px; height:200px; margin:0 10px 5px 0} .blogonolabsolute{ top:0; left:0; position:absolute; width:150px; height:188px; background:rgba(0,0,0,0.1); border:2px solid #999; border-radius:6px; -moz-border-radius:6px; -webkit-border-radius:6px; border-top-left-radius:12px; border-bottom-right-radius:12px; -moz-border-radius-topleft:12px; -moz-border-radius-bottomright:12px; -webkit-border-top-left-radius:12px; -webkit-border-bottom-right-radius:12px; overflow-x:hidden; font-family:Arial,Helvetica,sans-serif; font-size:9px; padding:8px 8px 15px; overflow:hidden; -o-transition:all 0.9s ease-out; -moz-transition:all 0.6s ease-out; -webkit-transition:all 0.9s ease-out} .blogonolabsolute:hover{ width:400px; height:300px; color:#eee; text-shadow:1px 1px 1px #000; background:#666; font-size:14px; overflow:auto} .blogonolabsolute img{ float:left; margin:0 10px 5px 0; border:2px solid #888; border-radius:8px; -moz-border-radius:8px; -webkit-border-radius:8px; box-shadow:1px 1px 10px #fff; -moz-box-shadow:1px 1px 10px #fff; -webkit-box-shadow:1px 1px 10px #fff; width:70px; height:auto} .blogonolabsolute:hover img{ width:170px} 

• Klik Simpan Template Selanjutnya bila ingin membuat teks area elastik, tambahkan kode berikut. 

<div class="blogonolrelative"><div class="blogonolabsolute"><img src="ALAMAT GAMBAR ANDA" /> Tuliskan teks di sini. Sampeyan dapat juga masukkan link yang berbentuk teks di sini (setelah gambar)</div></div>Tuliskan artikel atau posting di luar yang akan di masukkan box di sini Tuliskan artikel atau posting di luar yang akan di masukkan box di sini

•  Klik Publikasikan dan lihat hasilnya Selamat mencoba dan sukses selalu.