Text Box Dengan CSS

Halo sobat semua,,,,dalam artikel kali ini saya akan membagikan cara membuat tex box yang di lengkapi dengan CSS, mungkin diantara sobat semua ada yang bosan dengan tampilan tex box area yang hanya menoton atau hanya itu-itu saja,,,,nah kali ini saya akan memberikan cara perubahan tex box area dengan sedikit sentuhan CSS….

Dijamin dengan hal ini maka tampilan blog akan lebih sempurna…

Laangkah2 Pembuatannya:

Demo

• Login ke blog sobat
• Kemudian pilih menu Template dan pilih Edit HTML
• Jangan lupa melakukan backup template…
• Cari Kode ]]></b:skin> 
• Letakan script di bawah tepat di atas kode ]]></b:skin>.

.code1 {
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 : #000000 url(http://1.bp.blogspot.com/-nic37VqULoA/UDdTubWtwcI/AAAAAAAABbs/zv-i-PbnWHQ/s1600/labstrike-1.png) repeat-y top left;
border : 1px solid #000000;
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
}
.code1:hover{
background : #000000 url(http://1.bp.blogspot.com/-alUx-JlZsZw/UDdT4qYXglI/AAAAAAAABb0/7ili3p2WHa4/s1600/
labstrike-2.png) repeat-y top left;
color:#FEF9BF;
border : 1px solid #000;
border-left:20px solid #ccc;
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, .3);
-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, .3);
box-shadow: 0px 0px 10px rgba(0, 0, 0, .3);
box-shadow: 10px 10px 5px #888888;
}

• Jika penempatan script sudah dilakukan,,,langsung save pekerjaannya…

Catatan:

• Lihat script yang berwarna biru, ganti dengan selera masing-masing
• Gunakan script dibawah ini untuk melakukan postingan...

<div class="code1"> Your Code Here </div>

Sekian artikel dari saya, semoga bisa membantu sobat semua....salam blogger...