Textarea Penuh Dengan TamPilan Keren

Textarea bukan sebuah box sederhana saja yang sekedar tampil apa adanya untuk wadah link exchange, banner exchange atau kode html dan teks yang lain. Dengan sedikit polesan bedak berupa kode CSS dan CSS3, tak seorangpun akan menduga bahwa yang mereka lihat adalah sebuah textarea. Sampeyan dapat menggunakan textarea penuh gaya ini di blog untuk wadah baru yang tampil penuh pesona.

Menghilangkan border bawaan yang berupa warna border dan tebal border, serta menghilangkan outline menjadi kunci hingga textarea menampilkan diri dalam perwujudan yang berbeda. Tentu saja itu tak cukup. Kode CSS dan CSS3 menejadi baju baru yang menjadikan textarea seakan baru keluar dari salon dengan dandanan yang serba"wah" dan penampilan "elegan, manis, cantik sekaligus macho!". He .... he ... apa ada ya, katanya cantik tapi macho! Ha ... ha ... Ada, dhong! Tuh tetangga sebelah sampeyan yang suka kenes tapi ketawanya ngakak kaya' gondhoruwo! Kita akan gunakan CSS3 border-radius, CSS3 drop shadow (box shadow), CSS3 text-shadow, CSS3 text-shadow, CSS3 Transition serta beberapa kode CSS seperti margin, padding, border dan outline. Mengapa kita gunakan "outline"?

Outline: none; berfungsi untuk melenyapkan border yang muncul ketika bagian di textarea "di klik", baik untuk copy code ataupun sekedar sebuah "klik" tak sengaja. Tanpa menghilangkaan "outline" tentu saja bagi beberapa yang tahu kode html akan segera sadar bahwa apa yang di hadapannya adalah sebuah textarea. Sampeyan bisa tambahkan atau rubah beberapa kode CSS yang disertakan di sini bila ingin membuat textarea ini tampil dengan gaya yang berbeda.

SimpanLah Kode Dibawah Ini Tepat Diatas ]]></b:skin>

textarea.GRetarea {
font-size: 14px;
font-family: Arial, Tahoma, Helvetica;
border: 0px solid transparent;
outline: none;
border: 5px solid;
border-color: #ccc #aaa #aaa #ccc;
border-radius: 12px;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
background: #eee;
box-shadow: -1px -1px 1px #533801, 1px 1px 1px #533801, 1px 1px 10px #555;
-moz-box-shadow: -1px -1px 1px #533801, 1px 1px 1px #533801, 1px 1px 10px #555;
-webkit-box-shadow: -1px -1px 1px #533801, 1px 1px 1px #533801, 1px 1px 10px #555;
text-shadow: 1px 1px 1px #666;
padding: 5px 5px 2px;
color: #625F3C;
margin: 15px 5px;
-o-transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
-webkit-transition: all 1s ease-out;
}
textarea.GRetarea:hover {
border-color: #aaa #888 #888 #aaa;
border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
background: #fff;
color: #111;
text-shadow: 1px 1px 1px #aaa;
box-shadow: -1px -1px 1px #533801, 1px 1px 1px #533801, 1px 1px 20px #222;
-moz-box-shadow: -1px -1px 1px #533801, 1px 1px 1px #533801, 1px 1px 20px #222;
-webkit-box-shadow: -1px -1px 1px #533801, 1px 1px 1px #533801, 1px 1px 20px #222;
}

Gunakan kode HTML berikut saat digunakan di halaman posting atau melalui "Add Gadget".

<textarea class="GReterea" row="6" cols="60">
Tuliskan Teks atau Kode HTML di sini !
</textarea>

<br />  Selamat Mencoba ^_^<br /> Dan Semoga Artikel ini Bermanfaat Untuk anda ^^ . terimakasih ..<br /> sudah maw berkunjung Di blog saya !!<br />

07.20 | 0 komentar | Read More

Cara Buat dan Pasang Javasript No Right Click-2

Yang ini adalah cara ke-2 untuk membuat right click pada mouse tidak berfungsi dengan tanpa komentar (allert) sama sekali. Dia akan diam seribu bahasa dan membuat pengunjung blog jadi sedikit bingung dan pasti penasaran. Javascript yang kita gunakan juga teramat sederhana

Dan anda Cukup Mengikuti Instruksi dari Saya Seperti ::

Langkah untuk memasang dan menggunakan javascript No Right Click-2

1. Login to Blogger (Login ke Blogger). : Lakukan login dengan menuliskan User Name (Nama Pengguna) atau Email Address dan Password (Sandi). Setelah semua terisi dengan benar lanjutkan dengan KLIK Login.
2. Dasboard (Dasbor) : Setelah login dan memasuki halaman dasboard, KLIK "Design (Rancangan)".
3. Design (Rancangan) : Halaman Design yang terbuka pertama kali adalah di bagian "Page Elements (Elemen Laman)", cari dan KLIK "Edit HTML".
4. Edit HTML : Gunakan Ctrl+F (pada keyboard) untuk mencari kode ]]></b:skin>.
5. Letakkan javascript di bawah ini tepat di bawahnya.

<script type="text/javascript">
//<![CDATA[ /*bgsGR gubhuh reyot -- No Right Click */
var isNS = (navigator.appName == "Netscape") ? 1 : 0;
if(navigator.appName == "Netscape") document.captureEvents(Event.MOUSEDOWN||Event.MOUSEUP);
function mischandler(){
return false;}
function mousehandler(e){
var myevent = (isNS) ? e : event;
var eventbutton = (isNS) ? myevent.which : myevent.button;
if((eventbutton==2)||(eventbutton==3)) return false;}
document.oncontextmenu = mischandler;
document.onmousedown = mousehandler;
document.onmouseup = mousehandler;
//]]>
</script>

Dan Simpan Lah ..
Lalu Lihat lah apa yang terjadi pada Blogsite anda ^_^ .. terimakasih !!

07.01 | 0 komentar | Read More