Text Area Biasa Aja

Mau tau text area biasa aja?

Text area adalah kotak dialog yang berisi tulisan tertentu atau kode yang terpisah dalam kotak tersendiri dalam posting. Hal ini dilakukan untuk memberikan kesan bahwa tulisan atau kode dalam text area tersebut adalah penting atau apalah namanya. Jadi text area biasa aja adalah text area sederhana namun sudah dimodifikasi menjadi lebih menarik namun masih biasa aja. Bingung ya? biasa aja gan...!!! heheheee. Selanjutnya text area ini dibuat juga dengan css yang sudah lolos validasi di W3C dan html yang biasa aja agar kita gak terlalu pusing dibuatnya. Masih pusing gan? biasa aja gan...bawa minum obat dulu. Selain itu cara pemasangan juga biasa aja, karena cukup mudah diterapkan dengan cara biasa aja. Baiklah, sekarang mari kita bahas trick pasang text area biasa aja. Ikuti langkah yang biasa aja berikut ini.

Trick pasang text area biasa aja

• Log in ke blog anda yang tidak biasa
• Klik Template
• Klik Edit HTML
• Masukkan kode css biasa aja ini di atas kode ]]></b:skin> atau </style> kalau peletakan kode css sudah berubah.

Update dari masukan Devi Indriyani pada 13 Februari 2015 jam 12.54 am

/* halaman utama dan hover */
.nyangkut_onmos{height:32px; width:400px; border:2px solid #666; background:#CCC; border-radius:12px; -moz-border-radius:12px; -webkit-border-radius:12px; -o-transition:all 1s ease-in-out; -moz-transition:all 1s ease-in-out; -webkit-transition:all 1s ease-in-out; padding:5px 5px; margin:15px auto; margin-top:100px;font:12px Arial; color:#036; overflow:hidden; box-shadow:0 1px 8px #333; -moz-box-shadow:0 1px 8px #333; -webkit-box-shadow:0 1px 8px #333}
.nyangkut_onmos:hover{min-height:250px; border:2px solid #333; background:#222;color:#000; text-shadow:0 1px 1px #999}
.nyangkut_onmos h3, .nyungsep h3{font-size:14px; font-family:Droid Serif; font-weight:bold; color:#000; text-align:center; text-shadow:0px 1px 1px #fff; margin:3px 5px; padding:3px 10px; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; border:1px solid #999; -o-transition:all 1s ease-in-out; -moz-transition:all 1s ease-in-out; -webkit-transition:all 1s ease-in-out}
.nyangkut_onmos h3:hover{color:#ddd}

/* efek gambar pusing */
.nyangkut_onmos img.mini, .nyangkut_onmos img.minianima{width:70px; border:4px solid #666; padding:3px; border-radius:6px; -moz-border-radius:6px; -webkit-border-radius:6px; float:left; margin:0 10px 5px 0; background:#222; -o-transition:all 1.5s; -moz-transition:all 1.5s; -webkit-transition:all 1.5s}
.nyangkut_onmos img.mini:hover, .nyangkut_onmos img.minianima:hover{box-shadow:1px 1px 15px #000; -moz-box-shadow:1px 1px 15px #000; -webkit-box-shadow:1px 1px 15px #000; border:4px solid #CCC; background:#666; -o-transform:scale(1.4); -moz-transform:scale(1.4); -webkit-transform:scale(1.4);  margin-top:20px; margin-left:15px}
.nyangkut_onmos img.minianima:hover{-o-transform:scale(1.4) rotate(360deg) translate(0px); -moz-transform:scale(1.4) rotate(360deg) translate(0px); -webkit-transform:scale(1.4) rotate(360deg) translate(0px)}

/* halaman dalam */
.nyungsep{margin-top:15px; height:200px; overflow:auto; padding:0 5px; -o-transition:all 1s ease-in-out; -moz-transition:all 1s ease-in-out; -webkit-transition:all 1s ease-in-out; background:#fafafa}
.nyungsep:hover{background:#444; color:#eee; text-shadow:0 0px 1px #fe0303}

• kode biru untuk menyesuaikan lebar dan tinggi kota luar sebelum dihover
• Kalau udah sip...selanjutnya klik Simpan Template
• Sampai di sini masih biasa aja bukan? nah kita lanjut trick menampilkan text area biasa aja dalam postingan. Ketika kita menulis artikel, menulis artikel lo gan...bukan SMS...klik deh tuh mode HTML (samping Compose di sebelah kiri atas). Kemudian masukkan kode html biasa aja ke dalamnya.

<div class="nyangkut_onmos">
<h3>JUDUL LUAR</h3>
<div class="nyungsep">
<h3>JUDUL DALAM</h3>
<img class="minianima" src="ALAMAT GAMBAR ANDA" />
TULISAN PERTAMA DI SINI
    <br/><br/>
TULISAN KE DUA DI SINI
</div>
</div>

• Ganti tulisan hijau sesuai petunjuk
• kode merah <br/><br/> adalah kode untuk memberikan jarak (tab enter) antar alinea
• Kalau udah selesai nulis artikelnya, klik Publikasikan dan lihat hasilnya yang mungkin tidak biasa padahal biasa aja.
• Nah sampai di sini masih tetap biasa aja bukan? makanya namanya text area biasa aja.

Demikian penjelasan trick membuat text area yang biasa aja. Semoga bisa dfahami dengan biasa dan diterapkan juga dengan biasa aja. Selamat mencoba dan sukses selalu. Salam sahabat blogger.

Terima kasih kepada Devy Indriyani atas perbaikan cssnya.

Share this post