Thursday 22 August 2013

Teks Box CSS Keren


Cukup menarik saya rasa bila pada kolom text area sobat coba pasang efek seperti ini,yang mana efek ini akan memberikan kesan tersendiri,bila sobat arahkan mouse pada kolom text area dia kan memberikan warna efek terang dan bila di lihat secara biasa tanpa mengarahkan mouse maka di seakan meredup warnanya,gimana tertarik bukan silahkan ajah langsung.




1. Seperti biasa sobat login dulu ke akun blog sobat.
2. Kemudian pilih menu Template dan pilih Edit HTML
3. Centang dulu kotak kecilnya ( Expand Widget Template)
4. Cari Kode ]]></b:skin> kemudian letakan kode CSS 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;
}

5. kemudian Simpan Template.
Keterangan
Untuk penulisan dalam postingan bisa sobat gunakan script text area di bawah ini
<div class="code1"> Your Code Here </div>


Selamat mencoba semoga berhasil

2 comments:

  1. Howdy, i read your blоg &X6F;ccasionally а&X6e;d
    i oω&X6E; a similar οne and i was just
    wondering iff you &X67;e&X74; а lot of spam
    commentѕ? If sο how do you r&X65;du&X63;e it, any pl&X75;gin or anything you
    can adѵisе? I get so much lаtely it's driving me mad so any support is ve&X72;y muc&X68; appreciated.



    Here is my sіte - trial nitric power

    ReplyDelete
  2. Howdy, i read your blоg &X6F;ccasionally а&X6e;d
    i oω&X6E; a similar οne and i was just
    wondering iff you &X67;e&X74; а lot of spam
    commentѕ? If sο how do you r&X65;du&X63;e it, any pl&X75;gin or anything you
    can adѵisе? I get so much lаtely it's driving me mad so any support is ve&X72;y muc&X68; appreciated.



    Here is my sіte - trial nitric power

    ReplyDelete

Silahkan Komen Rider,