css3 box kode untuk css dan HTML/javascript

Box kode css3

CSS3 Box Kode - hai sobat blogger ? apakah kalian sudah mempraktekkan trik blogspot / css3 terbaru ? trik ini adalah bagaimana cara membuat kode box untuk css dan HTML/javascript dengan style css3.caranya sebenarnya mudah kok.simak dulu tutorial ini.

Hasil :

code anda disini

Tutorial :

• masuk akun blogger
• ke menu edit html >> "expand template widget"
• cari kode ]]></b:skin> dengan ctrl + f
• pastekan kode berikut,diatasnya

.code-seohtc {

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

}

.code-seohtc: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;

}

• simpan perubahan
• sekarang , masuk ke postingan.
• buat sebuah tutorial blogspot
• lalu ketika ingin membuat kode yang akan dishare.
• masukkan kode berikut

<div class="code-seohtc"> Your Code Here </div>

Note :

• ganti kode yang berwarna merah dengan kode anda sendiri.
• publikasikan dan lihat hasilnya

~ Happy Blogging - Ega Ariya Dirgantara ~