Tag Pre Blogger Tema Vanilla

Apa itu tag pre ? - 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.

Preview Pre Tag Tema Vanilla

LIVE DEMO

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

CSS

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

Keterangan !

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

Rekomendasi! : Syntax Highlighter dengan Tombol Source Code, Copy & Print

Selesai, cuma itu saja ! :p