Cara Membuat Kotak script dan Kotak Scroll di Artikel Blog Lengkap Kode Html

Assalamualaikum..wrwb?

Pada ketika beraktifitas di blog dengan bahasan perihal kode-kode script HTML memang sangat menyenangkan walau dalam pembuatan artikelnya sedikit menambah proferti lagi, yaitu kotak script, atau juga kotak scroll, tapi tak problem tapi demi menambah kreasi ngeblog,  mau bagaimanpun penguasaan dan tehknik disain kcil-kecilan ini sangat diharapkan sedikit.

Fungsi kotak script:
Sebenarnya penggunaan kotak script ini jarang dipakai untuk artikel yang basis perihal gosip tips kuliner pendidikan olahraga, tapi bagi blog yang membahas arahan HTML, arahan CSS dan tutorial, ini emang cocok, Agar artikel yang di sampaikan mengenai arahan atau apasaja tidak bercampur dengan text, biasanya konten yang di tampilkan jadi profesional dengan embel-embel script box, jadi tidak berantakan.

Intinya:
Penting gak penting seorang bloger wajib mempunyai keahlian dan di terapkan pemasangan pada artikel.

Caranya mudah siapa saja mampu apalagi teman, yang lebih dulu ngeblog.

Di bawah ini aku akan merangkum semua kode-kode untuk membuat kotak script, yang mungkin sangat membantu dalam membuat artikel yang membahas kode-kode script, conten, atau hal-hal penting lainya, supaya kelihatan lebih rapi dan mengagumkan dengan variasi quot ini, sangat cocok sahabat semua untuk pemakaiannya diblog.

MAU COBA..?

Kelebihan dan kegunaan
1. Dengan memakai kotak script akan lebih rapi alasannya yaitu mampu memisahkan antara text biasa dan arahan script, alasannya yaitu tersusun didalam satu kotak, atau box area apa bila membahas tutorial yang harus menampilkan arahan script.

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

3.tidak akan membuat lambat pada loding blog alasannya yaitu arahan yang digunakan sangat minimal.

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

Cara pemasangan kotak script di artikel blog
Yaitu:
1. join ke Bloger teman.

2. Buat satu post baru.

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

4. Copy dan pastekan arahan 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 membuat 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 mampu dipasang pada postingan.

Info Anda:
Untuk mengganti warna background atau border mampu 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 arahan 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 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>

#. 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 mampu 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 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>

#.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 mampu 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 arahan untuk kotak script dengan versi scroll vertical dan scroll Vertical +Horizontal

#. Kotak scroll vertical simple menyesuaikan, beckground polos/putih tinggi 200px mampu 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 arahan untuk membuat 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 kendala 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.

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 mampu di edit sesuai impian saja

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 Artikel-artikel dari mudahrizki lainya

Sumber http://mudahrizki.blogspot.com/

Share this post