Tentang Kotak Script Pada Blogger
Jika anda Sebagai Seorang 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.
Daftar Isi ...
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 Blog tentang kegiatan ngeblog atau blogging.
Cara Menerapkan kotak Script Pada Postingan Blogger
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.#Langkah Pertama
#Langkah kedua
Kemudian ubah ke tampilan html
#Langkah Ketiga
Lalu pastekan ( tempel) kode kotak script htmlnya.
#Langkah Keempat
Pratinjau postingan tersebut untuk melihat hasilnya atau ubah ke tampilan menulis.
Kotak script berhasil di buat selanjutnya sobat bisa meneruskan untuk menulis artikel.
Macam Macam Kotak Script Blogger Keren
<div style="background-color: #2c323c; border-left: 5px solid rgb(46, 139, 47); color: white; padding: 17px; text-align: left;">Kode Script Disini</div>
<div style="background-color: #2c323c; border-left: 5px solid rgb(46, 139, 47); color: tan; padding: 17px; text-align: left;">Kode Script Disini</div>
<div style="background-color: #2c323c; border-left: 5px solid rgb(46, 139, 47); border-radius: 0px 10px 10px 0px; color: white; padding: 17px; text-align: left;">Kode Script Disini</div>
<div style="background-color: #2c323c; border-left: 5px solid rgb(46, 139, 47); border-radius: 0px 10px 10px 0px; color: tan; padding: 17px; text-align: left;">Kode Script Disini</div>
<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, "courier new", 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, "andale mono wt", "andale mono", "lucida console", "lucida sans typewriter", "dejavu sans mono", "bitstream vera sans mono", "liberation mono", "nimbus mono l", monaco, "courier new", courier, monospace; font-size: 13px; font-stretch: normal; padding: 0px;"><div dir="ltr">
<span style="color: black; font-family: "times new roman"; 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!!!)
Kode Script Scroll Vertical :
<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: "courier new", 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: "times new roman"; 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 />
Kode Script Scroll Horizontal :
<div style="background-color: antiquewhite; border: 2px solid brown; height: 100px; overflow-x: scroll; overflow-y: scroll; overflow: scroll; width: auto;">
<div style="width: 1200px;">
Kuy taruh disini Scriptnya !</div>
Kode Script Scroll Horizontal Plus Vertical
<div style="background-color: white; border: 2px solid gray; height: 100px; overflow-x: scroll; overflow-y: scroll; overflow: scroll; padding: 5px; width: auto;"><div style="width: 1200px;">
TULSAN DISINI
A
B
C
</div>
Keterangan :
- 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.