Cara Membuat Kotak script atau Kotak Scroll di Artikel Blog Lengkap dengan Kode Html

Cara Membuat Kotak script atau Kotak Scroll di Artikel Blog Lengkap dengan Kode Html

Pada ketika beraktifitas di blog dengan bahasan perihal kode-kode script atau sering di sebut dengan code HTML memang sangat menyenangkan walaupun dalam pembuatan artikelnya sangatlah sedikit dan juga menambah profertinya lagi, yaitu adalah kotak script, atau juga sering kita sebut sebagai kotak scroll, tapi tak di permasalahkan tapi demi menambah kreasi di blog kita,  mau bagaimanpun penguasaan dan tehknik disain kecil-kecilan ini sangat diharapkan oleh kita semua bukan.!!!

Cara pemasangan kotak script atau kotak scroll di artikel blog kalian
Yaitu:

1. join ke Bloger teman-teman dulu.

2. Buat satu post yang baru.

3. Pada post edit {HTML} (ingat! pada mode HTML) bukan pada lainnya.

4. Copy dan pastekan arahan scripnya pada kawasan yang kalian inginkan, (sekalian mengedit ukuran, dan juga warna  sesuai selera kalian)

5. Setelah selesai, silahkan kembali pada Composenya, isi kotak dengan goresan pena atau juga bisa dengan script.

6. Selesai! tinggal meneruskan membuat artikel kalian masing-masing.

Langsung saja bagi sahabat semua yang ingin mendapatkan, atau lagi memerlukan kotak scriptnya, berikut kumpulan kotak script yang berhasil kami rangkum, secara sederhana buat sahabat jadi sahabat tinggal pilih dan mampu dipasang pada postingan sahabat masing-masing.

//'. Kotak text- center/tulisan di tengah bayang-bayang/hidden.

<div style="background-color: deepskyblue; border-radius: 7px; box-shadow: 10px 10px 0 rgba(0 , 0 , 0 , 0.16) , 0 2px 10px 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>

Keterangan dari atas hingga bawah:

kuning -box-shadow/efek-bayangan

Violet    -radius/lengkung>>bisa diatur

Blue      -background>>bisa diatur

Red       - border, solid sisi/ lis>>bisa di atur(warna dan ukuran)

Green   -tinggi (khusus sistem scroll)

//'. Kotak solid-samping kiri/t-align left)

<div style="-moz-border-box: 10px; -webkit-border-box: 10px; background-color: ghostwhite; border-left: 5px solid red; padding: 20px; t-align: left;">
<span style="color: black;"><span style="font-family: &quot;trebuchet ms&quot; , sans-serif;">TULISAN DISINI </span>

//'. Kotak script warna Green  (t-align -left)

<div style="-moz-border-box: 10px; -webkit-border-box: 10px; background-color: #6ddb98; border-left: 7px solid green;  padding: 20px; t-align: left;">
<span style="color: black;"><span style="font-family: 'Trebuchet MS', sans-serif;">TULISAN DISINI </span></div>

//'. Kotak script dengan radius sudut=10px+border-left=10px

<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</div>

//'. Kotak doble-bolder >>vertical/tinggi, menyesuaikan.

.<div style="background-color: azure; border: 3px #1780dd double; padding: 10px; text-align: left;"> TULISAN DISINI<br /></div> 

//'. Kotak dengan radius border 4px >> ukuran dan warna mampu disesuaikan

<div style="-moz-border-radius: 8px; -webkit-border-radius: 8px; background-color: aliceblue; border-radius: 8px; border: 4px solid #999; padding: 10px; t-align: left;">

TULISAN DISINI</div>

//'.Kotak border-dotted 2pk dan warna mampu disesuaikan.

<div style="background-color: lightcyan; border: 2px #1b1a76 dotted; padding: 10px; text-align: left;">

TULISAN DISINI</div>

Demikian cara membuat kotak script dan kotal scroll di artikel blog lengakap arahan html, yang aku berikan semoga bermanfaat bagi sahabat semua, semoga sukse dalam segala urusan Amiin! terimakasi atas kunjungannya baca juga dari carabuatkalian yang lainnya ya kawan ku semua..!!