Tips Cara membuat kotak script di dalam postingan blog
September 12, 2020
Kali ini kita akan membuat kotak scrip di dalam postingan, apa itu kotak scrip? Kotak script atau yang biasa disebut text box area, kotak script adalah sebuah kotak yang di dalamnya dapat dimasukkan tulisan atau script code baik yang biasa maupun dengan fungsi scroll agar terlihat rapi dan teratur pada sebuah postingan.
di blogspot, wordpress, atau website sehingga pengunjung pun nyaman ketika sedang membaca artikel yang ada di situs web tersebut. Untuk memasang / membuat kotak html blog kita hanya perlu memasukkan / menambahkan kode script ke dalam posting blog yang dapat kita atur bentuk dan warna kotak script tersebut supaya tampilan nya terlihat keren dan bagus.
Bagaimana cara membuatnya? Pertama kita masuk ke
1. Blogger
2. Buat entri baru
3. Lalu pilih html
1. Salin kode berikut ini
<div style="background-color: white; border: 3px #eeeeee solid; padding: 10px; text-align: left;">
letakan kode Script Disini.</div>
Berikut ini adalah contoh dari kode yang kode html yang kita terapkan dan hasilnya seperti dibawah ini:
Contoh:
2. Kotak script yang bisa di scroll ke atas ke bawah
Tapi kotak script ini belum berwarna, kodenya seperti berikut ini:
<div style="background-color: white; border: 3px #eeeeee solid; padding: 10px; text-align:left;
height: 100px; width: 520px; overflow: auto;">
Letakan Kode Script Disini</div>
Contoh:
3. salin kode berikut dan hasilnya seperti yang terlihat di bawah ini
<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: green; border-radius: 10px; border: 4px double #fff; padding: 10px; t-align: left;">letakan kode Script Disini</div>
Dibawah ini adalah hasil dari kode di atas
Contoh:
4. Contoh:
<div style="border: 3px #1780dd Double; padding: 10px;background-color:#ffffff; text-align: left;"> Kode Script Sobat Disini</div>
5. Contoh:
<div style="border: 1px solid #444; padding: 10px; background-color: #eaeaea; text-align: left;">
Kode Script Sobat Disini</div>
6. Contoh:
7. Contoh:
8. Contoh:
9. Contoh:
10. Contoh:
11. Contoh:
12. Contoh:
13. Contoh:
14. Contoh:
15. Contoh:
itulah beberapa contoh dalam membuat kotak script sederhana di dalam postingan, jika ingin menambahkan scroll pada kotak script tinggal menambahkan height width dan overflow.
Semoga artikel ini bermanfaat buat sobat semua. Jangan lupa jika artikel ini bermanfaat bagikan ke teman-teman yang lain..
di blogspot, wordpress, atau website sehingga pengunjung pun nyaman ketika sedang membaca artikel yang ada di situs web tersebut. Untuk memasang / membuat kotak html blog kita hanya perlu memasukkan / menambahkan kode script ke dalam posting blog yang dapat kita atur bentuk dan warna kotak script tersebut supaya tampilan nya terlihat keren dan bagus.
Bagaimana cara membuatnya? Pertama kita masuk ke
1. Blogger
2. Buat entri baru
3. Lalu pilih html
1. Salin kode berikut ini
<div style="background-color: white; border: 3px #eeeeee solid; padding: 10px; text-align: left;">
letakan kode Script Disini.</div>
Berikut ini adalah contoh dari kode yang kode html yang kita terapkan dan hasilnya seperti dibawah ini:
Contoh:
<div style="background-color: white; border: 3px #eeeeee solid; padding: 10px; text-align: left;">
letakan Kode Script Disini</div>
letakan Kode Script Disini</div>
2. Kotak script yang bisa di scroll ke atas ke bawah
Tapi kotak script ini belum berwarna, kodenya seperti berikut ini:
<div style="background-color: white; border: 3px #eeeeee solid; padding: 10px; text-align:left;
height: 100px; width: 520px; overflow: auto;">
Letakan Kode Script Disini</div>
Contoh:
<div style="background-color: white; border: 3px #eeeeee solid; padding: 10px; text-align: left; height: 100px; width: 295px; overflow: auto;">
letakan Kode Script Disini.</div>
letakan Kode Script Disini.</div>
3. salin kode berikut dan hasilnya seperti yang terlihat di bawah ini
<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: green; border-radius: 10px; border: 4px double #fff; padding: 10px; t-align: left;">letakan kode Script Disini</div>
Dibawah ini adalah hasil dari kode di atas
Contoh:
<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;">letakan Kode Script Disini</div>
4. Contoh:
<div style="border: 3px #1780dd Double; padding: 10px;background-color:#ffffff; text-align: left;"> Kode Script Sobat Disini</div>
<div style="border: 3px #1780dd Double; padding: 10px;background-color:#ffffff; text-align: left;"> letakan kode Script Disini</div>
5. Contoh:
<div style="border: 1px solid #444; padding: 10px; background-color: #eaeaea; text-align: left;">
Kode Script Sobat Disini</div>
<div style="border: 1px solid #444; padding: 10px; background-color: #eaeaea; text-align: left;">
letakan kode Script Disini</div>
letakan kode Script Disini</div>
6. Contoh:
<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;">letakan kode Script Disini</div>
7. Contoh:
<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;">letakan kode Script Disini</div>
8. Contoh:
<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;"> letakan kode Script Disini</div>
9. Contoh:
<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;"> letakan kode Script Disini</div>
10. Contoh:
<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;">letakan kode Script Disini</div>
11. Contoh:
<div style="border: 2px #610B38 dashed; padding: 10px; background-color:#57AA52; tex>t-align: left;">letakan Kode Script Disini</div>
12. Contoh:
<div style="border: 2px #1B1A76 dotted; padding: 10px; background-color:#c2c2c2; text-align: left;"> letakan Kode Script Disini</div>
13. Contoh:
<div style="border: 2px #006400 inset; padding: 10px; background-color: #d5839f; text-align: left;"> letakan Kode Script Disini</div>
14. Contoh:
<div style="border: 3px #5f200e double; padding: 10px; background-color: #82CAFA; text-align: left;">letakan Kode Script Disini</div>
15. Contoh:
<span style="color: yellow;"><div id="sample" style="background-color: green; border: 1px solid black; height: 200px; width: 325px;">
itulah beberapa contoh dalam membuat kotak script sederhana di dalam postingan, jika ingin menambahkan scroll pada kotak script tinggal menambahkan height width dan overflow.
Semoga artikel ini bermanfaat buat sobat semua. Jangan lupa jika artikel ini bermanfaat bagikan ke teman-teman yang lain..