Membuat kotak script HTML menggunakan CSS atau Style untuk postingan tutorial blog

Selain memuat informasi seputar pendidikan, situs Supervba juga berbagi tutorial dunia internet termasuk tutorial adsense dan blog khususnya blogger. Kami berusaha membagikan tutorial yang sudah pernah diterapkan pada blog supervba dan blog kami lainnya. Tutorial yang kami tulis bukan sekedar untuk berbagi informasi kepada sahabat supervba saja. Namun setiap tutorial yang kami tayangkan dijadikan sebagai rekam jejak pengalaman admin dalam mengelola blog termasuk melakukan kustomisasi terhadap template blog. Sehingga saat kami membutuhkan informasi atau tutorial blog tertentu, kami tidak perlu mencari ke blog lain. Tapi cukup mencari tutorial blog tersebut di halaman Supervba ini.

Materi tutorial blog termasuk materi yang lumayan menguras waktu saat menulisnya. Ini karena kami tidak hanya cuma menulis teks Bahasa Indonesia pada umumnya. Tapi juga harus menulis kode atau script HTML di setiap postingan tutorial blog.

Kode atau script HTML sebaiknya ditulis dengan rapi. Salah satu caranya dengan memberikan dasar (background) atau kotak script HTML yang menarik. Untuk membuat kotak script HTML di postingan blog ada 2 cara yaitu:

1. Menambahkan CSS atau style dari mode HTML di postingan blog.
2. Melalui edit HTML template dengan menambahkan CSS atau style dan javascript.

Membuat kotak script html di postingan blog menggunakan css

Kali ini kita akan menggunakan langkah nomor 1 di atas yaitu menambahkan CSS atau style HTML langsung di postingan blog. Bagaimana cara membuat kotak script HTML di postingan blog dengan CSS atau Style ?.

Kotak script HTML pada dasarnya menggunakan kodeHTML "border". Macam jenis border HTML sebagai berikut.

• Solid Border
• Ridge Border
• Inset Border
• Outset Border
• Double Border
• Dotted Border
• Dashed Border

Berikut ini ada beberapa model kotak script HTML postingan blog yang bisa dipilih. Silahkan pilih modelnya sesuai template blog kamu supaya terlihat menyatu. Nah berikut cara membuat kotak script HTML di postingan blog dengan CSS atau Style.

1. Pilih salah satu model kotak kotak script HTML yang ada di bawah.
2. Buka postingan blog pada mode HTML.
3. Ketikkan ulang kode kotak script HTML yang kamu pilih. Untuk lebih cepat kamu bisa copy-paste dari halaman ini.
4. Publikasikan/perbarui postingan blog.


Membuat kotak script HTML di postingan menggunakan CSS - Model 1

<div style=”border: 1px solid #444; padding: 10px; background-color: #eaeaea; text-align: left;”>
Kode Script Anda Di Sini
</div>

<div style=”-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #f3f3f3; border-left: 5px solid #2288dd; border-radius: 10px; padding: 10px; t-align: left;”>Kode Script Anda Disini</div>

Keterangan

• border:1px berarti tebal border sebesar 1 px
• border-left 5px adalah border sebelah kiri dengan tebal 5 px
• border radius : 10 px untuk mengatur sudut lengkungan border sebesar 10px.
• Solid menunjukkan jenis border. Kamu bisa ganti dengan jenis border HTML yang lain.
• #444 adalah warna dari border HTML
• padding : 10px adalah jarak teks dengan border HTML
• background-color adalah warna background/latarbelakang.
• text-align:left adalah jenis perataan teks dalam border. Kamu bisa ganti dengan yang lain: right, center, atau justify.

Membuat kotak script HTML di postingan menggunakan CSS - Model 2

1. Jenis Border HTML : Solid Border

<div style=”border: 2px #006400 solid; padding: 10px; background-color: GOLD; text-align: left;”> TULIS KODE/SCRIPTNYA DISINI</div>

<div style=”-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #f3f3f3; border-radius: 10px; border: 4px solid #999; padding: 10px; t-align: left;”>Kode Script Anda Disini</div>

2. Jenis Border HTML : Ridge Border

<div style=”border: 2px #006400 ridge; padding: 10px; background-color: GOLD; text-align: left;”> TULIS KODE/SCRIPTNYA DISINI</div>

