Cara Membuat Kode Box Beserta Line Number pada Blog seperti Kurazone


KURAZONE ~ Halo sahabat Kurazer, bagi kalian yang berkecimpung di dunia Blogger pasti sudah tidak asing dengan yang namanya Kode Box, sebuah kotak imut menggemaskan yang dikhususkan untuk menampilkan kode HTML, CSS, JavaScript maupun jQuery.

Kode Box ini biasanya dibentuk oleh kode pembuka <pre> lalu ditutup dengan kode </pre>. Hanya saja kode <pre> bawaan Blogger biasanya tidak menyertakan Line Number (Angka per Baris) pada tampilan Kode Box nya. Untuk itulah saya bagikan kepada sahabat Kurazer mengenai pembuatan Kode Box yang saat ini digunakan oleh Blog KURAZONE.

Sedikit basa - basi dulu ya... Kode Box ini saya rancang memiliki 5 model berdasarkan warna dan kegunaannya, diantaranya adalah :
  1. Kode Box untuk keterangan HTML
  2. Kode Box untuk keterangan CSS
  3. Kode Box untuk keterangan JavaScript
  4. Kode Box untuk keterangan JQuery
  5. Kode Box tanpa keterangan / keterangan bebas

Perbedaan dari ke 5 kode diatas hanyalah terletak pada bagian warna pada judulnya saja, lihat perbedaannya dibawah ini : (perhatikan warna dan judul yang tercantum)
Ini adalah contoh Kode Box untuk HTML (bewarna biru tua)
Ini adalah contoh Kode Box untuk CSS (bewarna hijau)
Ini adalah contoh Kode Box untuk JavaScript (bewarna ungu)
Ini adalah contoh Kode Box untuk JQuery (bewarna biru muda)
Ini adalah contoh Kode Box tanpa judul,
judul nantinya bisa kamu isi terserah.
seperti Java, Phyton, C, C++, PHP, dan sebagainya
(bewarna coklat muda)
Ini adalah contoh Kode Box dengan judul "Suka suka gue"
(bewarna coklat muda)

Sedangkan untuk Line Number nya, bisa dilihat pada bagian sebelah kiri Kode Box.
Ini Baris pertama
Ini Baris kedua
Ketiga
Keempat
Kelima
Ketiga
Keempat
Ketujuh
Anjir bisa berhitung gak sih.. :v
Kesepuluh
dan seterusnya...

Nah, sudah tahu kan gambarannya mengenai Kode Box yang digunakan pada Blog KURAZONE ini. Untuk menggunakan Kode Box seperti diatas, kalian harus menghapus kode pre bawaan dari template kalian terlebih dahulu.

Cara menghapusnya cukup cari kode pre beserta antek - antek nya pada template kalian, jika sudah ketemu, hapus semua kode yang terhubung dengan kode pre. Setelah menghapus kode pre bawaan template maka kalian bisa menerapkan Kode Box versi Kurazone ini !!

Cara Membuat Kode Box Beserta Line Number seperti Kurazone

