CARA MEMBUAT KOTAK (SCRIPT) DALAM ARTIKEL BLOG

Mengatur tata wajah blog supaya tampak meraik memang sangat diperlukan. Setidaknya jika blog ditata sangat menarik, selain memunculkan kesan mendalam, para pengunjung atau pembaca akan merasa betah berlama-lama berada di dalamnya. Menarik dalam hal tata letak saja belum cukup, penulis blog juga harus mampu menyuguhkan artikel-artikel yang dibutuhkan pembaca. Semua memiliki keterkaitan dan memang harus diperhatikan pemilik blog jika ingin sukses menjadi blogger.

Ketika membahas soal kode script, tentu penulis harus membedakan antara narasi dengan kode yang dimaksud agar memudahkan proses pencarian bagi pembaca atau mereka yang sedang membutuhkan. Perlu diketahui bahwa kotak script dalam postingan tidak secara otomatis ada. Pemilik blog harus membuat sekaligus mengatur sedemikian rupa sebelum artikel ditayangkan.

Pada dasarnya, membuat kotak script bukanlah sebuah keharusan bagi si pemilik blog. Tapi dengan adanya pembeda antara artikel dan kode script semakin membuat tampilan blog tersebut menarik. Tanpa perlu berlama-lama, berikut ini adalah cara membuatnya:

1. Masuk ke akun Blogger Anda;

2. Cari kode script yang ingin diberi kotak;

3. Kopi kode di bawah ini:

<div style="background-color: #f3f3f3; padding: 10px; text-align: left;">
(Letakkan kode script di sini)
</div>

4. Selanjutnya buka tab baru (Tulis Baru), pilih HTML (bukan Compose). Terapkan kode di atas pada bagian yang ingin diberi kotak. Jika sudah muncul sesuai keinginan, letakkan kode script tutorialnya dalam kotak tersebut;

5. Kopi hasilnya dan pindahkan ke halaman artikel sebelumnya;
6. Jika sudah sesuai silakan simpan (Save).

Jika Anda ingin mengubah warna latar (background), ganti kode #ffff dengan warna yang diinginkan. Untuk memudahkan proses pencarian kode warna, Anda bisa menggunakan Corel Draw atau lewat Google.

Apabila ingin mengubah bentuk atau tampilannya, ubah border: 3px (untuk ketebalan garis), #1780dd (warnanya), padding:10px (ukuran panjang), background-color:#f3f3f3 (warna dalam kotak), text-align:left; (tata letak teks).

Setelah membuat kotak khusus script, coba lihat dan bandingkan dengan tampilan sebelumnya, apakah lebih menarik atau malah sebaliknya. Setidaknya jika membuat kotak script dalam artikel semakin mudah membedakan antara narasi dengan kode script.

Jika ingin alternatif lain barangkali bisa coba tampilan yang ini:

1. Silakan kopi kodenya dan terapkan di mana saja yang diinginkan;

<div style="border: 2px solid black; height: 100px; overflow-x: scroll; overflow-y: scroll; width: auto;">
<div style="width: 2500%;">
TULISAN DISINI</div>
</div>

2. Silakan kopi kodenya dan terapkan di mana saja yang diinginkan;

<div style="background-color: ivory; border: 2px solid #444; padding: 10px; text-align: left;">
TULISAN DISINI
</div>

3. Silakan kopi kodenya dan terapkan di mana saja yang diinginkan;

<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;">TULISAN DI SINI</d
iv>

4. Silakan kopi kodenya dan terapkan di mana saja yang diinginkan;

 <div style="background-color: deepskyblue; border-radius: 5px; box-shadow: 5px 5px 0 rgba(0 , 0 , 0 , 0.16) , 0 2px 5px 0 rgba(0 , 0 , 0 , 0.12); color: black; font-size: 18px; font-weight: bold; margin: 0.5rem 0 1rem; overflow: hidden; padding: 20px; position: relative; text-align: center; transition: 0.25s;">

TULISAN DISINI</div>

</div>