For world peace, liberate Al-Aqsa, eliminate Israel and anyone who is with Israel, they are the real terrorists
Bacakan

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

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
  5. .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

  6. 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

About the Author

Keindahanmu akan kuabadikan disetiap karyaku.

2 comments

  1. Apakah kotak scribnya sama persisi seperti yg di templet ini ada copy code di pojok kanan atas ... ?
    Kalo sudah ada kotak scrib bawaan dari templet bagaimana cara editnya agar sama seperti kotak scrib ini atau apa boleh langsung di tambah lagi kode scrib dari blog ini ... ?
    1. Kalau kode kotak script bawaannya harus diapus gan, baru masukkan kode yang saya berikan, jika dihubungkan kode dengan class yang sama dengan unsur CSS yang berbeda akan ditampilkan juga secara bersamaan

      Dan untuk kotak script saya gunakan juga berbeda dengan kode yang saya berikan pada tutorial diatas gan, entar ane edit lagi ini artikel biar lebih detail, atau membuat postingan lainnya untuk pembungkus kode script
Menghasilkan uang melalui survei berbayar
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.