Cara Membuat Tag Pre Vanila Striped Keren dan Cantik 2013

TutorialBlog46 - Cara Membuat Tag Pre Vanila Striped Keren dan Cantik 2013 - tulisan pada kali ini adalah tulisan lanjutan mengenai pembahasan cara membuat tag pre zebra atau selang-seling.

Perlu kami ingatkan kembali bahwa tag pre disini digunakan untuk menampilkan sesuatu yang penting seperti kode pemrograman, kode HTML, kode CSS, kode JavaScript, atau kode lainnya. Dan mempunyai tujuan untuk mempercantik tampilan sehingga pengunjung akan lebih tertarik untuk membacanya.

Untuk membuat tag pre vanila ini kita tidak memerlukan sebuah gambar untuk digunakan sebagai latar belakangnya [seperti membuat tag pre zebra] tetapi hanya akan menggunakan kode CSS3 untuk membuatnya [jadi mudah kan :) ]

Nah jika sudah tidak sabar ingin mecoba atau membandingkan hasilnya dengan tag pre zebra maka silahkan disimak dan diikuti langkah-langkah berikut ini.

Cara Membuat Tag Pre Vanila Striped Keren dan Cantik 2013

1. Log in kedalam akun blog
2. Pilih menu [Template] >> [Edit HTML]
3. Letakkan kode CSS berikut di bawah kode <b:skin><![CDATA[

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;-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
position:relative;
padding:0 7px;
margin:10px 5px;
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;}
}

4. Klik tombol [Simpan Template]
5. Untuk memakai tag pre maka kita harus memilih mode HTML ketika menulis posting blog. Kemudian masukkan kode yang akan Anda sampaikan misalnya kode HTML, CSS, atau lainnya diantar format kode berikut:

<pre data-codetype="HTML">tulis kode HTML di sini</pre>

<pre data-codetype="CSS">tulis kode CSS di sini</pre>

<pre data-codetype="JavaScript">tulis kode JavaScript di sini</pre>

<pre data-codetype="JQuery">tulis kode JQuery di sini</pre>

<pre data-codetype="PHP">tulis kode PHP di sini</pre>

<pre data-codetype="XML">tulis kode XML di sini</pre>

6. Selesai

Gimana bro? ada komen tidak? Jika ada komentar baik berupa saran atau kritiknya silahkan untuk dapat disampaikan melalui kotak komentar [sekalian menjalin persahabatan mas bro :)]

Akhir kalimat sekian dulu tulisan mengenai cara membuat tag pre vanila striped yang keren dan cantik di tahun 2013 ini yang dapat Saya sampaikan. Selamat mencoba dan salam Sukses [Selesai/]