CodeBox Pre Tag merupakan fitur penting bagi blogger yang tentang coding, selain untuk meng-embed code (php,html,css,javascript dan jquery) di halaman website, codebox juga berfungsi sebagai pembeda antara teks biasa dengan code yang disematkan.
Dengan code box pre tag isi konten akan lebih mudah dipahami oleh pengguna dan membarikan kesan profesional pada konten dan penulis.Jauh sebelum ini saya juga telah mempublikasikan artikel tentang tutorial membuat codebox pre tag lengkap dengan cara penggunaannya dan kali ini saya akan membagikan codebox pre tag yang tidak kalah keren dengan sebelumnya, karena code-box ini sudah dilengkapi dengan label php, html,css,javascript dan jquery.
Untuk menghemat waktu, jadi kita langsung saja ke codebox pre tag yang saya janjikan, berikut selengkapnya.[ads id="ads1"]
HTML Pre Tag
Berikut adalah html pre tag (codebox) untuk meng-embed code, jika anda ingin menyematkan (embed) kode html gunakan codebox pre tag di bawah ini.<pre rel="HTML" class="code-box"> <code> //---Kode HTML disisni----// </code> </pre>Selanjutnya untuk meng-embed kode css gunakan codebox css berikut.
<pre rel="Css" class="code-box"> <code> //---Cascading Style Sheets (CSS) disisni----// </code> </pre>Kemudian untuk meng-embed kode javascript gunakan codebox javascript berikut.
<pre rel="JavaScript" class="code-box"> <code> //---JavaScript disisni----// </code> </pre>Dan untuk meng-embed kode jQuery gunakan codebox jquery.
<pre rel="jQuery" class="code-box"> <code> //---jQuery disisni----// </code> </pre>Apa yang berbeda? Pada dasarnya ke empat codebox adalah sama saja, yang membedakannya adalah value atau isi pada atribut
rel, jika kamu akan meng-embed selain kode html,css,javascript dan jquery, silahkan value pada atribut rel, misalnya rel="PHP".Value pada atribut
rel akan menjadi label yang medeskripsikan isi yang disematkan dalam codebox. Tapi sebelumnya anda perlu menginstall css codebox berikut ini ke website anda.Khusus untuk pengguna blogger silahkan install atau pasang css codebox tepat di atas/sebelum kode
]]></b:skin> di dalam template blog anda.
CSS CodeBox Pre Tag
//---codebox style----//
.code-box{position:relative;background-color:#1b1b1b;color:#fff;border:1px solid rgba(155,155,155,0.3);font-family:Monospace;font-size:15px;line-height:1.5em;border-radius:6px;}
//---add scrollbar----//
pre code{white-space:pre;overflow-x:scroll;display:block;max-width:100%;min-width:100px;padding:10px}
//---scrollbar style----//
pre code::-webkit-scrollbar{height:8px}pre code::-webkit-scrollbar-thumb{border-radius:6px;background-color:#646464}
//---codebox label (html,css,javascript dan jquery) style----//
pre[rel]:not([rel=""]):before{content: attr(rel);font-weight:bold;background:rgba(0, 0, 0, 0.72);border-radius:0 6px;position:absolute;top:0;right:0;padding:0 4px;color:#ff7a18;}
Kelebihan
- CodeBox ini dibuat tanpa menggunakan plugin pihak ketiga sehingga tidak akan membebani loading halaman website/blog anda.
- Desain CodeBox sangat responsive dan dilengkapi dengan detail yang keren yakni custom scrollbar dan label.
- Memiliki perpaduan warna baground, scrollbar, label dan warna font yang lebih ramah.
- Pemilihan jenis font web yang paling ringan dan tepat untuk font coding.