Cara Lengkap Membuat Kotak Script Dan Kotak Sroll Dalam Postingan Blog

Membuat Kotak Script Dan Kotak Scroll

- Penggunaan Kotak Script ini sangat cocok sekali dengan Blog yang membahas tentang kode script html, CSS dan tutorial agar bacaan yang di sampaikan lebih rapih dan tidak bercampur dengan text lainnya, biasanya konten yang di tampilkan jadi profesional dengan embel-embel Script Box, jadi tidak berantakan. Namun sayangnya fitur kotak script dan kotak scroll ini juga sangat jarang dipakai untuk artikel blog yang membahas perihal Gosip, Tips, Kuliner, Pendidikan, Olahraga.

Ada beberapa contoh Kotak Script dan Kotak Scroll atau nama kerennya itu Scroll Box. Dibawah ini Saya telah merangkum semua kode-kode untuk membuat Kotak Script dan Scroll Box, yang mungkin sangat membantu dalam membuat artikel yang membahas kode-kode script, content, atau hal-hal penting lainya, supaya kelihatan lebih rapi dan mengagumkan dengan variasi quot ini, sangat cocok untuk pemakaiannya di Blog sobat.

Kelebihan Dan Kegunaan

* Dengan memakai kotak script akan lebih rapi alasannya yaitu mampu memisahkan antara text biasa dan script html, tersusun didalam satu kotak atau box area. Apa bila artikel sobat membahas tutorial yang harus menampilkan Script Html.

* Akan lebih menarik jika sebagai kawasan konten pilihan post terkait, tombol download, atau yang lainnya. Script Box ini cocok digunakan dalam membuat rumah bagi Script Html agar terlihat lebih rapih dan elegan.

* 25 Jenis Kotak Script ini tidak akan membuat lambat Loading blog alasannya yaitu arahan yang digunakan sangat minimal dan memakai kode yang ringan.

Cara pemasangannya sangat mudah dan tentu sobat semua sudah paham, atau mungkin sudah sudah sering membuat dengan cara versi dan bentuk yang berbeda. Berikut langkah-langkah 25 Jenis Dan Cara Lengkap Membuat Kotak Script Dan Scroll Box Dalam Postingan Blog

Silahkan LOGIN ke Blogger/Wordpress.
Buat postingan baru atau bisa juga mengedit artikel lama.
Sobat bisa menggunakan mode Html pada kolom postingan nya.
Copy dan Pastekan arahan scriptnya pada tempat sesuai yang di inginkan, (edit Ukuran dan Warna sesuai selera)
Setelah selesai, silahkan kembali pada mode Compose, isi kotak dengan konten tulisan sobat.
DONE! lanjut membuat artikelnya.

Langsung saja berikut kumpulan Kotak Script yang Saya rangkum, secara sederhana, tinggal pilih dan sangat cocok dipasang di Blog sobat. Semua arahan berada dalam kotak masing-masing script, sobat tinggal mengcopynya saja.

1. Kotak script border-top

👇Copy Script nya👇
---------------------------------
<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;">MASUKAN TEXT DISINI</div>
____________________

2. Kotak script radius 40px - 60px

👇Copy Script nya👇
--------------------------------
<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;">MASUKAN TEXT DISINI</div>
____________________

3. Kotak script warna Green (t-align -left)

👇Copy Script nya👇
--------------------------------
<div style="-moz-border-box: 10px; -webkit-border-box: 10px; background-color: #6ddb98; border-left: 7px solidgreen; padding: 20px; t-align: left;"><span style="color: black;"><span style="font-family: 'Trebuchet MS', sans-serif;"> MASUKAN TEXT DISINI</span></div>
_____________________

4. Kotak background biru text-center/ tulisan di tengah (bayang-bayang)

👇Copy Script nya👇

---------------------------------

<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;">MASUKAN TEXT DISINI</div>

____________________

5. Kotak background biru text center bayang-bayang rendah.

👇Copy Script nya👇

---------------------------------

<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;">MASUKAN TEXT DISINI</div></div>

_____________________

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

👇Copy Script nya👇
---------------------------------
<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;"> MASUKAN TEXT DISINI</span></div>
_____________________

7. Sederhana dengan ghostwhite

👇Copy Script nya👇
----------------------------------
<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;"> MASUKAN TEXT DISINI</span></div>
_____________________

8. Kotak script tanpa lis border-left (warna mampu disesuaikan)

👇Copy Script nya👇
----------------------------------
<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;"> MASUKAN TEXT DISINI</div>
_____________________

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

👇Copy Script nya👇
----------------------------------
<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;">MASUKAN TEXT DISINI</div>
_____________________

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

👇Copy Script nya👇
----------------------------------
<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;">MASUKAN TEXT DISINI</div>
_____________________

11. Kotak script radius sudut 10px - 10px

👇Copy Script nya👇
----------------------------------
<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;">MASUKAN TEXT DISINI</div>
______________________

12. Kotak doble-bolder >> vertical/tinggi, responsive

👇Copy Script nya👇
----------------------------------
<div style="background-color: azure; border: 3px #1780dd double; padding: 10px; text-align: left;">MASUKAN TEXT DISINI<br /></div> </div>
______________________

13. Kotak dengan single padding border black

👇Copy Script nya👇
----------------------------------
<div style="background-color: ivory; border: 2px solid #444; padding: 10px; text-align: left;">MASUKAN TEXT DISINI</div>
_____________________

14. Kotak dengan radius border 4px >> ukuran dan warna bisa disesuaikan.

👇Copy Script nya👇
----------------------------------
<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;">MASUKAN TEXT DISINI</div>
_____________________

15. Kotak border-dotted 2px, warna bisa disesuaikan

👇Copy Script nya👇
----------------------------------
<div style="background-color: lightcyan; border: 2px #1b1a76 dotted; padding: 10px; text-align: left;">MASUKAN TEXT DISINI</div>
______________________

16. Kotak border-dashed 2px

👇Copy Script nya👇
----------------------------------
<div style="background-color: mistyrose; border: 2px #610b38 dashed; padding: 10px;">MASUKAN TEXT DISINI</div>
_____________________

17. Kotak border radius 20px, border left-right 10px, background

👇Copy Script nya👇
----------------------------------
<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;">MASUKAN TEXT DISINI</div>
_____________________

18. Kotak dashed coral, radius 10px, background border 4px.

👇Copy Script nya👇
----------------------------------
<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;">MASUKAN TEXT DISINI</div>
_____________________

19. Kotak padding 3px responsive

👇Copy Script nya👇
----------------------------------
<div style="background-color: #ffebcd; border: 3px #5f200e double; padding: 10px; text-align: left;">MASUKAN TEXT DISINI</div>
_____________________

20. Kotak double

👇Copy Script nya👇
---------------------------------
<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;">MASUKAN TEXT DISINI</div></div>
_____________________

[ Artikel Populer Lainnya ]
- Cara Mudah Membuat Software Portable
- Cara Membuat Background Di Folder
- Cara Memasang Ads.txt Pada Blogger
- Cara Membuat Website Gratis Untuk Bisnis Online
- Cara Memasang / Mengaktifkan Ads.txt Pada Blogger
- Cara Aktivasi Anonymox FREE Menjadi PREMIUM

Selanjutnya Kotak script versi scroll vertical dan scroll horizontal

1. Scroll box Vertical+Horizontal (background)

MASUKAN TEXT DISINI

👇Copy Script nya👇

---------------------------------

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

2. Scroll box vertical simple responsive, background, polos, tinggi 200px

MASUKAN TEXT DISINI
MASUKAN TEXT DISINI
MASUKAN TEXT DISINI
MASUKAN TEXT DISINI
MASUKAN TEXT DISINI
MASUKAN TEXT DISINI
MASUKAN TEXT DISINI
MASUKAN TEXT DISINI
MASUKAN TEXT DISINI
MASUKAN TEXT DISINI
MASUKAN TEXT DISINI
MASUKAN TEXT DISINI

👇Copy Script nya👇
---------------------------------

<div style="background-color: white; border: 2px solid gray; height: 200px; overflow: auto; padding: 5px; width: auto;">MASUKAN TEXT DISINI</div>

---------------------------------

3. Scroll box horizontal simple responsive, background, polos, tinggi 200px

👇Copy Script nya👇
---------------------------------

<div style="background-color: antiquewhite; border: 2px solid blue; height: 200px; overflow: auto; padding: 5px; width: auto;">MASUKAN TEXT DISINI</div>

----------------------------------

4. Scroll box up-down dan vertical-horizontal (polos)

MASUKAN TEXT DISINI
MASUKAN TEXT DISINI
MASUKAN TEXT DISINI
MASUKAN TEXT DISINI
MASUKAN TEXT DISINI
MASUKAN TEXT DISINI
MASUKAN TEXT DISINI
MASUKAN TEXT DISINI

👇Copy Script nya👇
---------------------------------

<div style="width: 2500%;">MASUKAN TEXT DISINI</div></div>

----------------------------------

5. Scroll box vertical+horizontal 100px

👇Copy Script nya👇
---------------------------------

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

----------------------------------

Semua arahan untuk membuat Kotak Script diatas, sudah tertera di bab tengah kotak masing-masing sesuai model + variasi, tinggal di copy saja. Semua script sudah sering digunakan dalam postingan semua lancar tidak ada yang eror dan dapat digunakan, kalau ada kendala mungkin terjadi karena kasalahan penempatan pada pemasangan.

Gunakanlah kotak script ini sebagai bahan tata ruang blog sobat agar terlihat lebih rapih dan menjadi blog yang berkelas dimata para pembaca/visitor. Demikian penjelasan tentang 25 Jenis Dan Cara Lengkap Membuat Kotak Script Dan Scroll Box Dalam Postingan Blog

Semoga bermanfaat bagi sobat semua, salam sukses para blogger blogger indonesia maupun mancanegara :D
Source : Bacarial.Com

Cari Blog Ini

raflesia info

Cara Lengkap Membuat Kotak Script Dan Kotak Sroll Dalam Postingan Blog

Komentar

Posting Komentar

Postingan populer dari blog ini

Puisi Untuk Kekasih