Cara Membuat Kotak Script di Postingan Blog/Website

Pada kesempatan kali ini, saya akan membahas cara membuat kotak script di postingan blog/website.

Tutorial membuat kotak script di postingan blog ini saya buat sekadar latihan, sekaligus menyimpan arsip untuk saya jadikan referensi buat diri sendiri. Namun semoga juga bisa bermanfaat bagi siapapun yang ingin mempercantik blog-nya.

To the point..

Dalam menyampaikan sebuah informasi berbasis web, tentu membuat kotak script di postingan blog itu sangat penting.

Selain untuk mempermudah pembaca memahami tulisan kita, halaman postingan juga akan telihat rapi dan terkesan lebih elegan. Sehingga pembaca bisa membedakan mana script dan mana artikelnya.

Kotak script atau text box area adalah sebuah kotak khusus yang bisa digunakan untuk meletakkan kode script HTML, CSS, Java script, atau bahasa pemograman lainnya.

Tidak hanya itu, kotak script juga bisa digunakan untuk catatan penting atau tulisan penegasan pada postingan di blog.

Sebetulnya kotak script sendiri hanya sebuah text box biasa pada umumnya. Namun dengan membuat kotak script di postingan blog, konten yang ditampilkan akan lebih profesional.

Jadi tidak tercampur antara kode script dengan wrapper (tulisan artikel). Bisa dikatakan kotak script semacam kutipan atau blockquote.

Secara default, platform Blogspot dan Wordpress masing-masing theme sudah menyediakan fitur “blockquote”.

Kita hanya tinggal menseting, dengan cara drag paragraf-nya dan klik “tanda kutip dua” di bagian toolbar pada panel postingan. Hanya saja layout-nya kurang menarik (menurut saya). Dan modelnya juga cuma itu-itu saja.

Berbeda dengan blockquote, cara membuat kotak script di postingan blog kita perlu menambahkan kode script-nya secara manual ke bagian HTML pada postingan. Dan kita bisa modifikasi dengan berbagai macam gaya.

Contoh kotak script sederhana di postingan blog :

Cara Membuat Kotak Script di Postingan Blog/Website – Rico Sihaloho

Dengan embel-embel kotak script tentunya visualnya lebih menarik bukan? Tertarik?

Namun sebelum kita masuk ke cara membuat kotak script di postingan blog, terlebih dahulu kita mempelajari kode script yang akan kita gunakan, dan lihat preview gambar kotak script-nya.

Di bawah ini ada beberapa listing code untuk membuat kotak script di postingan blog, yang bisa sobat pilih. Check it out :

Kotak Script sederhana tanpa lis border

 

<div style="background-color: turquoise; padding: 10px; text-align: left;"> Tulis script anda di sini..! </div>

Kotak Script dengan single-border solid 2px

 

<div style="background-color: ivory; border: 2px solid black; padding: 10px; text-align: left;"> Tulis script anda di sini..! </div>

Kotak Script dengan single-border solid 4px

 

<div style="background-color: #f3f3f3; border: 4px solid #999; padding: 10px; t-align: left;"> Tulis script anda di sini..! </div>

Kotak Script dengan double-border

 

<div style="background-color: lightcyan; border: 3px #FE0606 double; padding: 10px; text-align: left;"> Tulis script anda di sini..! </div>

Kotak Script dengan top-border

 

<div style="background-color: ghostwhite; border-top: 8px solid red; overflow: auto; padding: 10px; t-align: left;"> Tulis script anda di sini..! </div>

Kotak Script dengan left-border

 

<div style="background-color: #f3f3f3; border-left: 10px solid #2288dd; padding: 10px; t-align: left;"> Tulis script anda di sini..! </div>

Kotak Script dengan dotted-border (garis titik-titik/dots)

 

<div style="background-color: #ffebcd; border: 3px Red Dotted; padding: 5px; text-align: left;"> Tulis script anda di sini..! </div>

Kotak Script dengan dashed-border (garis putus-putus)

 

<div style="background-color: palegreen; border: 5px #1780dd Dashed; padding: 5px; text-align: left;"> Tulis script anda di sini..! </div>

Kotak Script dengan inset-border (seperti tertanam pada halaman postingan)

 

<div style="border: 4px #02d144 inset; padding: 10px; background-color: #d5839f; text-align: left;"> Tulis script anda di sini..! </div>

Kotak Script dengan outset-border (seperti keluar dari halaman postingan)

 

<div style="background-color: white; border: 3px #1780dd outset; padding: 10px; text-align: left;"> Tulis script anda di sini..! </div>

Kotak Script dengan ridge-border (seperti timbul)

 

<div style="background-color: #dde5d1; border: 3px Blue Ridge; padding: 5px; text-align: left;"> Tulis script anda di sini..! </div>

Kotak Script dengan groove-border (seperti masuk ke dalam halaman postingan)

 

<div style="background-color: white; border: 3px Pink Groove; padding: 5px; text-align: left;"> Tulis script anda di sini..! </div>

Note :

• background-color (warna kotak script)
• border-color (warna garis border)
• border : (..)px (ketebalan garis border)
• text-align (posisi script).

Nah kira-kira seperti itu cara membuat kotak script sederhana di postingan blog/website.

Selanjutnya silahkan berkreasi sendiri untuk warna, bentuk dan ukuran kotak script bisa kita custom sesuka kita.

Baca juga :

● Cara Membuat Kotak Script Sudut Melengkung

---

● Cara Membuat Kotak Script Efek Bayangan

---

● Cara Membuat Kotak Scroll di Blog

---

● Cara Membuat Tombol Spoiler di Blog

---

● Cara Membuat Tulisan berjalan (Marquee)

---

Next..

Bagaimana cara membuat kotak script di postingan blog?

Berikut cara membuat kotak script di postingan blog. Silahkan ikuti step by step nya :

• Masuk ke Dashboard
• Buat Posting/New Entry
• Tulis konten seperti biasa sampai selesai
• Ganti mode penulisan dari “Compose” menjadi “HTML”
• Copy script yang kalian suka, dan Paste -kan Script tersebut pada posisi yang kalian mau.
• Kembali ganti mode penulisan dari “HTML” menjadi "Compose", lalu edit “Tulis script anda di sini..!” ganti dengan tulisan sobat yang mau dimasukan dalam kotak script.
• Silahkan klik "Pratinjau" untuk memastikan script sudah berjalan.
• Terakhir, kalau sudah berjalan dan posisinya sudah pas. Jangan lupa di simpan dulu dan silahkan dipublish.

DONE. Demikian pembahasan cara membuat kotak script di postingan blog/website. Semoga membantu dan bermanfaat bagi sobat yang membutuhkan. Salam CMIIW aje dah! 😎

Kalau ada yang kurang paham boleh tanya-tanya di kolom komentar atau by direct message email. Terima kasih!

See you on top..

Nite & GBU more. Bye!!