Cara Membuat Kotak Script dan Kotak Scroll Lengkap di postingan Blog Lengkap kode HTML

Assalamualaikum..wrwb?

Pada saat beraktivitas di blog dengan bahasan tentang kode-kode script HTML memang sangat menyenangkan walau dalam pembuatan artikel sedikit menambah teknik properti lagi seperti: kotak script dan kotak scroll tapi itu tidak masalah demi menambah kreasi website/blog lebih hidup, mau bagaimanpun penguasaan dan trik desain kecil-kecilan ini sangat diperlukan sedikit hingga menjadi besar!!

Fungsi kotak script

Sebenarnya penggunaan kotak script ini jarang dipakai untuk artikel yang basis tentang berita tips masakan pendidikan olahraga, tapi bagi blog yang membahas kode HTML, kode CSS dan tutorial itu sangay cocok agar penyampaian konten acript tidak bercampur dengan teks sekaligus menambah kesan profesional dan tidak berantakan.

Caranya mudah siapa pun bisa apalagi teman, yang lebih dulu memahami bidang ini.

Di bawah ini saya akan merangkum semua ragam kode untuk membuat kotak warna bisa membantu dan menyokong artikel supaya kelihatan lebih rapi, bagus, sangat cocok teman semua untuk pemakaiannya diblog.

MAU COBA..?

Cara pemasangan kotak script di postingan blog

1. Login ke Bloger teman.

2. Buat satu post baru.

3. Pada post edit HTML (ingat! pada mode HTML)

4. Copy dan pastekan kode scripnya pada tempat yang di inginkan, (sekalian mengedit ukuran, warna  sesuai selera)

5. Setelah selesai, silahkan kembali pada Compose, isi kotak dengan tulisan atau script.

6. Selesai! tinggal meneruskan membuat artikelnya.

Langsung saja bagi teman semua yang ingin mendapatkan, atau lagi memerlukan, berikut kumpulan kotak script yang berhasil saya rangkum, secara sederhana, teman tinggal pilih dan bisa dipasang pada postingan.

Info Anda:

Untuk mengganti warna background atau border bisa teman cari warna-warna favorite yang cocok buat teman pilih, untuk merubah warna di

(Kode Warna HTML100 Persen Lengkap Untuk Blog)

Inilah kumpulan Kotak Script dan Kotak scroll bar mudah-mudahan lengkap!

(Semua kode berada dalam kotak masing-masing tinggal mengcopynya)

#. Kotak text- center/tilisan 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>

#. Text center hidden bayang-bayang rendah.

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

Keterangan dari atas sampai 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>

#. Sederhana dengan ghostwhite

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

#Kotak script tanpa lis border-left(warna bisa disesuaikan)

<div style="-moz-border-box: 10px; -webkit-border-box: 10px; background-color: turquoise; border-left: 10px solid #4fee0f; border: 10px; padding: 10px; t-align: left;">Tulis script di sini! </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> </div>

# Kotak dengan singgle padding border black

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

#. Kotak dengan radius border 4px >> ukuran dan warna bisa 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 bisa disesuaikan.

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

#.Kotak dengan border-dashed>>2px

<div style="background-color: mistyrose; border: 2px #610b38 dashed; padding: 10px;">
TULISAN DISINI</div>

#. Kotak radius 10 px webkit-border-doble 4px

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: lightskyblue; border-radius: 10px; border: 4px double #fff; padding: 10px; t-align: left;">
TULISAN DISINI</div>

#. Kotak dengan border padding-outset/t-align 10px

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: darkturquoise; border-radius: 10px; border: 4px outset #fff; padding: 10px; t-align: left;">
TULISAN DISINI&nbsp;</div>

#. Kotak dengan border radius 20px,-border left-right 10px, back ground.

<div style="-moz-border-radius: 20px; -webkit-border-radius: 20px; background-color: ghostwhite; border-left: 10px solid gray; border-radius: 20px; border-right: 10px solid gray; padding: 20px;">
TULISAN DISINI</div>

#. Kotak dashed coral-radius 10px- background- border4px.

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: lightsteelblue; border-radius: 10px; border: 4px dashed coral; padding: 6px; t-align: left;">
TULIS DISINI</div>

