Tag Pre Blogger | Syntax Highlighter

Apa itu Tag Pre ? - tag pre adalah tag yang biasa digunakan dalam memformat tertentu pada suatu text . Tag pre umumnya digunakan pada text yang berupa kode seperti HTML, CSS, Javascript, jQuery, Php dan XML denga format dan tema yang berbeda-beda .

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 yang sesuai dengan format diatas ( HTML , CSS , JavaScript , JQuery , PHP , XML )

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 .

Dengan Cara :

• Masuk ke Dashboard Blog
• Edit HTML -> CTRL + F -> ]]></b:skin>

pastekan kode CSS diatas ]]></b:skin>

• Klik Simpan Template

untuk membuat/memasukkan Tag Pre Blogger dalam entri silahkan buat Entri Baru .. pilih HTML

jika masih bingung mohon dikomentar aja malu bertanya sesat dijalan hlo :D

yaudah gitu aja :p