Skip to content Skip to sidebar Skip to footer

Cara Membuat Kotak Script Keren Di Postingan Blog

Cara Membuat Kotak Script

Cara Membuat Kotak Script Keren Di Postingan Blog - Jika kita akan membuat suatu blog tutorial pemograman, secara otomatis kita harus membuat postingan untuk menampilkan script untuk C++, Java , CSS , Python maupun script lainnya. Agar blog kita terkesan rapi dan lebih hidup,kita membutuhkan sebuah kotak script atau text box.Selain itu pembaca juga dapat membedakan mana yang artikel maupun script. Tidak hanya itu,kotak script juga dapat digunakan untuk catatan penting maupun kutipan (blockquote) didalam postingan.

Apa itu Kotak Script atau Text Box?

Kotak Script atau Text Box adalah sebuah kotak yang didalamnya dapat diisi dengan script maupun catatan penting dibuat dengan tag HTML dan sedikit desain menggunakan CSS sehingga kotak script yang dibuat terlihat berwarna dan menarik yang dapat menarik pengunjung blog nyaman ketika melihat sebuah script yang biasanya berisi kode HTML maupun Java yang dapat membuat mata kita sedikit pegal. Oleh karena itu penggunaaan kotak script di blog untuk membungkus script kode sangat diperlukan apalagi anda adalah sebuah blogger dengan niche blog ataupun pemograman.

contoh:

Kuy taruh disini Scriptnya ! 

Pada awalnya saya kebingungan bagaimana cara memasang kotak script di blog. Namun setelah searching di google,ternyata cukup mudah memasangnya. Anda tidak perlu paham html untuk membuatnya karena saya sudah menyiapkan berbagai macam tampilan kotak script yang cukup unik dan sederhana dengan berbagai macam desain. Namun jika anda paham CSS, maka itu akan menjadi nilai tersendiri karena anda dapat mengubah beberapa kode untuk membuat desain yang berbeda.


Nah berikut adalah berbagai macam tampilan kotak script yang sudah saya siapkan:

<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;">Kuy taruh disini Scriptnya ! </div>
  • Kotak Solid Lightblue
<div style="-moz-border-box: 10px; -webkit-border-box: 10px; background-color: ghostwhite; border-left: 5px solid lightblue; padding: 20px; t-align: left;">
<span style="color: black;"><span style="font-family: &quot;trebuchet ms&quot; , sans-serif;">Kuy taruh disini Scriptnya ! </span>
  • Kotak Solid Warna Green
<div style="-moz-border-box: 10px; -webkit-border-box: 10px; background-color: #6ddb98; border-left: 7px solid green;  padding: 20px; t-align: left;">
<span style="color: black;"><span style="font-family: 'Trebuchet MS', sans-serif;">Kuy taruh disini Scriptnya !  </span></div>
  •  Kotak script dengan radius sudut=10px+border-left=10px
<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #f3f3f3; border-left: 10px solid #2288dd; border radius: 10px; padding: 10px; t-align: left;">Kuy taruh disini Scriptnya !</div>
  • Kotak Script dotted
<div style="border: 3px #9191ed Dotted; padding: 10px; background-color:#eaeaea; text-align: left;"><code>
Kuy taruh disini Scriptnya !
</code></div>

<div style="background-color: lightcyan; border: 2px #1b1a76 dotted; padding: 10px; text-align: left;">
Kuy taruh disini Scriptnya !</div>

<div style="background-color: #ffebcd; border: 3px Red Dotted; padding: 5px; text-align: left;"> Kuy taruh disini Scriptnya !</div>

<div style="border: 2px #1B1A76 dotted; padding: 10px; background-color:#c2c2c2; text-align: left;"> Kuy taruh disini Scriptnya !</div>
  • Kotak Script dashed
<div style="background-color: palegreen; border: 5px #1780dd Dashed; padding: 5px; text-align: left;"> Kuy taruh disini Scriptnya !</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;">Kuy taruh disini Scriptnya !</div>
  • Kotak Script Single-border
<div style="background-color: #f3f3f3; border: 4px solid #999; padding: 10px; t-align: left;"> Kuy taruh disini Scriptnya ! </div>
  • Kotak Script Double-border
<div style="border: 3px #5f200e double; padding: 10px; background-color: #82CAFA; text-align: left;"> Kuy taruh disini Scriptnya !</div>

<div style="background-color: lightcyan; border: 3px #FE0606 double; padding: 10px; text-align: left;"> Kuy taruh disini Scriptnya !</div>
  • Kotak Script Scroll vertikal
<div style="background-color: antiquewhite; border: 2px solid blue; height: 100px; overflow: auto; padding: 5px; width: auto;">
Kuy taruh disini Scriptnya !
"A
B
C"
</div>
  • Kotak Script Scroll Horizontal
<div style="background-color: antiquewhite; border: 2px solid brown ; height: 100px; overflow-x: scroll; overflow-y: scroll; width: auto;">
<div style="width: 2500%;">
Kuy taruh disini Scriptnya !</div>
  • Kotak Script Scroll Vertikal-Horizontal
<div style="border: 2px solid black; height: 100px; overflow-x: scroll; overflow-y: scroll; width: auto;">
<div style="width: 2500%;">
Kuy taruh disini Scriptnya !
A
B
C
D
E
</div>
</div>

Catatan:
  • Border : 6px = Ketebalan Border Kotak Script
  • Text-align:left = Posisi text rata kiri
  • Background-color: #00000 = Background warna
  • Width: 2500% = Lebar kotak

Lalu, Bagaimana Cara Memasangnya?

cara memasangnya cukup mudah. anda tinggal mengikuti tutorial yang sudah saya buatkan dibawah ini:

Cara Memasang Kotak Script Di Blog 

  1. Masuk ke dashboard lalu buat postingan
  2. Beralih dari mode compose ke mode HTML

  3. Masukkan Kode Scriptnya di mode HTML

  4. Kemudian balik ke mode compose, maka kode kotak script akan berubah seperti ini. Kemudian kalian bisa menambahkan script html, css maupun java di dalam kotak tersebut

Catatan ! jika kamu ingin meletakkan kode html sebaiknya diparse terlebih dahulu menggunakan tools parse html disini

Kenapa Harus Pakai di Postingan? 

  1. Supaya lebih rapi karena bisa membedakan antara text biasa dengan Script.
  2. Tidak memperlambat Loading Blog
  3. Desain Lebih menarik ketika kita hanya menggunakan tools bawaan blogger

6 comments for "Cara Membuat Kotak Script Keren Di Postingan Blog"

  1. Bagus mas. Lebih bagus lagi kalo dalam bentuk file, heheh.

    Mampir

    https://www.newsartstory.xyz

    ReplyDelete
  2. Artikel nya bagus sekali, jadi kepingin buat seperti itu hehehhe, jangan lupa visit ya

    ushuaiaoutdoors.com

    ReplyDelete
  3. Artikel ny bagus sekali

    Mampir gan
    https://ayamberkokoknews..blogspot.com

    ReplyDelete
  4. artikel keren, lengkap turtorialnya, ntr saya coba deh...
    thanks mas..

    ReplyDelete

Berlangganan via Email