#.Kotak dengan doble;padding 3px semua bisa di sesuaikan ukuran dan warna

<div style="background-color: #ffebcd; border: 3px #5f200e double; padding: 10px; text-align: left;">
TULISAN DISINI</div>

#. Kotak script border-top

<div style="-moz-border-box: 10px; -moz-border-box: 10px; -webkit-border-box: 10px; background-color: ghostwhite; border-top: 8px solid red; overflow: auto; padding: 10px; t-align: left; t-color: #CCFFFF;">
TULISAN DISINI</div>

#.Kotak script radius 40px luar-dalam 60px

<div br="" gt="" style="background-color: chocolate; border-radius: 10px; border-radius: 40px; border-radius: 60px; border: 4px double #fff9j99; padding: 10px; t-align: center; t-color: #CCFFFF;">
TULISAN DISINI</div>

#. Kotak doble-dobel

<div br="" gt="" style="background-color: chocolate; border-radius: 10px; border-radius: 40px; border-radius: 70px; border: 4px double #fff999; padding: 10px; t-align: center; t-color: #CCFFFF;">
<div br="" gt="" style="border-radius: 60px; border: 4px double rgb(255, 249, 153); padding: 10px;">
TULISAN DISINI</div>

Pilihan Selanjutnya saya tampilkan pula kode untuk kotak script dengan versi scroll vertical dan scroll Vertical +Horizontal

#. Kotak scroll vertical simple menyesuaikan, beckground polos/putih tinggi 200px bisa di edit

Silahkan pilih yang teman butuhkan

(copy bagian dalam kotak!)

<div style="background-color: white; border: 2px solid gray; height: 100px; overflow: auto; padding: 5px; width: auto;">
 TULSAN DISINI
A
B
C
</div>

-keterangan: tinggi 100px
-lebar menyesuaikan

<div style="background-color: antiquewhite; border: 2px solid blue; height: 100px; overflow: auto; padding: 5px; width: auto;">
TULSAN DISINI
"A
B
C"
</div>

Selanjutnya kotak scroll dengan naik turun dan kmenyamping (vertical + Horizontal)

Scroll box vertikal +Horizontal polos

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

Ini scriptnya untuk scroll vertical+horizontal diatas!

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

#. Kotak scroll/scroll box-vertical+Horizontal background

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

Semua kode untuk membuat kotak script diatas, sudah saya simpan di bagian tengah kotak masing-masing sesuai model + variasi, tinggal di copy, (!)sudah saya coba berulang-ulang, semua lancar digunakan pada artikel, kalau ada kendala mungkin terjadi kasalahan pada tempat pemasangannya kalau sudah dipasang pada mode tempat yang betul, yaitu di edit mode HTML bukan Compose biasanya tak ada kendala.

Alasan kenapa harus pakai di postingan?

1. Dengan memakai kotak script akan lebih rapi karena bisa memisahkan antara text biasa dan kode script, karena tersusun didalam satu kotak, atau box area apa bila membahas tutorial yang harus menampilkan kode script.

2. Akan lebih menarik jika sebagai tempat konten pilihan post terkait, tombol download, atau apasaja karena script box ini bisa di pakai apasaja (pasti yanglain tertarik dan pada mau pake)

3.tidak akan membuat lambat pada loding blog karena kode yang digunakan sangat minimal.

Dalam pemasangannya tentu teman semua sudah pada paham, dan sudah sering membuat, disini saya  cukup sekilas saja.

Gunakanlah kotak scrip sesuai kebutuhan terutama dalam pemakaian di artikel usahakan sesuai dengan kebutuhan, apabila keterangan-keterangan dan ukuran pembuatan kotak di atas kurang dipahami dari ukuran dan warnanya kurang pas dengan selera teman, saya mohon maaf, mungkin bisa di edit sesuai keinginan saja

Demikian cara membuat kotak script dan kotal scroll di artikel blog lengakap kode html, yang saya berikan semoga bermanfaat bagi teman semua, semoga sukse dalam segala urusan Amiin! terimakasi atas kunjungannya baca juga.

Sumber kopas: https://mudahrizki.blogspot.com/2017/02/cara-membuat-kotak-script-di-postingan-blog.html