Cara Membuat Kode Box di Blog » Bagi blog yang mempunyai konten blogging niscaya akan selalu membutuhkan yang namnya aba-aba box, fitur ini ditujukan untuk menciptakan sebuah kotak box yang berisi kode/script yang akan kita bagikan kepada pengunjung blog kita. dapat berupa aba-aba HTML, CSS, Javascript ataupun jQuery.
Untuk menciptakan aba-aba box menyerupai ini biasanya dibuat dengan aba-aba pembukaan <pre> dan ditutup dengan aba-aba </pre>. Hanya saja aba-aba <pre> bawaan orisinil blogger tidak mempunyai line number pada setiap barisnya. nah buat kau yang ingin membuat Kode Box Beserta Line Number pada Blog silahkan ikuti panduan dibawah ini biar tampilan aba-aba box yang ada di blog kau jadi keren dan rapi.
Cara Membuat Kode Box Beserta Line Number pada Blog ini tidak semata-mata hanya menampilkan aba-aba script saja, namun juga akan menampilkan banyak sekali macam model dan warna yang berbeda-beda disetiap kodenya.
- Kode Box Untuk Script HTLM.
- Kode Box Untuk Script CSS.
- Kode Box Untuk Script JavaScript.
- Kode Box Untuk Script jQuery.
- Kode Box tanpa keterangan aba-aba script.
Perbedaan aba-aba box yang saya maksud disini yakni pada bab warna dan keterangan script saja. kurang lebihnya tampilanya akan sama menyerupai SS dibawah ini. 
Setelah kau mengetahui menyerupai apa aba-aba box yang akan kita buat apakah kau tertarik? Jika kau tertarik mari eksklusif saja kita mulai panduan membuatnya.
Untuk dapat memakai aba-aba box menyerupai gambar diatas kau harus menghapus aba-aba pre bawaan template terlebih dahulu.
Cara menghapus aba-aba tersebut cukup cari aba-aba pre berserta antek-anteknya yang ada pada template kalian. bila seudah ketemu hapus semua aba-aba pre. bila sudah silahkan ikuti panduan dibawah ini.
Cara Membuat Kode Box Beserta Line Number pada Blog
Langkah 1: Masuk kedasboard blogger kalian » kemudian pilih sajian Tema » dan Klik edit HTML
Langkah 2: Cari aba-aba </style> atau aba-aba ]]></b:skin> (Gunakan kombinasi tombol CTRL+F untuk mempermudah menemukan aba-aba yang ingin dicari. Jika aba-aba sudah ketemu letakan aba-aba CSS ini diatas aba-aba tersebut.
/* Settingan awal PRE, 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;}
Langkah 3: Cari lagi aba-aba </body> dan letakan aba-aba JavaScript dibawah ini diatas kode </body>
<script type='text/j4vascript'>
//<![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>
Jika sudah klik simpan Template.
Cara Memanggil Kode Box
Cara memanggil aba-aba box diatas tidak kau lakukan dengan memanggil dengan sebutan Wooy, Coyy atau Bro. namun harus kau panggil dengan memakai script. adapun caranya sebagai berikut.
Masih didalam dasboard blogger. pilih sajian Entri gres dan pindahkan dari mode Compose ke mode HTML. Silahkan kau copy dan pastekan aba-aba dibawah ini pada entri gres mode HTML postingan anda.
<pre data-codetype="????">kode aba-aba disini</pre>
Note: Ganti aba-aba ???? dengan jenis aba-aba yang ingin kau masukan. Maksudnya bila kau ingin menampilkan aba-aba HTM maka ganti “tanda tanya” tadi dengan HTML, atau kau ingin menampilkan CSS silahkan ganti ???? tadi dengan CSS dan seterusnya.
Contoh:
<pre data-codetype="HTML">kode aba-aba disini</pre>
<pre data-codetype="CSS">kode aba-aba disini</pre>
<pre data-codetype="JavaScript">kode aba-aba disini</pre>
<pre data-codetype="JQuery">kode aba-aba disini</pre>
<pre data-codetype="Bebas Diisi apa">kode aba-aba disini</pre>
Untuk Kode Box yang tanpa judul, tidak perlu memakai shortcode :
<pre>kode aba-aba disini</pre>
Baca Juga Panduan Blogger Lainya:
Sekian isu kali ini, dan bila kau suka atau terbantu dengan artikel Cara Membuat Kode Box Beserta Line Number pada Blog, silahkan share artikel ini kemedia sosial yang kau miliki.
Sumber aciknadzirah.blogspot.com