Cara Membuat Kotak Script Pada Postingan Blog versi BangRizkyW.com

Daftar isi [Tampil]

Bila anda Sebagai blogger, dalam membuat artikel postingan blog tentunya ingin menampilkan halaman blognya menarik dan terkadang disaat kita membuat artikel postingan blog ingin menyisipkan sesuatu didalam postingan seperti memasang text link, memasang script HTML, dan lain sebagainya. Namun itu semua tidak bisa didapatkan secara otomatis dari blogspot, maka caranya yaitu dengan kita membuat sendiri.

Bagi Anda yang masih bingung dan tidak tahu caranya, disini saya akan membagikan cara unik dan mudah membuat kotak script pada postingan blog. Kotak script yang dipasang itu memiliki bentuk yang sangat unik dan memiliki warna yang sangat menarik sehingga para pembaca atau visitor blog akan nyaman ketika harus melihat kumpulan kode script entah itu HTML maupun javascript yang terkadang membuat mata kita menjadi sakit karena kerumitanya.

Menggunakan kotak script didalam postingan tidak baik jika harus mempastekan langsung sebuah script kedalam postingan. Karena script tanpa kotak tentu akan terlihat tidak beraturan dan tidak rapi dan terkadang akan membuat susunan tulisan dan paragraf postingan yang dibuat kacau.

Oleh sebab itu banyak yang menyarankan untuk selalu menggunakan kotak script untuk membungkus kode script didalam postingan, terutama bagi sobat yang memiliki niche Blog tentang kegiatan ngeblog atau blogging.

Untuk membuat kode script sebenarnya sangatlah gampang dan sederhana. Sebenarnya sudah banyak sekali blog-blog yang membahas mengenai cara membuat kotak script didalam artikel atau postingan, akan tetapi kebanyakan memberikan cara yang mengharuskan kita untuk pandai-pandai mengutak atik kode CSS didalam tema blog dan tidak semua blogger bisa melakukanya terutama bagi anda blogger yang masih terbilang baru dan masih belajar.

Kamu jangan khawatir karena saya akan memberikan beberapa tampilan kotak script yang cukup unik dan sederhana tanpa harus mengutak atik CSS pada Tema blog beserta bagaimana cara memasangnya kedalam postingan blog. 

Macam-Macam Tampilan Kotak Script 

Tampilan Kotak Script versi 1

<div style="border: 3px #9191ed Dotted; padding: 10px; background-color:#eaeaea; text-align: left;"><code>

TULIS KODE/SCRIPT ANDA DISINI

</code></div>

Tampilan Kotak Script versi 2

<div style="border-radius: 10px; border: 4px double #fff; padding: 10px; background-color:#eaeaea; text-align: left;"><code>

TULIS KODE/SCRIPT ANDA DISINI

</code></div>

Tampilan Kotak Script versi 3

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #FEBF80; border-left: 5px solid #FF3300; border-radius: 10px; padding: 10px; t-align: left;">Pasang Kode Script Anda Disini</div>

Tampilan Kotak Script versi 4

<div style="border: 3px #1780dd Double; padding: 10px;background-color:#ffffff; text-align: left;"> Kode Script Sobat Disini</div>

Tampilan Kotak Script versi 5

<div style="border: 1px solid #444; padding: 10px; background-color: #eaeaea; text-align: left;">

Kode Script Sobat Disini</div>

Tampilan Kotak Script versi 6

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #f3f3f3; border-left: 5px solid #2288dd; border-radius: 10px; padding: 10px; t-align: left;">Kode Script Sobat Disini</div>

Tampilan Kotak Script versi 7

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #ffe599; border-radius: 10px; border: 2px dashed #aaa; padding: 10px; t-align: left;">Kode Script Sobat Disini</div>

Tampilan Kotak Script versi 8

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #f3f3f3; border-radius: 10px; border: 4px solid #999; padding: 10px; t-align: left;">Kode Script Sobat Disini</div>

