Membuat Kotak Script Pada Postingan Blog

Untuk memasang kotak Scrip yang ada di dalam postingan, baik itu digunakan untuk menempatkan kode script ataupun informasi-informasi yang lain.

Dalam pemasangannya pun sangat mudah, silahkan ikuti langkah-langkah berikut :

1. Silahkan buat edit atau buat postingan baru yang ingin datambahkan kotak didalam postingannya, selanjutnya ketikan text pada posisi "Compose" lihat gambar dibawah ini.

2. Selanjutnya copy salah satu kode script  diatas sesuai keinginan Anda, kemudian letakan kode script tepat dibawah text yang Anda tulis tadi, dan harus dalam posisi edit "HTML". Untuk lebih jelasnya lihat contoh gambar berikut.

3. Setelah Anda memasang kode script untuk kotaknya, selanjutnya silahkan Anda isikan kode script atau informasi lain yang di inginkan.

Berikut beberapa Jenis Script Kode

🔁 Yang pertama model Kotak Kode Script/HTML di dalam Postingan Blogger seperti pada contoh dibawah ini , anda dapat copy paste script dibawah ini ,

Disini saya jelaskan fungsi dari script  bentuk kontak dan tampilannya, silahkan pilih sesuai dengan kebutuhan Anda.

<div style="background-color: #CCFFFF; Border: 1px solid #0000A0; padding: 15px; text-align: left;">
Pasang Script Code Anda Disini
 </div>

Keterangan :
  ↪  Background-color: merupakan warna dari background.
  ↪  #CCFFFF> Merupakan Warna dari border
  ↪  Border:1px > Ini merupakan tebal border/frame
  ↪  solid #0000A0 warna border/frame
  ↪  Padding : 15px > Jarak teks dengan border
  ↪  text-align:left : Rata tulisan dari text yang ada dalam border .

🔁 Untuk tipe Kotak Kode Script/HTML pada Postingan Blogger yang kedua yakni seperti pada tampilan dibawah. untuk melebarkan kotak text hanya dengan menggeser titik segitiga pada bagian kanan bawah kotak.

<div align=”left”> <textarea cols="”70”" name="”code”" rows="”4″" > KODE HTML ANDA DI SINI </div>

Keterangan :
  ↪ align=Left : Rata tulisan dari text yang ada dalam border 
  ↪ cols="”70”" : besar colom border
  ↪ rows="”4”" : besar baris colom

🔁Kode Kotak Script selanjutnya yakni seperti pada beberapa contoh kotak dibawah ini anda tinggal mengcopy paste contoh code ke dalam script HTML pada postingan blog

di bawah ini ada berbagai contoh kotak script code yang sudah di modif, anda bisa mengubah warna sesuai keinginan

⏩style minimalis

<div style="background-color: #F70D1A; border: 2px #1b1a76 dotted; padding: 10px; text-align: left;">Pasang Script Code Anda Disini</div>

⏩style standart

<div style="border: 1px solid #444; padding: 10px; background-color: #EBDDE2; text-align: left;">Pasang Script Code Anda Disini</div>

⏩style shadow frame

<div style="border: 3px #5f200e outset; padding: 10px; background-color: #d9da81; text-align: left;">Pasang Script Code Anda Disini</div>

⏩style double

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #6fa8dc; border-radius: 10px; border: 4px double #fff; padding: 10px; t-align: left;">Pasang Script Code Anda Disini</div>

⏩style Left Border elips

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #FEBF80; border-left: 5px solid #FF3300; border-radius: 10px; padding: 10px; t-align: left;">Pasang Script Code Anda Disini</div>

⏩style Dashed

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #ffe599; border-radius: 10px; border: 2px dashed
#aaa; padding: 10px; t-align: left;">Pasang Script Code Anda Disini</div>

⏩style scroll

<div style="background-color: #9E7BFF; border: 2px #006400 solid; height: 70px; overflow: auto; padding: 10px; text-align: left; width: 300px;">Pasang Script Code Anda Disini</div>

⏩style  Left Border solid

<div style="background-color: #f3f3f3; border-left: 5px solid #2288dd; padding: 10px; t-align: left;">Pasang Script Code Anda Disini</div>

⏩style simple

<div style="background-color: #6afb92; border-radius: 5px; box-shadow: rgba(0, 0, 0, 0.16) 0px 2px 5px 0px, rgba(0, 0, 0, 0.12) 0px 2px 10px 0px; color: black; font-size: 18px; margin: 0.5rem 0px 1rem; overflow: hidden; padding: 20px; position: relative; text-align: left; transition: all 0.25s ease 0s;">
<span style="font-weight: normal;">Pasang Script Code Anda Disini</span></div>

Anda juga bisa mengubah warna tema background atau text dengan menggunakan kode warna pada link HTML Color Code & Name