Cara membuat 9 macam textarea super elegant di blog

Pada kesempatan kali ini saya akan share lagi ke anda tentang cara membuat 9 macam textarea super elegant di blog. Saya kasih judul demikin karena 9 textarea ini benar-benar elegan, mempesona, keren, cantik, menarik dsb. hehe..:D

View Demo

 

Cara menerapkannya di blog cukup simple, bagi anda yang berminat dan mencobanya di blog silahkan ikuti langkah - langkah berikut ini :

• Masuk ke akun blogger anda
• Kemudian klik Template -> Edit HTML (CTRL + F)
• Cari kode/tag ]]></b:skin>
• Kemudian letakan kode CCS berikut tepat di atas tag ]]></b:skin>   

KODE CSS

.md1{overflow:auto;width:503px;height:200px;font-family:"Consolas","Courier New",Courier,mono,serif;color:#848176;margin:15px 35px 15px 15px;padding:10px 10px 10px 35px;clear:both;list-style-type:none;background:#000 url(http://1.bp.blogspot.com/-GYEvx8OT5-k/Tv1otrpKJ-I/AAAAAAAACE8/2ZNywOeZfLQ/s1600/2.JPG) repeat-y top left;border:1px solid #000;border-left:20px solid #ccc;-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition-duration:all .3s ease-in-out;transition:all .3s ease-in-out;-webkit-border-radius:3px;-moz-border-radius:23px 20px 20px 20px;border-radius:23px 20px 20px}
.md1:hover{background:#000 url(http://3.bp.blogspot.com/-nu-RARdmdqk/Tv1sXuE8gtI/AAAAAAAACFQ/mzYPiiWEaK0/s1600/1.jpg) repeat-y top left;color:#fef9bf;border:1px solid #000;border-left:20px solid #ccc;-webkit-box-shadow:0 0 10px rgba(0,0,0,.3);-moz-box-shadow:0 0 10px rgba(0,0,0,.3);box-shadow:0 0 10px rgba(0,0,0,.3);box-shadow:10px 10px 5px #888}

.md2{overflow:auto;width:400px;height:auto;font-family:"Consolas","Courier New",Courier,mono,serif;color:#7a6417;margin:15px 35px 15px 15px;padding:10px 10px 10px 35px;clear:both;list-style-type:none;background:#000 url(http://1.bp.blogspot.com/-GYYwrX408NQ/Tv7JAIEwfMI/AAAAAAAACHc/w8IcSIvTsmc/s1600/000.JPG) repeat-y top left;border:1px solid #d8c37d;-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition-duration:all .3s ease-in-out;transition:all .3s ease-in-out;-webkit-border-radius:3px;-moz-border--moz-border-radius:23px 20px 20px 20px;border-radius:23px 20px 20px}
.md2:hover{border:1px solid #d8c37d;-webkit-box-shadow:0 0 10px rgba(0,0,0,.3);-moz-box-shadow:0 0 10px rgba(0,0,0,.3);box-shadow:0 0 10px rgba(0,0,0,.3);-moz-border-radius:23px 20px 20px 20px;border-radius:23px 20px 20px}

.md3{overflow:auto;width:250px;height:260px;font-family:"Consolas","Courier New",Courier,mono,serif;color:#000;margin:15px 35px 15px 15px;padding:15px 5px 10px 165px;clear:both;list-style-type:none;background:#fff url(http://3.bp.blogspot.com/-3q8oheHzWaA/Tv7a1NqKabI/AAAAAAAACIA/gsSIuJClU3c/s1600/special-offer-01.jpg) repeat-y top left;border:1px solid #fff;-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition-duration:all .3s ease-in-out;transition:all .3s ease-in-out;-webkit-border-radius:3px;-moz-border--moz-border-radius:23px 20px 20px 20px;border-radius:23px 20px 20px}
.md3:hover{background:#fff url(http://1.bp.blogspot.com/-fM6WEgLBjuc/Tv7crtRj1ZI/AAAAAAAACIM/EQUh2LH3ecM/s1600/%255Bwww.gj37765.blogspot.com%255Dmd3.jpg) repeat-y top left;color:#000;border:1px solid #fff;-webkit-box-shadow:0 0 10px rgba(0,0,0,.3);-moz-box-shadow:0 0 10px rgba(0,0,0,.3);box-shadow:0 0 10px rgba(0,0,0,.3)}

.md4{overflow:auto;width:450px;height:153px;font-family:"Consolas","Courier New",Courier,mono,serif;color:#848176;margin:15px 35px 15px 15px;padding:10px 10px 10px 35px;clear:both;list-style-type:none;background:#000 repeat-y top left;border:1px solid #000;border-left:20px solid #ccc;-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition-duration:all .3s ease-in-out;transition:all .3s ease-in-out;-webkit-border-radius:3px;-moz-border--moz-border-radius:23px 20px 20px 20px;border-radius:23px 20px 20px} .md4:hover{overflow:auto;width:450px;height:153px;background:#000 url(http://1.bp.blogspot.com/-6DJrGfUAwYE/TwA0s105QdI/AAAAAAAACKQ/8D6UBp5JMsY/s1600/1.JPG) repeat-y top left;color:#eee;text-shadow:1px 1px 1px #000;text-transform:capitalize;border:1px solid #000;border-left:20px solid #CCC;-webkit-box-shadow:0 0 10px rgba(0,0,0,.3);-moz-box-shadow:0 0 10px rgba(0,0,0,.3);box-shadow:0 0 10px rgba(0,0,0,.3)}

.md5{overflow:auto;width:400px;height:auto;font-family:"Consolas","Courier New",Courier,mono,serif;margin:15px 35px 15px 15px;padding:10px 10px 10px 60px;clear:both;color:#000;list-style-type:none;background:#f5f3f3 url(http://1.bp.blogspot.com/-2ZYI5ROjqm0/TwGVjrytNjI/AAAAAAAACLs/AzzX67VYjCw/s1600/1.JPG) repeat-y top left;border:1px solid #ccc;border-right:15px solid rgba(0,0,0,.100);-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition-duration:all .3s ease-in-out;transition:all .3s ease-in-out;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;-webkit-box-shadow:0 0 10px rgba(0,0,0,.3);-moz-box-shadow:0 0 10px rgba(0,0,0,.3);box-shadow:0 0 10px rgba(0,0,0,.3)}
.md5:hover{overflow:auto;width:400px;height:auto;background:#f5f3f3 url(http://1.bp.blogspot.com/-2ZYI5ROjqm0/TwGVjrytNjI/AAAAAAAACLs/AzzX67VYjCw/s1600/1.JPG) repeat-y top left;border:1px solid #ccc;border-right:15px solid rgba(0,0,0,.100);-webkit-box-shadow:0 0 10px rgba(0,0,0,.3);-moz-box-shadow:0 0 10px rgba(0,0,0,.3);box-shadow:0 0 10px rgba(0,0,0,.3)}

.md6{overflow:auto;width:400px;height:auto;font-family:"Consolas","Courier New",Courier,mono,serif;margin:15px 35px 15px 15px;padding:10px 10px 10px 35px;clear:both;color:#000:list-style-type:none;background:#6d6c6a;border:1px solid #eee;border-left:20px solid #000;border-right:20px solid #000;-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition-duration:all .3s ease-in-out;transition:all .3s ease-in-out;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;-moz-border--moz-border-radius:23px 20px 20px 20px;border-radius:23px 20px 20px;-webkit-box-shadow:0 0 10px rgba(0,0,0,.3);-moz-box-shadow:0 0 10px rgba(0,0,0,.3);box-shadow:0 0 10px rgba(0,0,0,.3)}
.md6:hover{background:#000;color:#fff;border:1px solid #eee;border-left:20px solid #6d6c6a;border-right:20px solid #6d6c6a;-webkit-box-shadow:0 0 10px rgba(0,0,0,.3);-moz-box-shadow:0 0 10px rgba(0,0,0,.3);box-shadow:0 0 10px rgba(0,0,0,.3)}

.md7{color:#848176;overflow:hidden;width:200px;height:300px;background:black;margin:15px 35px 15px 15px;padding:10px 10px 10px 35px;clear:both;border:1px solid #000;border-left:10px solid #ccc;border-right:10px solid #ccc;list-style-type:none;transition:width 2s;text-position:fixed;-moz-transition:width 2s;-webkit-transition:width 2s;-o-transition:width 2s;box-shadow:10px 10px 5px #888}
.md7:hover{width:300px;color:#fff;box-shadow:0 0 10px rgba(0,0,0,.3)}

.md8{margin:15px 35px 15px 15px;padding:20px 10px 10px 35px;background:#eee url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUFB-Nb5BoL9ob5_pKdtkzO1huvYYV1wcGLV2NXKofp_obEAoVkB8VDno-aifrc6AFx5-D8P9fXZG7kOvgWOdVhLTXhC_ZBYRVRp-HUnMCCwctmPszODqQRksP5YFnkTf2ljKnOD-r5RVk/s1600/code+%2528gj37765.blogspot.com.gif) repeat-y top left;border-top:1px solid #aaa;border-right:1px solid #aaa;border-bottom:1px solid #aaa;border-left:1px solid #aaa}

.md9{overflow:auto;width:570px;height:310px;font-family:"Consolas","Courier New",Courier,mono,serif;margin:15px 15px 15px 15px;padding:20px 10px 0 35px;clear:both;color:#fff;list-style-type:none;background:#f7f7f7 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjek1ABuqI2hugbHmiAfd93Xkh4eNxAdLbqvRXJkFogfc6vYmmLiOywjICt-iR5eyEB8cdx8QvdwfY9QeIg1kPyYfC91prnDyUVmLgeop0FvOyTEuLnweVGWUBZR4A2f7REFTUHtnmevdWX/s1600/copy-to-clipboard-cmd-3.png) repeat-y top left;border:1px solid #eee;-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition-duration:all .3s ease-in-out;transition:all .3s ease-in-out;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px}
.md9:hover{background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjek1ABuqI2hugbHmiAfd93Xkh4eNxAdLbqvRXJkFogfc6vYmmLiOywjICt-iR5eyEB8cdx8QvdwfY9QeIg1kPyYfC91prnDyUVmLgeop0FvOyTEuLnweVGWUBZR4A2f7REFTUHtnmevdWX/s1600/copy-to-clipboard-cmd-3.png) repeat-y top left;border:1px solid #eee;-webkit-box-shadow:0 0 10px rgba(0,0,0,.3);-moz-box-shadow:0 0 10px rgba(0,0,0,.3);box-shadow:0 0 10px rgba(0,0,0,.3)}
.md-9{overflow:auto;width:542px;height:230px;font-family:"Consolas","Courier New",Courier,mono,serif;margin:15px 15px 15px 15px;padding:20px 10px 0 0;clear:both;color:#96948a;list-style-type:none;background:#000;border:1px solid #000;-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition-duration:all .3s ease-in-out;transition:all .3s ease-in-out;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px}

Save template anda..

Untuk menampilkan textarea super elegant di postingan HTML gunakan kode-kode di bawah ini.

1. <div class="md1">TEKS ANDA DI SINI</div>
2. <div class="md2">TEKS ANDA DI SINI</div>
3. <div class="md3">TEKS ANDA DI SINI</div>
4. <div class="md4">TEKS ANDA DI SINI</div>
5. <div class="md5">TEKS ANDA DI SINI</div>
6. <div class="md6">TEKS ANDA DI SINI</div>
7. <div class="md7">TEKS ANDA DI SINI</div>
8. <div class="md8">TEKS ANDA DI SINI</div>
9. <div class="md9">TEKS ANDA DI SINI</div>

 Selesai....happy blogging !

Original Source