Tampilan Kotak Script versi 9

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #6fa8dc; border-radius: 10px; border: 4px double #fff; padding: 10px; t-align: left;">Kode Script Sobat Disini</div>

Tampilan Kotak Script versi 10

<div style="border: 2px #610B38 dashed; padding: 10px; background-color:#57AA52; tex>t-align: left;"> Kode Script Sobat Disini</div>

Tampilan Kotak Script versi 11

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #a2c4c9; border-radius: 10px; border: 4px outset #fff; padding: 10px; t-align: left;">Kode Script Sobat Disini</div>

Tampilan Kotak Script versi 12

<div style="border: 3px #5f200e double; padding: 10px; background-color: #82CAFA; text-align: left;"> Kode Script Sobat Disini</div>

Tampilan Kotak Script versi 13

<div style="border: 2px #006400 inset; padding: 10px; background-color: #d5839f; text-align: left;"> Kode Script Sobat Disini</div>

Tampilan Kotak Script versi 14

<div style="border: 2px #1B1A76 dotted; padding: 10px; background-color:#c2c2c2; text-align: left;"> Kode Script Sobat Disini</div>

Tampilan Kotak Script versi 15

<div>

<pre style="background-color: #333333; border-color: rgb(221, 221, 221) rgb(221, 221, 221) rgb(221, 221, 221) rgb(64, 98, 126); border-style: solid; border-width: 1px 1px 1px 4px; color: white; font-family: monaco, &quot;courier new&quot;, monospace; font-size: 12px; font-stretch: normal; overflow-wrap: break-word; overflow: auto; padding: 0.5em 1em; position: relative; white-space: pre-wrap;"><code style="background: none; border: none; color: #a3a49a; display: block; font-family: consolas, &quot;andale mono wt&quot;, &quot;andale mono&quot;, &quot;lucida console&quot;, &quot;lucida sans typewriter&quot;, &quot;dejavu sans mono&quot;, &quot;bitstream vera sans mono&quot;, &quot;liberation mono&quot;, &quot;nimbus mono l&quot;, monaco, &quot;courier new&quot;, courier, monospace; font-size: 13px; font-stretch: normal; padding: 0px;"><div dir="ltr">

<span style="color: black; font-family: &quot;times new roman&quot;; font-size: small; white-space: normal;">Kode Script Sobat Disini</span></div>

</code></pre>

</div>

<div dir="ltr">

<div class="separator" style="clear: both; text-align: center;">

<br /></div>

</div>

</div>

<div>

Tampilan Kotak Script versi 16

Jika ingin menambahkan scroll tinggal menambahkan kode height widht dan overflow

Pilihan Selanjutnya saya tampilkan pula kode untuk kotak script dengan versi scroll vertical dan scroll Vertical +Horizontal

Kotak scroll vertical simple menyesuaikan, beckground polos/putih tinggi 200px bisa di edit. Silahkan pilih yang teman butuhkan (copy bagian dalam kotak!)

<div style="background-color: white; border: 2px solid gray; height: 100px; overflow: auto; padding: 5px; width: auto;">

 TULSAN DISINI

A

B

C

</div>

-keterangan: tinggi 100px

-lebar menyesuaikan

Tampilan Kotak Script versi 17

<div style="background-color: antiquewhite; border: 2px solid blue; height: 100px; overflow: auto; padding: 5px; width: auto;">

TULSAN DISINI

"A

B

C"

</div>

Tampilan Kotak Script versi 18

