Tag pre dengan tema Zebra striped

Tag Pre adalah sebuah tag yang secara khusus diperuntukkan untuk posting kode HTML,CSS,JAVASCRIPT,JQUERY,PHP,XML. Tag ini memungkinkan hasil posting kode HTML terlihat sempurna, dimana pembaca blog akan dengan mudah, membaca, mempelajari sekaligus mengcopy-paste kode yang terlihat di halaman posting. Tentu dengan hasil yang seperti tersampaikan ,tema tag pre tidak akan didapat tanpa kita melengkapi tag pre dengan CSS pada tempelate secara benar dan tepat. Pada posting kali ini saya akan menyiapkan sebuah tag pre dengan beberapa elemen di dalamnya dalam bentuk yang sederhana, akan tetapi mampu menghasilkan output (posting) yang dengan mudah dan nyaman dibaca, dipelajari sekaligus dicopy-paste pengunjung,cara memasang tag pre dengan tema zebra striped di blog. .

• Masuk ke dasbord blogger>>tempelate>>edit HTML
• Cari kode ]]></b:skin> pada tempelate anda
• Copy CSS dibawah ini dan paste tepat diatas ]]></b:skin>

pre {
  display:block;
  font:normal 12px/22px Monaco,Monospace !important;
  color:#CFDBEC;
  background-color:#2f2f2f;
  background-image:-webkit-repeating-linear-gradient(top, #444 0px, #444 22px, #2f2f2f 22px, #2f2f2f 44px);
  background-image:-moz-repeating-linear-gradient(top, #444 0px, #444 22px, #2f2f2f 22px, #2f2f2f 44px);
  background-image:-ms-repeating-linear-gradient(top, #444 0px, #444 22px, #2f2f2f 22px, #2f2f2f 44px);
  background-image:-o-repeating-linear-gradient(top, #444 0px, #444 22px, #2f2f2f 22px, #2f2f2f 44px);
  background-image:repeating-linear-gradient(top, #444 0px, #444 22px, #2f2f2f 22px, #2f2f2f 44px);
  padding:0em 1em;
  overflow:auto;
}

• Kalau sudah memasang CSS diatas pada tempelate anda
• Langsung save saja. .!!
• Untuk menggunakan tag pre di postingan,gunakan HTML dibawah ini

<pre><code>masukan CSS anda disini</code></pre>

Nah begitulah cara menggunakan tag pre pada untuk posting di blogger,atau anda juga bisa melihat demo dari tag pre tema zebra striped di sini. .selamat mencoba dan happy blogging. . :)