Cara Membuat Kotak Script di dalam Postingan

Kotak script adalah kotak khusus yang di sematkan di dalam postingan yang berfungsi untuk menempatkan kode HTML/JavaScript/CSS supaya terlihat lebih rapi, indah, dan mudah untuk di copy paste oleh pengunjung. Biasanya kotak ini sangat berhubungan erat dengan pemilik blogger yang materinya membahas tentang tutorial blog. Dengan adanya kotak ini, pengunjung akan lebih mudah dalam memilah antara kode dan tulisan biasa agar tidak terjadi kesalahan saat melakukan copy paste script.

Namun yang jadi masalah adalah kotak ini masih belum disediakan oleh pihak blogspot secara default. Sehingga kita harus membuatnya sendiri dengan kode yang akan saya berikan.

Langkah-langkah:

1. Login ke Blogger

2. Pilih New Post/Entri Baru

3. Tulis postingan dalam posisi Compose, sebelum memasukkan kotak script tekan tombol Enter 2x lalu ketik A.

4. Letakkan kursor ke bagian kosong (di atas A) dengan cara di klik 1x

5. Lalu tekan tombol HTML. Kursor tadi akan berada sebelum kode <br />

6. Copy script ini, paste kan kepostingan tadi

<div style="border: 3px #1780dd Double; padding: 10px;background-color:#ffffff;
text-align: left;">
saifullah.xyz (ganti tulisan ini).</div><br/>

7. Pindah ke posisi Compose lagi

8. Sekarang kalian bisa ganti tulisan saifullah.xyz (ganti tulisan ini). yang di dalam kotak dengan kata/kode yang diinginkan.

9. Huruf A bisa kalian hapus atau diganti dengan tulisan lain. Fungsi dari menambahkan Enter dan huruf A adalah supaya kalian bisa menulis di bawah kotak script. Tapi jika kalian meletakkan kotak script di akhir postingan tanpa diikuti tulisan yang lain, tidak perlu memasukkan Enter dan huruf A setelahnya. Huruf A hanyalah contoh, kalian bisa mengguanakan huruf yang lain. 

Kotak di atas bisa diubah sesuai keinginan. Berikut script yang bisa diubah:

<div style="border: 3px #1780dd Double; padding: 10px;background-color:#ffffff;
text-align: left;">saifullah.xyz (ganti tulisan ini).</div><br/>

Keterangan:

1. border: 3px = ketebalan kotak script.
2. #1780dd = warna kotak script.
3. Double = bentuk kotak script.

<div style="border: 3px #1780dd Dashed; padding: 10px;background-color:#ffffff;
text-align: left;">
saifullah.xyz (ganti tulisan ini).</div><br/>

<div style="border: 3px #1780dd Dotted; padding: 10px;background-color:#ffffff;
text-align: left;">
saifullah.xyz (ganti tulisan ini).</div><br/>

<div style="border: 3px #1780dd Groove; padding: 10px;background-color:#ffffff;
text-align: left;">
saifullah.xyz (ganti tulisan ini).</div><br/>

<div style="border: 3px #1780dd Inset; padding: 10px;background-color:#ffffff;
text-align: left;">
saifullah.xyz (ganti tulisan ini).</div><br/><br/>

<div style="border: 3px #1780dd Outset; padding: 10px;background-color:#ffffff;
text-align: left;">
saifullah.xyz (ganti tulisan ini).</div><br/>

<div style="border: 3px #1780dd Ridge; padding: 10px;background-color:#ffffff;
text-align: left;">
saifullah.xyz (ganti tulisan ini).</div><br/>

<div style="border: 3px #1780dd Solid; padding: 10px;background-color:#ffffff;
text-align: left;">
saifullah.xyz (ganti tulisan ini).</div><br/>

4. padding:10px = panjang kotak ke bawah, untuk lebarnya otomatis sampai ke ujung posting.

5. background-color:#ffffff; = warna dalam kotak.

6. text-align: left; = posisi tulisan didalam kotak di kiri 

Untuk mendapatkan kode warna yang kamu inginkan, kamu bisa ke sini karena pada akhir artikel ada generator warna yang bisa kamu gunakan untuk mendapatkan kodenya.

Demikian cara membuat kotak script di dalam postingan, mudah bukan?

Selanjutnya tinggal dipraktekkan dan di edit sesuai selera kalian.

Semoga bermanfaat :)