Cara Membuat Tulisan Dalam Kotak di Blog

Tampilan sebuah blog merupakan salah satu hal yang sangat perlu untuk diperhatikan. Contohnya adalah membuat tulisan dalam kotak di Blog. Karena keteraturan dan tampilan blog yang bagus akan membuat pengunjung atau pembaca akan merasa betah membaca artikel Anda. 

Pada kesempatan ini, saya akan membahas Cara Membuat Tulisan Dalam Kotak di Blog agar terlihat lebih rapi dan mudah dipahami oleh pengunjung. Tidak hanya itu, kotak script juga bisa digunakan untuk membuat sebuah catatan penting atau tulisan penegasan pada postingan di blog Anda.

Cara Membuat Tulisan dalam Kotak di Blog

Lalu bagaimana Cara Membuat Tulisan Dalam Kotak di Blog? dan Apa Kode Script HTML untuk Membuat Tulisan dalam Kotak di Blog?

Berikut Cara Membuat Tulisan Dalam Kotak di Blog. 

Silahkan ikuti langkah-langkahnya:

1) Masuk ke Dashboard

2) Klik Postingan Baru

Klik Postingan Baru

3) Tulis isi postingan seperti biasa sampai selesai

4) Ganti mode penulisan dari “Tampilan Menulis” menjadi “Tampilan HTML”

Klik Tampilan Menulis

Klik Tampilan HTML

5) Copy script kotak yang akan dipakai (kode sudah disediakan di bagian bawah), dan Paste Script tersebut.

Copy Paste Script yang Diinginkan

6) Kembali ganti mode penulisan dari “Tampilan HTML” menjadi "Tampilan Menulis".

Klik Tampilan Menulis

7) Jika muncul pesan seperti di bawah ini, klik saja "Alihkan".

Alihkan

8) Maka akan tampil seperti gambar di bawah ini. Tinggal mengganti teks "Masukkan Teks Anda!" sesuai keinginan Anda.

Ganti Teks "Masukkan Teks Anda!" Sesuai Keingginan

Setelah mempelajari Cara Membuat Kotak Script di Postingan Blog, selanjutnya mari kita mempelajari kode script yang akan kita gunakan, dan lihat tampilan gambar kotak script-nya.

Di bawah ini ada beberapa beberapa kode untuk membuat kotak script di postingan blog, yang bisa Anda pilih sesuai selera.

Kotak Sederhana

Script:

<div style="background-color: #fafafc; border: 1px solid rgb(221, 221, 221); padding: 10px; text-align: justify;"> Masukkan Teks Anda! </div>

Tampilan:

Masukkan Teks Anda!

Kotak Sederhana Tanpa Garis

Script:

<div style="background-color: turquoise; padding: 10px; text-align: left;"> Masukkan Teks Anda! </div>

Tampilan:

Masukkan Teks Anda!

Kotak dengan Single Solid Border 2px

<div style="background-color: ivory; border: 2px solid black; padding: 10px; text-align: left;"> Masukkan Teks Anda! </div>

Tampilan:

Masukkan Teks Anda!

Kotak Script dengan Double Border

Script:

<div style="background-color: lightcyan; border: 3px #FE0606 double; padding: 10px; text-align: left;"> Masukkan Teks Anda! </div>

Tampilan:

Masukkan Teks Anda!

Kotak Script dengan Garis di Bagian Atas

Script:

<div style="background-color: ghostwhite; border-top: 8px solid red; overflow: auto; padding: 10px; t-align: left;"> Masukkan Teks Anda! </div>

Tampilan:

Masukkan Teks Anda!

Kotak dengan Garis di Bagian Kiri

Script:

 <div style="background-color: #f3f3f3; border-left: 10px solid #2288dd; padding: 10px; t-align: left;"> Masukkan Teks Anda! </div>

Tampilan

Masukkan Teks Anda!

Kotak Script dengan Garis Titik-Titik (Dots)

Script:

<div style="background-color: #ffebcd; border: 3px Red Dotted; padding: 5px; text-align: left;"> Masukkan Teks Anda! </div>

Tampilan:

Masukkan Teks Anda!

Kotak Script dengan Garis Putus-Putus

Script: 

<div style="background-color: palegreen; border: 5px #1780dd Dashed; padding: 5px; text-align: left;"> Masukkan Teks Anda! </div>

Tampilan:

Masukkan Teks Anda!

Catatan :

background-color =  warna kotak script atau warna background

border-color = warna garis border

border: 2px = ketebalan garis border (2px bisa diganti sesuai ketebalan yang diinginkan)

text-align = posisi teks di dalam kotak (rata kiri, rata kanan, rata tengah, atau rata kiri-kanan).

Itulah sedikit bahasan mengenai Cara Membuat Tulisan Dalam Kotak di Blog, semoga dapat membantu untuk para pengunjung khususnya blogger sedang belajar menghias tampilan blognya. Jika ada yang kurang jelas atau mau tanya-tanya bisa melalui kolom komentar.

Referensi:

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

Muhammad Fakhrizal - Cara Membuat "Highlight Box" Kotak Warna untuk kode HTML pada Postingan Blog