Cara Menciptakan Kotak Script Dan Kotak Scroll Lengkap Di Postingan Blog Lengkap Isyarat Html

Assalamualaikum..wrwb?

Pada dikala beraktivitas di blog dengan bahasan ihwal 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 duduk perkara demi menambah kreasi website/blog lebih hidup, mau bagaimanpun penguasaan dan trik desain kecil-kecilan ini sangat dibutuhkan sedikit hingga menjadi besar!!

Pada dikala beraktivitas di blog dengan bahasan ihwal aba-aba Cara Membuat Kotak Script dan Kotak Scroll Lengkap di postingan Blog Lengkap aba-aba HTML

Fungsi kotak script

Sebenarnya penggunaan kotak script ini jarang digunakan untuk artikel yang basis ihwal gosip tips kuliner pendidikan olahraga, tapi bagi blog yang membahas aba-aba HTML, aba-aba CSS dan tutorial itu sangay cocok biar penyampaian konten acript tidak bercampur dengan teks sekaligus menambah kesan profesional dan tidak berantakan.

Caranya gampang siapa pun sanggup apalagi teman, yang lebih dulu memahami bidang ini.

Di bawah ini aku akan merangkum semua ragam aba-aba untuk menciptakan kotak warna sanggup membantu dan menyokong artikel supaya kelihatan lebih rapi, bagus, sangat cocok sahabat 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 aba-aba scripnya pada kawasan yang di inginkan, (sekalian mengedit ukuran, warna sesuai selera)

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

6. Selesai! tinggal meneruskan menciptakan artikelnya.

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

Info Anda:
Untuk mengganti warna background atau border sanggup sahabat cari warna-warna favorite yang cocok buat sahabat pilih, untuk merubah warna di
(Kode Warna HTML100 Persen Lengkap Untuk Blog)

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

(Semua aba-aba 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.

TULISAN DISINI</div>

</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: "trebuchet ms" , 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: "trebuchet ms" , sans-serif;">TULISAN DISINI </span>

#Kotak script tanpa lis border-left(warna sanggup 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 sanggup 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 sanggup 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 </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 sanggup 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 aku tampilkan pula aba-aba untuk kotak script dengan versi scroll vertical dan scroll Vertical +Horizontal

#. Kotak scroll vertical simple menyesuaikan, beckground polos/putih tinggi 200px sanggup di edit
Silahkan pilih yang sahabat butuhkan

(copy bab 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 aba-aba untuk menciptakan kotak script diatas, sudah aku simpan di bab tengah kotak masing-masing sesuai model + variasi, tinggal di copy, (!)sudah aku coba berulang-ulang, semua lancar digunakan pada artikel, kalau ada hambatan mungkin terjadi kasalahan pada kawasan pemasangannya kalau sudah dipasang pada mode kawasan yang betul, yaitu di edit mode HTML bukan ~~Compose~~ biasanya tak ada kendala.

Alasan kenapa harus pakai di postingan?

1. Dengan menggunakan kotak script akan lebih rapi alasannya ialah sanggup memisahkan antara text biasa dan aba-aba script, alasannya ialah tersusun didalam satu kotak, atau box area apa bila membahas tutorial yang harus menampilkan aba-aba script.

2. Akan lebih menarik jikalau sebagai kawasan konten pilihan post terkait, tombol download, atau apasaja alasannya ialah script box ini sanggup di pakai apasaja (pasti yanglain tertarik dan pada mau pake)

3.tidak akan menciptakan lambat pada loding blog alasannya ialah aba-aba yang digunakan sangat minimal.

Dalam pemasangannya tentu sahabat semua sudah pada paham, dan sudah sering membuat, disini aku 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, aku mohon maaf, mungkin sanggup di edit sesuai impian saja

Demikian cara menciptakan kotak script dan kotal scroll di artikel blog lengakap aba-aba html, yang aku berikan semoga bermanfaat bagi sahabat semua, semoga sukse dalam segala urusan Amiin! terimakasi atas kunjungannya baca juga.