3. Jenis Border HTML : Inset Border

<div style=”border: 2px #006400 inset; padding: 10px; background-color: GOLD; text-align: left;”> TULIS KODE/SCRIPTNYA DISINI</div>

<div style=”border: 2px #006400 inset; padding: 10px; background-color: #d5839f; text-align: left;”> Kode Script Anda Disini</div>

4. Jenis Border HTML : Outset Border

<div style=”border: 2px #006400 outset; padding: 10px; background-color: GOLD; text-align: left;”> TULIS KODE/SCRIPTNYA DISINI</div>

<div style=”-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #a2c4c9; border-radius: 10px; border: 4px outset #fff; padding: 10px; t-align: left;”>Kode Script Anda Disini</div>

5. Jenis Border HTML : Double Border

<div style=”border: 2px #006400 double; padding: 10px; background-color: GOLD; text-align: left;”> TULIS KODE/SCRIPTNYA DISINI</div>

<div style=”border: 3px #5f200e double; padding: 10px; background-color: #82CAFA; text-align: left;”> Kode Script Anda Disini</div>

<div style=”-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #6fa8dc; border-radius: 10px; border: 4px double #fff; padding: 10px; t-align: left;”>Kode Script Anda Disini</div>

6. Jenis Border HTML : Dotted Border

<div style=”border: 2px #006400 dotted; padding: 10px; background-color: GOLD; text-align: left;”> TULIS KODE/SCRIPTNYA DISINI</div>

<div style=”border: 2px #1B1A76 dotted; padding: 10px; background-color:#c2c2c2; text-align: left;”> Kode Script Anda Disini</div>

7. Jenis Border HTML : Dashed Border

<div style=”border: 2px #006400 dashed; padding: 10px; background-color: GOLD; text-align: left;”> TULIS KODE/SCRIPTNYA DISINI </div>

<div style=”border: 2px #610B38 dashed; padding: 10px; background-color:#57AA52; tex>t-align: left;”>Kode Script Anda Disini</div>

<div style=”-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #ffe599; border-radius: 10px; border: 2px dashed #aaa; padding: 10px; t-align: left;”>Kode Script Anda Disini</div>

Keterangan

• border:2px berarti tebal border sebesar 2 px
• border radius : 10 px untuk mengatur sudut lengkungan border sebesar 10px.
• padding : 10px adalah jarak teks dengan border HTML
• background-color adalah warna background/latarbelakang.
• text-align:left adalah jenis perataan teks dalam border. Kamu bisa ganti dengan yang lain: right, center, atau justify.

Membuat kotak script HTML di postingan menggunakan CSS - Model 3

Kotak script HTML dengan tombol scroll untuk menggulung layar

<div style=”border: 2px #006400 solid; padding: 10px; background-color: GOLD; overflow: auto; height: 100px; width: 300px; text-align: left;”>TULIS KODE/SCRIPTNYA DISINI </div>

Keterangan

• height:100px berarti tinggi border sebesar 100 px. Kamu bisa sesuaikan dengan kebutuhanmu.
• width:300px adalah lebar border sebesar 300px. Kamu bisa sesuaikan dengan kebutuhanmu.

Membuat kotak script HTML di postingan menggunakan CSS - Model 4

Kodenya ini:

<div align="left"><textarea cols="80" name="code" rows="10"> Kode HTML tulis di sini
</textarea></div>

Hasilnya ini:

Kode HTML tulis di sini

Keterangan

• align="left" adalah teks rata kiri. Kamu juga bisa pilih right, center, atau justify.
• cols="80" adalah lebar border. Silahkan atur lagi sesuai kebutuhan.
• rows ="10" adalah banyak baris/tinggi border. Silahkan atur lagi sesuai kebutuhan.

Pemecahan Masalah
Kalau dalam penerapan kode-kode kotak script HTML di atas terjadi kegagalan maka coba ganti tanda petik (" ") dengan menghapusnya dulu kemudian mengetikkan ulang tanda petik tersebut. Ini dimungkinkan terjadi kalau kamu langsung copy-paste kode di atas ke mode HTML blog kamu. Selamat mencoba.

Begitulah cara membuat kotak script HTML menggunakan CSS atau Style untuk postingan tutorial blog. Semoga bermanfaat. Yuk bagikan artikel ini supaya lebih bermanfaat lagi.