Hello sobat IcloudZer Kali ini saya akan memberikan Tutorial mengenai bagaimana cara membuat Kotak Script untuk membungkus kode script di Blogger Terbaru
Sebelum kita masuk ketahap penerapan kodenya, saya akan menjelaskan sedikit mengenai apa itu kotak Pembungkus script kode?
Penjelasan
Seperti yang kita ketahui bahwa kotak pembungkus Script kode ini berfungsi untuk meletakkan sebuah kode atau script kode didalamnya sehingga kode kode tersebut tersusun secara rapi
Biasanya kita sering melihat atau menjumpai Situs blog yang menampilkan kode kode Program atau situs blog yang memberikan tutorial Blogger sering sekali menggunakan Kotak script seperti itu, termasuk situs blog ICloudIce, nah jika kamu termasuk situs blog yang memberikan tutorial blogger atau yang lainnya kamu bisa menggunakan kotak Script yang saya berikan untuk anda Gunakan
Contoh Tampilan
Nah untuk contoh demo atau contoh tampilan kotak scriptnya kamu bisa melihatnya seperti contoh dibawah ini
Info: bagaiamana dengan tampilan kotak scriptnya keren bukan
Cara penerapan
Namun anda harus mempelajari dulu bagian terpentingnya? Ketika anda ingin membuat atau menampilkan kode script pada halaman blogger anda harus mem-parse kode script tersebut sebelum meletakkan pada Tag Kode dibawah ini
<pre><code>Letakkan script kode yang sudah anda Parse disini</pre></code>
Saya ingatkan sekali lagi, anda harus Mem-parse kode script tersebut atau setiap kode apapun yang ingin anda tampilkan ok
Anda bisa menggunakan alat Parse yang kami punyai dengan gunakan Tombol dibawah ini
Oke kita langsung aja ke cara penerapan nya nya, karena ini sangat mudah sekali apabila anda benar benar memperhatikan setiap langkah yang saya berikan
- Login ke akun blogger kamu
- Pergi ke Template kemudian pilih edit HTML
- Kemudian cari kode pre code default bawaan template blogger, kemudian hapus
- Selanjutnya ganti dan Letakkan kode dibawah ini tepat diatas kode ]]></b:skin> atau sebelum kode ]]></b:skin> tersebut ok
- Jika ingin menggunakan atau jika ingin menampilkan script kode pada halaman blog anda, seperti yang sudah sampaikan sebelumnya, Parse kode script tersebut
.post-body pre{background-color:#fff;border:4px solid #f80000;border-radius:10px;padding:0;margin:.5em auto;white-space:pre;word-wrap:break-word;overflow:auto;position:relative;width:100%;-moz-tab-size:2;-o-tab-size:2;tab-size:2;word-break:normal;user-select:text;-webkit-user-select:text;-khtml-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}.post-body pre code{color:#f80000;font-size:14px;max-height:300px;line-height:1.5em;display:block;background:0 0;border:none;padding:10px 15px;font-family:'source code pro',menlo,consolas,monaco,monospace;white-space:pre;overflow:auto;user-select:text;-webkit-user-select:text;-khtml-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text}::-webkit-scrollbar{height:5px;width:3px}::-webkit-scrollbar-thumb{background:#0081ff}
Jika sudah simpan Template dan lihat cara selanjutnya
Jika anda tidak Mem-parse kode Script tersebut, maka apa yang terjadi? Kode anda tidak akan muncul pada halaman blog anda, kalau tidak percaya silahkan coba sendiri
Nah Gunakan format dibawah ini untuk menampilkan script kode pada kotak Script
<pre><code>Letakkan script kode yang sudah anda Parse disini</pre></code>
Oh iya hampir lupa, Ketika menuliskan format diatas, saat ingin menulis gunakan Mode HTML ya bukan Compose, ok
Kode Costum
Kami juga menyediakan kode Costum untuk anda Gunakan, Fungsi dari kode Costum disini adalah Tanpa menghapus kode bawaan pre code didalam Template cukup salin dan tempelkan diatas kode ]]></b:skin>
.post-body pre.coderah{background-color:#fff;border:2px solid #f80000;border-radius:10px;padding:0;margin:.5em auto;white-space:pre;word-wrap:break-word;overflow:auto;position:relative;width:100%;-moz-tab-size:2;-o-tab-size:2;tab-size:2;word-break:normal;user-select:text;-webkit-user-select:text;-khtml-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}.post-body pre.coderah code.rah{color:#f80000;font-size:14px;max-height:300px;line-height:1.5em;display:block;background:0 0;border:none;padding:10px 15px;font-family:'source code pro',menlo,consolas,monaco,monospace;white-space:pre;overflow:auto;user-select:text;-webkit-user-select:text;-khtml-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text}::-webkit-scrollbar{height:5px;width:3px}::-webkit-scrollbar-thumb{background:#0081ff}
Cara penggunaan
Untuk menggunakan dan memunculkan kotak script nya kamu bisa menambhakan class coderah didepan kode <pre dan menambahkan class rah didepan kode <code, maka nantinya akan seperti kode dibawah ini
<pre class='coderah'><code class='rah'>letakin kode scriptnya disini</pre></code>
Custom code (mode Simple)
Jika kode pre code nya masih bentrok juga dengan kode bawaan template, jangan khawatir gunakan kode kostum lainnya yang telah admin sediakan untuk anda, salin kode dibawah ini kemudian letakkin diatas kode ]]></b:skin>
.prerah{background-color:#fff;border:2px solid #f80000;border-radius:10px;padding:0;margin:.5em auto;white-space:pre;word-wrap:break-word;overflow:auto;position:relative;width:100%;-moz-tab-size:2;-o-tab-size:2;tab-size:2;word-break:normal;user-select:text;-webkit-user-select:text;-khtml-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}.prerah .coderah{color:#f80000;font-size:14px;max-height:300px;line-height:1.5em;display:block;background:0 0;border:none;padding:10px 15px;font-family:'source code pro',menlo,consolas,monaco,monospace;white-space:pre;overflow:auto;user-select:text;-webkit-user-select:text;-khtml-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text}::-webkit-scrollbar{height:5px;width:3px}::-webkit-scrollbar-thumb{background:#0081ff}
Cara Penggunaan
Cara Penggunaan untuk menampilkan kotak scriptnya, kamu bisa menggunakan kode <div kemudian tambahkan class prerah coderah setelah tag <div, berikut contoh kode lengkapnya
<div class='prerah'><div class='coderah'>
Letakkin kode script nya disini
</div></div>
Info: Begitulah cara untuk membuat kotak scriptnya kostumnya, jika ada pertanyaan silahkan gunakan form komentarnya terimakasih