Cara Membuat Tema Vanila Untuk Tag Pre

Tema vanila tag pre ini cukup keren dan menarik bila diaplikasikan pada blog,.. coba anda perhatikan gambar dibawah ini

Cukup keren bukan?....kalau sobat ingin memasang pada blog sobat, berikut  langkah- langkahnya :

• Masuk ke akun Blogger Anda.
• Klik Rancangan.
• Klik tab Edit HTML.
• Klik Download Template Lengkap, untuk berjaga-jaga kalau nanti terjadi kesalahan dalam mengedit template.
• Cari kode ]]></b:skin> (gunakan F3 untuk pencarian cepat)
• Lalu copy kode css dibawah ini dan paste diatas kode ]]></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: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;
}

Untuk menulisan script kode di postingan, cukup anda masukan kode dibawah ini :

Kode HTML :

<pre data-codetype="HTML"> ... </pre>

Kode CSS :

<pre data-codetype="CSS"> ... </pre>

Kode JAVASCRIPT :

<pre data-codetype="JavaScript"> ... </pre>

Kode JQUERY :

<pre data-codetype="JQuery"> ... </pre>

Kode PHP :

<pre data-codetype="PHP"> ... </pre>

Kode XML :

<pre data-codetype="XML"> ... </pre>

Disini yang perlu sobat ingat untuk penulisan kode, harus di mode EditHTML bukan mode COMPOSE

LIHAT DEMO


source :  http://hompimpaalaihumgambreng.blogspot.com/