Mungkin pada kesempatan kali ini saya tidak akan berbicara panjang lebar karena jujur saya belum mengenal pasti apa itu tag pre. Tetapi, p...
Mungkin pada kesempatan kali ini saya tidak akan berbicara panjang lebar karena jujur saya belum mengenal pasti apa itu tag pre. Tetapi, pada tutorial kali ini saya akan membuat tag pre yang keren dan mudah untuk anda terapkan ke blog. Sedikit juga pengertian dari tag pre yang saya temukan dari blog tetangga.
PRE artinya pre-formatted atau secara mudahnya, apabila teks ditulis dalam tag pre maka hasilnya akan sama dengan apa yang kita tulis, baik dalam jarak (white space, line break atau tab.Ya, cuma sedikit yang saya tau tentang tag pre, namun jangan salah sangka. Walau kurang tau namun pada tutorial kali ini saya akan membuat tag pre menjadi sangat keren dan sudah terkostumisasi yang pastinya akan mudah digunakan untuk anda para blogger.
- Buka dasbor blog anda
- Pilih
Template--Edit HTML - Lalu cari kode
</b:skin>atau</style> - Setelah itu letakkan kode berikut tepat di atas kode pada no. 3
- Setelah itu tinggal
Simpan Template
/*Tag Pre by Eliyanto Sarage*/
pre:hover:after{box-shadow:-2px 2px 0 #222;content:"Double Click to Selection :)";font-family:arial;font-weight:700;font-size:12px;padding:5px 8px;position:absolute;z-index:2;top:5px;right:15px;color:#333;background:#f2f2f2;border-radius:2px}
pre:hover:before{width:0;height:0;border-style:solid;border-width:5px;border-color:transparent transparent transparent #f2f2f2;top:12px;right:6px;position:absolute;z-index:1;content:""}
pre,i[rel="pre"]{padding:.8em 1em;margin:0;background-color:#2E1C1C;border-left:4px solid #D32B05;font-size:11px;color:#839496;font-family:Consolas,"Andale Mono WT","Andale Mono","Lucida Console","Lucida Sans Typewriter","DejaVu Sans Mono","Bitstream Vera Sans Mono","Liberation Mono","Nimbus Mono L",Monaco,"Courier New",Courier,Monospace;line-height:1.4em;position:relative;white-space:pre;word-wrap:normal;white-space:pre;overflow:auto;max-height:500px}
pre.line-number:after{content:"";width:35px;height:8px;background-color:#39424e;bottom:0;left:0;position:absolute}
pre[data-codetype="CSS"]{border-left-color:#FF8800}
pre[data-codetype="HTML"]{border-left-color:#4fc1eb}
pre[data-codetype="JavaScript"]{border-left-color:#FFD400}
pre[data-codetype="JQuery"]{border-left-color:#99c262}
code {font-family: Consolas,'Andale Mono';line-height: 16px;color: #88a9ad;background-color: transparent;padding: 1px 2px;font-size: 12px;}
code mark {background-color: #ea4f4e!important;color: #fff!important;padding: 2px;border-radius: 2px;}
pre code mark {background-color: #ea4f4e!important;color: #fff!important;padding: 2px;border-radius: 2px;}
#comments code{color:#bbbb6d}
pre code{padding:0!important;color:#a3a49a;background:none!important;border:none!important;display:block}
Cara Penggunaan
<pre data-codetype="CSS"><code>kode CSS anda</code></pre><pre data-codetype="HTML"><code>kode HTML anda</code></pre><pre data-codetype="JavaScript"><code>kode JavaScript anda</code></pre><pre data-codetype="JQuery"><code>kode JQuery anda</code></pre>Sekian artikel ini saya buat juga sebagai dukementasi, semoga anda para pembaca dapat menggunakan Tag Pre tersebut untuk blog anda.