1. Buka Akun Blogger >> Pilih Tema >> Pilih Edit HTML
2. Copy kode CSS dibawah ini :
Lalu letakkan diatas kode </style> atau ]]></b:skin>
/* Settingan awal PRE yang dipakai kurazone, boleh kalian ubah sesuka kalian*/
pre{font-family:Monaco,"Andale Mono","Courier New",Courier,monospace;background-color:#000;background-image:-webkit-linear-gradient(rgba(0,0,0,0.05) 50%,transparent 50%,transparent);background-image:-moz-linear-gradient(rgba(0,0,0,0.05) 50%,transparent 50%,transparent);background-image:-ms-linear-gradient(rgba(0,0,0,0.05) 50%,transparent 50%,transparent);background-image:-o-linear-gradient(rgba(0,0,0,0.05) 50%,transparent 50%,transparent);background-size:100% 50px;line-height:25px;overflow:auto;word-wrap:normal;-webkit-background-size:100% 50px;-moz-background-size:100% 50px;color:#fff;}
pre:before{content:'';display:block;background:brown;margin-left:-7px;color:#fff;padding:5px 0 5px 7px;font-weight:400;font-size:14px;}
pre code,pre .line-number{display:block;}
pre .line-number span{display:block;float:left;clear:both;width:20px;text-align:center;margin-left:-7px;margin-right:7px;}
pre .line-number a{color:#27ae60;opacity:0.6;}
pre .line-number span:nth-child(odd){background-color:rgba(0,0,0,0.11);}
pre .line-number span:nth-child(even){background-color:rgba(255,255,255,0.05);}
pre .cl{display:block;clear:both;}

/* Untuk mengatur jarak judul dan warna teks */
pre[data-codetype]{padding:0 0 0 0;}
pre[data-codetype]:before{content:attr(data-codetype);display:block;top:-5px;right:0;left:0;box-shadow:rgba(0,0,0,0.117647) 0 1px 3px;margin-left:0;color:white;}
pre[data-codetype="HTML"]{color:#fff;}
pre[data-codetype="CSS"]{color:#fff;}
pre[data-codetype="JavaScript"]{color:#fff;}
pre[data-codetype="JQuery"]{color:#fff;}

/* Untuk mengatur warna background judul */
pre[data-codetype="HTML"]:before{font-family:FontAwesome;background-color:#123456;color:#fff;content:'HTML \f13b';}
pre[data-codetype="CSS"]:before{font-family:FontAwesome;background-color:#288433;color:#fff;content:'CSS \f13c';}
pre[data-codetype="JavaScript"]:before{font-family:FontAwesome;background-color:purple;color:#fff;content:'JavaScript';}
pre[data-codetype="JQuery"]:before{font-family:FontAwesome;background-color:#0972cd;color:#fff;content:'JQuery';}

/* Untuk mengatur warna border dan jarak line number */
pre[data-codetype="HTML"] span.line-number{border-right:2px solid #123456;}
pre[data-codetype="CSS"] span.line-number{border-right:2px solid #288433;}
pre[data-codetype="JavaScript"] span.line-number{border-right:2px solid purple;}
pre[data-codetype="JQuery"] span.line-number{border-right:2px solid #0972cd;}
pre code,pre .line-number{display:block;}
pre .line-number{color:#fff;float:left;border-right:2px solid brown;text-align:right;margin-right:10px;}
pre .line-number a{color:#27ae60;opacity:0.6;}
pre .line-number span{padding:0 .8em 0 1em;display:block;float:left;clear:both;width:20px;text-align:center;margin-left:-7px;margin-right:7px;}

3. Selanjutnya, cari kode </body>
4. Copy kode JavaScript dibawah ini, lalu letakkan diatas kode </body>
<script type='text/javascript'>
//<![CDATA[
!function(){for(var n=document.getElementsByTagName("pre"),e=n.length,a=0;e>a;a++){n[a].innerHTML='<span class="line-number"></span>'+n[a].innerHTML+'<span class="cl"></span>';for(var s=n[a].innerHTML.split(/\n/).length,r=0;s>r;r++){var l=n[a].getElementsByTagName("span")[0];l.innerHTML+="<span>"+(r+1)+"</span>"}}}();
//]]>
</script>
5. Simpan Template

Keterangan :
Perhatikan baik - baik kode yang sudah saya tandai dengan warna.
  1. !!! : Kode yang ditandai oleh warna kuning bisa kalian ubah dengan kode warna lain. Kode yang ditandai ini digunakan untuk menentukan warna pada garis tepi dan background. Perhatikan baik - baik deretan kodenya agar tidak bingung sedang mensetting warna dibagian mana.
  2. !!! : Kode yang ditandai oleh warna biru muda merupakan shortcode yang nantinya digunakan sebagai pemanggilan type pre. Sebaiknya dibiarkan saja
  3. !!! : Kode yang ditandai oleh warna orange adalah tampilan Teks apa yang akan tampil sebagai judul kode box

Cara Pemanggilan Kode Box

1. Buat Entri Baru >> Pindah ke Mode HTML
2. Pemanggilan kode pre nya menggunakan shortcode yang telah kita pasang pada template tadi, pemanggilan shortcode nya mengacu pada kode yang ditandai warna biru muda tadi.
Cara pemanggilan dasar pada shortcode pre nya adalah seperti ini :
<pre data-codetype="????">kode kode disini</pre>

Symbol ???? tersebut tinggal diganti dengan shortcode.

Contoh :
<pre data-codetype="HTML">kode kode disini</pre>
<pre data-codetype="CSS">kode kode disini</pre>
<pre data-codetype="JavaScript">kode kode disini</pre>
<pre data-codetype="JQuery">kode kode disini</pre>
<pre data-codetype="Bebas Diisi apa">kode kode disini</pre>

Untuk Kode Box yang tanpa judul, tidak perlu menggunakan shortcode :
<pre>kode kode disini</pre>

Besar kecilnya teks pada shortcode yang dipanggil sangat mempengaruhi hasil, jadi apabila shortcode nya menggunakan HTML (Kapital semua), maka pemanggilannya juga harus HTML, bukan Html atau html.

Paham kan maksudnya :), jika masih bingung bisa dibaca ulang dari atas sampai selesai.

Tambahan :

Kode yang saya rancang ini menyediakan 5 model yang telah saya contohkan diatas, apabila kalian ingin menambahkan model kode box baru yang dikhususkan untuk PHP (misalnya), maka kalian cukup tambahkan kode ini diatas kode </style> atau ]]></b:skin>
pre[data-codetype="PHP"]{color:#fff;}
pre[data-codetype="PHP"]:before{font-family:FontAwesome;background-color:red;color:#fff;content:'PHP';}
pre[data-codetype="PHP"] span.line-number{border-right:2px solid red;}

Itulah informasi mengenai "Cara Membuat Kode Box Beserta Line Number seperti Kurazone", selamat mencoba dan semoga bermanfaat. Goodluck !!





أحدث أقدم