Membuat Tema Vanila Untuk Tag Pre

Modas4rt | Membuat Tema Vanila Untuk Tag Pre | Seperti yang anda tau tag pre itu di gunakan para blogger untuk mencamtumkan script, html, css, atau javascript, nah kali ini saya share tentang Membuat Tema Vanila Untuk Tag Pre, .

Membuat Tema Vanila Untuk Tag Pre

CSS

Letakkan kode di bawah tepat di atas ]]></b:skin>

pre {
background-color:white;
background-image:-webkit-linear-gradient(top, #f5f5f5 50%, white 50%); background-image:-moz-linear-gradient(top, #f5f5f5 50%, white 50%);
background-image:-ms-linear-gradient(top, #f5f5f5 50%, white 50%);
background-image:-o-linear-gradient(top, #f5f5f5 50%, white 50%);
background-image:linear-gradient(top, #f5f5f5 50%, white 50%);
-webkit-background-size:30px 30px;
-moz-background-size:30px 30px;
-ms-background-size:30px 30px;
-o-background-size:30px 30px;
background-size:30px 30px;
background-repeat:repeat;
font:normal bold 12px/15px "Inconsolata","Monaco","Consolas","Andale Mono","Bitstream Vera Sans Mono","Courier New",Courier,monospace;
color:#333;
border:2px solid #666;
position:relative;
padding:0 7px;
margin:10px 0;
overflow:auto;
word-wrap:normal;
white-space:pre;
-webkit-box-shadow:0 1px 2px rgba(0,0,0,0.2);
-moz-box-shadow:0 1px 2px rgba(0,0,0,0.2);
box-shadow:0 1px 2px rgba(0,0,0,0.2);
position:relative;
}
pre[data-codetype] {
padding:29px 1em 7px 1em;
}
pre[data-codetype]:before {
content:attr(data-codetype);
display:block;
position:absolute; top:0; right:0; left:0;
background-color:#666;
padding:0 7px;
font:bold 11px/20px Arial,Sans-Serif;
color:white;
}
pre[data-codetype="HTML"] {border-color:#0B7E88;color:#08464B;}
pre[data-codetype="CSS"] {border-color:#7B990C;color:#4B5D08;}
pre[data-codetype="JavaScript"] {border-color:#545448;color:#1F2E24;}
pre[data-codetype="JQuery"] {border-color:#395540;color:#2E2E27;}
pre[data-codetype="PHP"] {border-color:#FF9900;color:#865003;}
pre[data-codetype="XML"] {border-color:#FF0C39;color:#790015;}
pre[data-codetype="HTML"]:before {background-color:#0B7E88;}
pre[data-codetype="CSS"]:before {background-color:#7B990C;}
pre[data-codetype="JavaScript"]:before {background-color:#545448;}
pre[data-codetype="JQuery"]:before {background-color:#395540;}
pre[data-codetype="PHP"]:before {background-color:#FF9900;}
pre[data-codetype="XML"]:before {background-color:#FF0C39;}

Cara Pemasangan 

<pre data-codetype="HTML"> Kode anda </pre>
<pre data-codetype="CSS"> Kode anda </pre>
<pre data-codetype="JavaScript"> Kode anda </pre>
<pre data-codetype="JQuery"> Kode anda </pre>
<pre data-codetype="PHP"> Kode anda </pre>
<pre data-codetype="XML"> Kode anda </pre>

• Demo

Semoga bermanfaat. Salam Blogger!

"SERTAKAN LINK SUMBER MODAS4RT SAAT DI COPYPASTE"

Terimakasih sudah membaca artikel di atas, jika anda ingin mendapat update artikel Modas4rt. 

anda bisa  Follow blog ini Join this site dan jika anda ingin share salah satu artikel kami. di harapkan sertakan link sumber atau setidaknnya sumber Modas4rt saat di copypaste.