Cara Mudah Membuat Kotak Script di Blog

Membuat tampilan blog menjadi luar biasa adalah salah satu cara para blogger sedjati untuk membuat daya tarik tersendiri agar visitor tetap betah berlama - lama dalam mengakses sebuah blog tersebut.

Tentunya dengan perbandingan dan perhitungan baik tingkat SEO , efek maupun dampak yang akan terjadi dalam jangka panjangnya. Bila anda mencari di search engine google banyak sekali tutorial - tutorial yang bisa anda dapatkan termasuk juga pada Situs ini.

Kesempatan yang lalu sudah kita bahas tentang cara menyembuyikan gambar atau thumbnail menjadi sampul di halaman home page. Kali ini kita akan bahas tentang cara membuat kotak script pada postingan blog.

Kegunaan kotak script bagi para blogger tutorial sangatlah penting. Karena untuk memisahkan antara postingan artikel dengan langkah - langkah yang dibahas.

Apa itu Kotak Script?

Kotak Script adalah elemen pembungkus yang berfungsi untuk membungkus tulisan yang ada di dalamnya. Biasanya kode script maupun kode lainnya.

Pada dasarnya elemen pembungkus ini hampir mirip dengan syintax highlighter. Yang membedakan kedua komponen tersebut adalah dari segi pemasangan dan selebihnya dapat dikatan mirip.

Lalu Apa Kelebihan Menggunakan Kotak Script Box?

1. Memudahkan Pembaca dalam memahami suatu konten tersebut
2. Tulisan menjadi lebih rapi dan efektif
3. Tulisan menjadi lebih terstrukur

Setelah memahami pengertian dan kelebihan yang anda dapatkan , berikut ini adalah model dan jenis kotak script yang bisa anda gunakan sesuai selera masing - masing.

Script Box Keren Dasar

Tampilan I

<div style="background-color: #f6f6f6; border: 1px solid #009ee0; padding: 17px; text-align: left;">
Letakan Script di sini...
</div>

Tampilan II

<div style="background-color: #f6f6f6; border: 1px solid #009ee0; border-radius: 0 10px 0 10px; padding: 17px; text-align: left;">
Letakan Script di sini...
</div>

Tampilan III

<div style="background-color: #f6f6f6; border: 1px solid #009ee0; border-radius: 0 10px 10px 0; padding: 17px; text-align: left;">
Letakan Script di sini...
</div>

Tampilan IV

<div style="background-color: #f6f6f6; border-left: 5px solid #009ee0; padding: 17px; text-align: left;">
Letakan Script di sini...
</div>

Tampilan V

<div style="background-color: #f6f6f6; border-top: 5px solid #009ee0; padding: 17px; text-align: left;">
Letakan Script di sini...
</div>

Tampilan VI

<div style="background-color: #f6f6f6; border-top: 5px solid #009ee0; border-left: 5px solid #009ee0; padding: 17px; text-align: left;">
LetakanScript di sini...
</div>

Tampilan VII

<div style="background-color: #f6f6f6; border-left: 5px solid #009ee0; border-radius: 10px; padding: 17px; text-align: left;">
Letakan Script di sini...
</div>

Tampilan VIII

<div style="background-color: #f6f6f6; border: 5px solid #009ee0; padding: 17px; text-align: left;">
Letakan Script di sini...
</div>

Tampilan IX

<div style="background-color: #f6f6f6; border-radius: 10px; border: 5px outset #fafafc; padding: 17px; text-align: left;">
Letakan Script di sini...
</div>

Tampilan X

<div style="background-color: #f6f6f6; border: 5px #009ee0 Double; padding: 17px; text-align: left;">
Letakan Script di sini...
</div>

Tampilan XI

<div style="background-color: #f6f6f6; border-left: 5px #009ee0 Double; padding: 17px; text-align: left;">
Letakan Script di sini...
</div>

Tampilan XII

<div style="background-color: #f6f6f6; border: 3px #009ee0 dotted; padding: 17px; text-align: left;">
Letakan Script di sini...
</div>

Tampilan XIII

<div style="background-color: #f6f6f6; border-left: 3px #009ee0 dotted; padding: 17px; text-align: left;">
Letak Script di sini...
</div>

Script Box Variasi Keren

1. Button

<div> <form name="copy"> <div align="center"> <input onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button" value="Select All" /></div> <div align="center"></div> <br /> <div align="center"> <textarea name="txt" readonly="true" style="font-size: small; padding: 17px; font-family: Fira Mono; height: 100px; width: responsive;"> Script di sini...

2. Dark

<div style="background-color: #2c323c; color: #fff; border-left: 5px solid #800000; padding: 17px; text-align: left;">
Letakan Script di sini...
</div>

<div style="background-color: #2c323c; color: #fff; border-left: 5px solid #800000; border-radius: 0 10px 10px 0; padding: 17px; text-align: left;">
style="box-sizing: border-box; font-family: "Fira Mono", monospace; font-size: 14px;" />Letakan Script di sini...
</div>

<div style="background-color: #2c323c; border-radius: 0 10px 0 10px; padding: 17px; text-align: left;">
Script di sini...
</div>

3. Soft

<div style="background-color: #e6f7ff; border-radius: 10px; padding: 17px; text-align: left;">
Letakan Script di sini...
</div>

4. Gradient

<div style="background-image: linear-gradient(to right, #eeffe6, #fce6f8); border-radius: 10px; padding: 17px; text-align: left;">
Script di sini...
</div>

PENTING!

• Apabila anda memberikan fitur scroll maka gunakan atribut overflow: auto; height: 150px; width: 100%
• background-color  = Warna latar belakang
• background-image = Warna latar belakang dengan gradiasi
• color = warna konten
• border = Garis Pinggir
• border-radius = Ketumpulan garis pinggir
• padding = Jarak Konten Dengan Garis pinggir
• text-align = Arah awal konten

Silahkan anda atur sendiri kumpulan kode diatas sesuai keinginan anda.