CARA MEMBUAT TAG PRE VANILA STYLE - Bagaimana cara membuat
tag pre yang biasanya digunakan oleh para blogger untuk menantumkan script css, html, atau javascript dalam postingan blog? Sebenarnya
tag pre ini bukan merupakan tag yang resmi dari fitur penulisan blogger. Karena tag pre ini tidak tercantum dalam barisan menu text formating ketika kita hendak menuliskan sebuah artikel atau postingan.
 |
| tag pre |
Umumnya para blogger cenderung lebih menggunakan tag
blockquote dari pada tag pre ini. Dalam cara menggunakan
tag pre ini agak ribet, karena harus membuka bagian HTML postingan ketika setiap akan menggunakannya.
Pada kesempatan kali ini saya akan memberikan tutorial
cara memasang tag pre jenis vanila yang sudah saya pakai pada blog ini. Berikut ini script cssnya
/*coding writing style -----------------------------*/
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 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;}
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;
}
Pasanglah kode css diatas bersamaan dengan kode css style blog yang lainnya, untuk menggunakannya memakai format sebagai berikut
<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>
Kemudian untuk cara pemasangannya dalam postingan ikuti langkah langkah berikut ini
1. Block tulisan yang akan anda masukan dalam tag pre, lalu pilih
Quote,
 |
| cara penggunaan tag pre |
2. Setelah tulisan tersebut berhasil di quote, pilih pengaturan option di sebelah kanan bawah postingan. Pilih
Show HTML literally dan
Press "Enter" for line breaks3. Setelah itu ubah pengaturan tulisan dari Compose menjadi
HTML4. Cari kode tag
<blockquote> kemudian ganti dengan salah satu kode tag pre diatas misalkan saja
<pre data-codetype="HTML"> , jangan lupa ganti tag
</blockquote> dengan
</pre> |
| Cara Memakai Tag Pre |
 |
| cara memasang tag pre |
5. Setelah itu selesai, berikut ini contoh beberapa tampilan
tag pre diatas
<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>
Demikian tutorial
CARA MEMBUAT TAG PRE VANILA STYLE yang lumayan agak ribet tapi hasilnya memuaskan.
Tag pre tesebut merupakan salah satu kreasi dari
Taufik Nurrohman yang jago banget mengenai css dan javascript. Anda bisa langsung mengunjungi blognya jika ingin belajar lebih lanjut mengenai kedua hal tesebut.
0
komentar