<div dir="ltr" style="border: 0px; font-stretch: inherit; line-height: 25.6px; margin: 0px; padding: 0px; vertical-align: baseline;" trbidi="on"><div style="border: 0px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><div><br /></div><div dir="ltr" style="background-color: white; border: 0px; color: #444444; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant-caps: inherit; font-variant-ligatures: inherit; font-weight: inherit; line-height: 25.6px; margin: 0px; padding: 0px; vertical-align: baseline;" trbidi="on"><div style="border: 0px; font: inherit; margin: 0px; padding: 0px; text-align: justify; vertical-align: baseline;"><b style="-webkit-user-select: text; border: 0px; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"></b></div></div><pre class="line-numbers" data-codetype="JavaScriptku" style="background-color: #2c323c; border-radius: 4px; border: 0px; font-family: &quot;courier new&quot;, courier, monospace; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant-caps: inherit; font-variant-ligatures: inherit; font-weight: inherit; line-height: 25.6px; margin-bottom: 0.5em; margin-top: 0.5em; max-height: 500px; overflow-wrap: break-word; overflow: auto; padding: 50px 10px 10px 3em; position: relative; vertical-align: baseline;" title="Javascript"><code class="language-javascript" style="-webkit-user-select: text; background-attachment: initial; background-clip: initial; background-color: initial; background-image: none; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border-image-outset: initial; border-image-repeat: initial; border-image-slice: initial; border-image-source: initial; border-image-width: initial; border: none; direction: ltr; display: block; font-family: 'Courier New', Courier, monospace; font-size: 12px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: bold; line-height: 16px; margin: 0px; padding: 0px; position: relative; vertical-align: baseline; word-spacing: normal;"><span style="font-family: &quot;times new roman&quot;; font-size: small; font-weight: 400; white-space: normal;"><span style="color: red;">Kode Script Sobat Disini</span></span></code></pre><br /><br /><br /><br /><br /></div></div>

Tampilan Kotak Script versi 19

<div style="background-color: #ffeb7e; height: 50px; overflow: auto; padding: 10px; text-align: left; width: 600px;">

Pasang Kode Script Anda Disini</div>

Catatan:

• border: 3px = ketebalan border kotak script.
• #9191ed = warna border kotak script.
• Dotted : bentuk border putus putus. (kode ini bisa diganti dengan kode yang lain atau juga bisa dihilangkan).
• Text-alignzleft; = posisi tulisan didalam kotak di kiri ( dapat diganti dengan center atau right)
• background-color:#eaeaea; = warna dalam kotak tersebut.
• padding:10px = lebar kotak ke bawah.

Cara Pemasangan di dalam Postingan

1. Buat sebuah postingan / entry baru

2. Kemudian beralih dari mode Compose ke > HTML

3. Pastekan salah satu kode kotak script yang kalian pilih di atas

4. Untuk melihat hasilnya balik ke mode > Compose

5. Kita akan melihat tampilan box atau kota script yang telah dibuat

6. Terakhir pastekan kode script yang ingin dimasukan kedalam kotak script

Selesai !! Kotak script sudah berhasil dibuat , dan selanjutnya kalian bisa melanjutkan untuk menulis artikel kalian sampai selesai.

Alasan kenapa harus pakai Kotak Script  di postingan?

1. Dengan memakai kotak script akan lebih rapi karena bisa memisahkan antara text biasa dan kode script, karena tersusun didalam satu kotak, atau box area apa bila membahas tutorial yang harus menampilkan kode script.
2. Akan lebih menarik jika sebagai tempat konten pilihan post terkait, tombol download, atau apa saja karena script box ini bisa di pakai apa saja (pasti yang lain tertarik dan pada mau pake)
3. Tidak akan membuat lambat pada loding blog karena kode yang digunakan sangat minimal.

Mudah-mudahan share kali ini ada manfaatnya kalau tidak ada baiknya mohon jangan diambil. demikianlah postingan tentang Cara Membuat Kotak Script Pada Postingan Blog versi BangRizkyW.com yang bisa saya sampaikan semoga bisa menambah pengetahuan anda, mungkin ada tambahan dari kamu sekalian? kalau ada silahkan isi di kolom komentar jangan lupa juga berikan sebuah saran.

Berbagi :