Teks Area Elastis dengan CSS3

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.

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

"keep spirits and do the best"