"Hei hei, yow yow, Selamat datang Iagi di BangRizkyW.com. Blog terkece, tersuper, terkeren, dan terhit di Indonesia. Update semaunya ENJOYYY SELAMAT MEMBACA" Mencoba berbagi pengalaman, pemahaman, pengetahuan dalam bentuk tulisan karena berbagi pengetahuan itu indah. MOHON MAAF JIKA ADA KESALAHAN DALAM PENULISAN, UNTUK MENDUKUNG KAMI TERUS BERBAGI SILAHKAN BERDONASI KEPADA KAMI CUKUP DENGAN KLIK IKLAN TERIMAKASIH

Cara Membuat Kotak Script Pada Postingan Blog versi BangRizkyW.com


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


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

TULIS KODE/SCRIPT ANDA DISINI

</code></div>


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Kotak Script Scroll :


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

10 Responses to "Cara Membuat Kotak Script Pada Postingan Blog versi BangRizkyW.com"

Tata Tertib Berkomentar :
🔖 Berkomentarlah yang relevan sesuai topik.
🔖 Jika bermanfaat, sobat bisa bagikan juga ke teman-teman sobat melalui tombol media sosial di atas, karena berbagi itu indah, semoga jadi jalan kebaikan.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel