Tag Pre di Blogger Dengan Style Berbeda

PPenggunaan Tag Pre (<pre>...</pre>) adalah tag yang biasanya digunakan untuk menentukan format tertentu pada suatu text dengan keunikannya tersendiri. Tag pre umumnya digunakan pada text yang berupa kode seperti HTML, CSS, Javascript, jQuery, Php dan XML denga format dan tema yang berbeda-beda.

• Tempatkan kode CSS dibawah ini  kedalam template blogger tepatnya diatas tag ]]></b:skin> dan simpan template

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;}

Markup HTML

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

Keterangan ! : Ganti  ### dengan kode anda

HASILNYA SEPERTI INI

Tweet

Ditulis Oleh: wisata pisak at 7:21 AM