Cara Terbaru Mempercantik Tampilan Kode pada Blogspot

Setiap blog atau website yang memberikan tutorial atau oprek blog/website (desain Web), maka pasti akan selalu menampilkan kode-kode dalam postingannya. Baik itu kode CSS, HTML, script atau kode yang lainnya. Namun, kalau diperhatikan masih ada yang menampilkan kodenya sederhana saja. Memang yang penting itu kodenya bukan cantik tidaknya tampilan kode tersebut dalam postingan. Namun, menurut saya cantik itu lebih baik dari pada biasa-biasa saja.

Nah pada kesempatan ini, saya akan memberikan kode CSS untuk memodifikasi/mempercantik tampilan kode dalam postingan, khususnya pada postingan blogspot. karena yang akan saya bahas disini adalah Cara Terbaru Mempercantik Tampilan Kode pada Blogspot.

Langkah Pembuatan : 

1. Cari kode ]]></b:skin> Dalam Template blog yang kamu pakai.
2. Letakan Kode Dibawah Ini Diatas Kode Tersebut

.pre {
  background-color:#333;
  font:normal 12px/14px Monaco,Monospace;
  color:#ccc;
  padding:10px 15px;
  margin:0px 0px 10px;
  position:relative;
}

pre[rel] {
  padding-top:32px;   
}

pre[rel]:before {
  content:attr(rel);
  font:bold 12px/22px Arial,Sans-Serif;
  color:white;
  background-color:#39f;
  padding:0px 10px;
  position:absolute;
  top:0px;
  right:0px;
  left:0px;    
}

3. Simpan Template.
4. Cara menggunakannya kamu cukup menggunakan tag <pre> dan di akhiri dengan </pre>