Membuat kotak script keren di blogger

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

<!-- contoh kotak script --> <script>/*<![CDATA[*/ (function() { var ad = document.createElement('script'); ad.async = true; ad.src = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'; var sc = document.getElementsByTagName('head')[0]; sc.parentNode.insertBefore(ad, sc); })(); /*]]>*/</script> <!-- contoh kotak script -->

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

• Parse Kode

Oke kita langsung aja ke cara penerapan nya nya, karena ini sangat mudah sekali apabila anda benar benar memperhatikan setiap langkah yang saya berikan

1. Login ke akun blogger kamu
2. Pergi ke Template kemudian pilih edit HTML
3. Kemudian cari kode pre code default bawaan template blogger, kemudian hapus
4. Selanjutnya ganti dan Letakkan kode dibawah ini tepat diatas kode ]]></b:skin> atau sebelum kode ]]></b:skin> tersebut ok

.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

5. Jika ingin menggunakan atau jika ingin menampilkan script kode pada halaman blog anda, seperti yang sudah sampaikan sebelumnya, Parse kode script tersebut

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