Panduan Cara Membuat Kotak Script Ke Dalam Postingan Blog
Terkadang bagi seorang Bloger karena terlalu sering melihat tampilan blognya seperti itu-itu saja akan merasa adanya rasa bosan. Untuk memperindah tampilan dan postingan terlihat lebih rapih ada tips panduan untuk membuat kotak script yang di sematkan dalam postingan blog. Kotak box sendiri bisa disebut kutipan atau semacam blockquote, namun bisa digunakan untuk menempatkan kode Script sejenis kode HTML, CSS atau bahasa pemograman lainnya.
Biasanya ketika menempatkan kode script ke dalam postingan blog secara langsung diantara isi artikel akan membuat error atau tidak tampil sama sekali. Hal tersebut diakibatkan anda menempatkan kode script tanpa melalui metode HTML. Agar tidak menjadi error maka dibuatlah kotak script yang menjadi pemisah antara isi artikel dan kode script.
Biasanya ketika menempatkan kode script ke dalam postingan blog secara langsung diantara isi artikel akan membuat error atau tidak tampil sama sekali. Hal tersebut diakibatkan anda menempatkan kode script tanpa melalui metode HTML. Agar tidak menjadi error maka dibuatlah kotak script yang menjadi pemisah antara isi artikel dan kode script.
Panduan Cara Membuat Kotak Script Dalam Postingan
Banyak sekali jenis tampilan kotak script yang bisa anda gunakan untuk merubah tampilan artikel anda menjadi lebih rapi dan terlihat keren. Jika anda akan merubah tampilan kotak script sedikit berbeda atau membuat warna yang lain sesuai kesukaan anda maka anda harus mempelajari terlebih dahulu bagaimana cara mengganti warna tampilan kotak script dan mengganti border kotak script tersebut :
- Border adalah untuk suatu garis yang membentuk kotak, ketebalan border bisa anda diganti dengan memperbesar px nya.
- Kode Double (bentuk kotak script) bisa anda ganti dengan menggunakan kode dotted, solid, groove, inset, ridge maupun dashed.
- Padding adalah suatu kode html yang berfungsi untuk menentukan ukuran lebar maupun panjang kotak script dengan cara mengganti ukuran px nya.
- Background Color adalah suatu kode html yang berhubungan dengan warna kotak script itu sendiri (contoh kode warna 6 digit "#7d3c98" dan kode warna 3 digit "#fff")
- Text Align adalah untuk merubah posisi text apakah akan rata kiri kanan atau ditengah dengan mengganti left atau right.
Kode HTML untuk membuat Kotak Script
Ada beberapa contoh buat anda, silahkan ganti tampilan sesuai selera anda baik border atau pun mengganti warna seperti yang sudah admin jelaskan diatas sebelumnya.
Kotak Script Style Minimalis
<div style="border: 1px solid #444; padding: 10px; background-color: #eaeaea; text-align: left;">Kode Script Anda Di Sini</div>
Kotak Script Style Left Border
<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #FEBF80; border-left: 5px solid #FF3300; border-radius: 10px; padding: 10px; t-align: left;">Kode Script Anda Disini</div>
Kotak Script Style Dotted
<div style="background-color: #d580fe; border: 2px #1b1a76 dotted; padding: 10px; text-align: left;">
Kode Script Anda Disini</div>
Kode Script Anda Disini</div>
Kotak Script Style Double
<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>
Kotak Script Style Dashed
<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>
#aaa; padding: 10px; t-align: left;">Kode Script Anda Disini</div>
Kotak Script Style Scroll
<div style="background-color: #82cafa; border: 2px #006400 solid; height: 50px; overflow: auto; padding: 10px; text-align: left; width: 300px;">
Kode Script Anda Disini…… </div>
Kode Script Anda Disini…… </div>
Kotak Script Style Highlight
Kini tampilan blog ku lebih wow karena menggunakan kotak script trims atas panduannya
BalasHapusTerimakasih banyak gan, ternyata bisa divariasi juga ya style nya jadi lebih keren.
BalasHapussama-sama kang uem..hatur nuhun
Hapus