Headline
Loading...

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


di 07.21

5 komentar

Ada yang baru

ini yang selama ini saya cari akhirnya ketemu juga

Selmat mencoba semoga berhasil....

Marko Kono delete 7/16/2014

keren tag pre-nya ..jadi blog tambah berwarna deh...

Iya...bro....

1. Berikan Komentar Anda Sesuai dengan Judul Artikel.
2. Komentar yang menyertakan link aktif, iklan, atau titip link, akan dimasukan ke folder SPAM.
3. Untuk pertanyaan Out Of Topic ( OOT ) silahkan klik Forum

Konversi KodeEmotionForum

Back to Top