Membuat Kotak Script Di postingan blog.

Rendi Riawan    12:39    Belajar Blog    Comment   

Kotak Script dalam Postingan - Cara membuat kotak Script di postingan blog

cara membuat kotak Script di postingan blog

Kotak Script merupakan sebuah kotak dalam postingan blog yang berisikan sebuah teks, baik itu code Script ataupun catatan penting lainnya.
Tujuan penulis blog memberikan kotak Script pada postingan blog adalah untuk memberitahu kepada pengguna bawah dalam kotak Script tersebut adalah point' penting yang harus di ketahui.
Dengan menerapkan kotak Script pada postingan blog, postingan tersebut akan terlihat rapi dengan catatan yang ditandai dengan kotak Script.

Jenis kotak Script untuk postingan blog

Berikut ini adalah beberapa kotak Script yang bisa anda gunakan untuk diterapkan pada postingan blog. Anda juga bisa mengubah atau mengatur style/tampilan seperti ketebalan dan warna kotak Script.

1. Kotak Script rata kiri, kanan, atas, bawah.

Kotak script garis keliling

Kotak script Garis kiri

Kotak script Garis kanan

Kotak script Garis Atas

Kotak script Garis Bawah

Gunakan Kode Html berikut untuk membuat kotak script seperti contoh diatas, kemudian anda sesuaikan style yang di inginkan.

<div style="border-left: 3px solid red; padding: 10px; background-color: lightgrey; text-align: left;">Kotak script Garis kiri </div>

penyesuaian:
Dari contoh kotak script diatas merupakan kotak script yang menggunakan properti sebagai berikut:

Border - Untuk garis Keliling
Border-left - untuk garis kiri.
Border-right - untuk garis kanan.
Border-top - untuk garis atas.
Border-bottom - untuk garis bawah.

2. Kotak Script Radius

Properti radius batas digunakan untuk menambahkan batas bulat ke elemen sebagai contoh:

Kotak script radius keliling

Gunakan Kode html berikut untuk membuat kotak script seperti contoh di atas.

<div style="border: 2px solid red;
border-radius: 5px; padding: 10px; background-color: lightgrey; text-align: left;">Kotak script radius keliling</div>

Penyesuaian:
Anda bisa mengubah angka radius sesuai keinginan. Anda juga bisa menggabungkan kode html pada point' pertama.

Contoh Kotak script yang bisa anda gunakan

selain dari contoh diatas, anda juga bisa menggunakan kotak berikut yang bisa anda terapkan untuk postingan blog anda.

<div style="border: 3px #1E90FF Double; padding: 10px;background-color:#87CEFA; text-align: left;"> Contoh: Kotak script 1</div>

<div style="border: 3px solid #1E90Ff; padding: 10px; background-color: #87CEFA; text-align: left;">
Contoh: kotak script 2.</div>

<div style="Border-left: 4px solid #1E90Ff; border-radius:10px; padding: 10px; background-color: #87CEFA; text-align: left;">
Kode Script Sobat Disini</div>

Cara Memasang kotak script di dalam Postingan.

Jika anda sudah memiliki kode Html kotak script, Langkah selanjutnya adalah menyisipkannya kedalam postingan blog. Lakukan cara ini untuk menggunakan kotak script dalam postingan blog.

1. Buatlah Sebuah Artikel baru / Edit artikel yang ingin di sisipkan kotak script.
2. Gunakan mode HTML kemudian Masukan Kode kotak script yang anda punya.

Catatan:

• Jika anda menuliskan postingan dalam mode HTML, Anda bisa mengubah tulisan yang ada di kotak script di antara kode Div.
• Anda juga bisa langsung mengubah Tulisan yang ada di kotak script menggunakan mode Compose.