Cara Membuat Kotak Script

blogger kita 1 - Pada saat kita beraktifitas di blog dengan bahasan soal kode-kode script HTML memang sangat menyenangkan walau dalam pembuatan artikelnya sedikit menambah proferti lagi, yaitu kotak script, atau juga kotak scroll, tapi tidak jadi masalah demi menambah kreasi dalam ngeblog,  mau bagaimanpun penguasaan dan tehknik disain kcil-kecilan ini sangat dibutuhkan 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 kami akan menerangkan 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, agar kelihatan lebih rapi dan mengagumkan dengan variasi quot ini.

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 jika 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 loading blog alasannya yaitu arahan yang digunakan sangat minimal.

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

Cara pemasangan kotak script di artikel blog
Yaitu:

1. Masuk ke Bloger Anda.
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 Anda semua yang ingin mendapatkan, atau lagi memerlukan, berikut kumpulan kotak script yang berhasil kami rangkum, secara sederhana, Anda tinggal pilih dan mampu dipasang pada postingan.

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 kami tampilkan juga 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 Anda 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 kami simpan di bab tengah kotak masing-masing sesuai model + variasi, tinggal di copy, (!)sudah kami 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 tidak 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 Anda, kami mohon maaf, mungkin mampu di edit sesuai impian saja.

Demikian cara membuat kotak script dan kotal scroll di artikel blog lengakap arahan html, yang kami berikan semoga bermanfaat bagi Anda semua, semoga sukse dalam segala urusan Amiin!

Share on Facebook

Share on Twitter

Share on Google+

Share on LinkedIn

Subscribe to receive free email updates: