Cara Membuat Kotak Script Keren Dalam Postingan Blog

Halo Temans Selamat saat ini untuk semuanya, sebagai salah seorang penggemar blogger sudah seharusnya kita mengetahui bagian bagian tertentu dalam ngeblog untuk mempercantik tampilan blog kita agar sesuai yang diharapakan. Salahsatunya adalah mengetahui bagaimana caranya membuat sebuah kotak agar blog kita terlihat lebih rapih dan terfokus

Dengan sebuah kotak, kita bisa memperjelas suatu tulisan khusus dan bisa juga digunakan sebagai alat pemisah agar tampilan blog kita tidak semberawut antara topik yang satu dengan topik lainnya. Selain itu kita juga bisa memanfaatkannya untuk memisahkan widget-widget yang ada di blog kita

Bagi anda yang memang memerlukan script html membuat sebuah kotak untuk keperluan blog anda, disini saya akan memberikan kode-kode contoh untuk membuat berbagai macam bentuk kotak yang bisa sobat pilih sesuai selera dan silahkan sobat sesuaikan sendiri untuk pengaturan ukuran, warna, ketebalan dan yang lainnya agar benar benar cocok dengan keinginan anda

1. KOTAK DUA GARIS

<div style="background-color: white; border: 3px black double; padding: 10px; text-align: left;"> MASUKAN TULISAN DISINI </div>

2. KOTAK SATU GARIS

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

MASUKAN TULISAN DISINI </div>

Atau bisa juga menggunakan kode ini :

<div style="border: 1px solid #CCC; margin: 5px 0px; padding: 5px; width: auto; height: auto; background-color: #FBFBEE; text-align: left;">

MASUKAN TULISAN DISINI </div>

3. KOTAK TITIK TITIK

<div style="background-color: white; border: 2px black dotted; padding: 10px; text-align: left;">

MASUKAN TULISAN DISINI </div>

4. KOTAK SCROLL VERTICAL

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

5. KOTAK SCROLL VERTICAL + HORIZONTAL

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

<div style="width: 2500%;">

MASUKAN TULISAN DISINI </div>

Itulah lima (5) script html untuk membuat model kotak yang bisa sobat edit lagi kodenya mulai dari ketebalan, warna, ukuran dan lainnya .. dengan kode sederhana ini diharapkan sobat bisa bereksperimen sendiri agar tampilan kotaknya menjadi terlihat lebih cantik dan menarik

Disini kita akan mencoba satu contoh membuat sebuah kotak yang sudah di sesuaikan agar terlihat lebih menarik dan sesuai dengan judul postingan ini ... 😅

Berikut adalah tampilan bentuk kotaknya :

Untuk memasang bentuk kotak seperti gambar diatas, silahkan sobat copy paste kodenya dibawah ini, dan jika dirasa kurang memuaskan, sobat bisa mengeditnya kembali

<div style="margin: 10px 10px 40px 7px;     padding: 15px;     border: 1px solid #CCCCCC;  -webkit-border-radius: 0 20px 0 20px;     border-radius: 0 20px 0 20px;     background: #FEFFE6;   

-webkit-box-shadow: 1px 1px 5px 5px rgba(204, 204, 204, 0.5);     box-shadow: 1px 1px 5px 5px rgba(204, 204, 204, 0.5);   

-webkit-transition: all 0.5s ease-in-out;   

-moz-transition: all 0.5s ease-in-out;   

-ms-transition: all 0.5s ease-in-out;   

-o-transition: all 0.5s ease-in-out;     transition: all 0.5s ease-in-out;"> MASUKAN TULISAN DISINI </div>

Ingat untuk pemasangan kode-kode diatas harus di dalam mode HTML bukan di mode Compose kecuali mengganti tulisan " MASUKAN TULISAN DISINI " ini boleh di mode Compose

Lihat keterangan dibawah :

- Memasang kode script di mode HTML

- Mengganti tulisan " MASUKAN TULISAN DISINI " bisa di mode Compose dan boleh juga di mode HTML

Setelah menguasai cara membuat kotak pada blog, sobat bisa bereksperimen lebih jauh lagi dan mencoba-coba tulisan / gambar mana saja yang sekiranya ingin sobat tambahkan sebuah kotak. Selamat berkreasi kawan ...

Demikianlah Cara Membuat Kotak Script Keren Dalam Postingan Blog

Terimaksih atas kunjungannya dan semoga bermanfaat

Referensi: kubis.online, sanygames-online.blogspot.com