Cara Membuat Kotak Script di Postingan Blog/Website
Tutorial membuat kotak script di tulisan blog ini aku buat sekadar latihan, sekaligus menaruh arsip untuk aku jadikan referensi buat diri sendiri. Namun semoga termasuk bisa berguna bagi siapa saja yang mendambakan mempercantik blog-nya.
Selain untuk mempermudah pembaca memahami tulisan kita, halaman postingan juga akan telihat rapi dan terkesan lebih elegan. Sehingga pembaca bisa membedakan mana script dan mana artikelnya. Tentu membuat kotak script di postingan blog itu menjadi bagian yang sangat penting.
Kotak script atau text box adalah sebuah kotak spesifik yang dapat digunakan untuk meletakkan kode script HTML, CSS, Java script, atau bahasa pemograman lainnya.
Tidak cuma itu, kotak script juga dapat digunakan untuk catatan mutlak atau postingan penegasan terhadap postingan di blog.
Sebetulnya kotak script sendiri cuma sebuah text box biasa terhadap umumnya. Namun bersama dengan memicu kotak script di postingan blog, konten yang ditampilkan akan lebih profesional.
Jadi tidak tercampur pada kode script bersama dengan wrapper (tulisan artikel). Bisa dikatakan kotak script semacam kutipan atau blockquote.
Secara default, platform Blogspot dan Wordpress tiap-tiap theme telah menyediakan fitur “blockquote”.
Kita cuma tinggal menseting, bersama dengan langkah drag paragraf-nya dan klik “tanda kutip dua” di anggota toolbar terhadap panel postingan. Hanya saja layout-nya tidak cukup menarik (menurut saya). Dan modelnya juga cuma itu-itu saja.
Berbeda bersama dengan blockquote, langkah memicu kotak script di postingan blog kita kudu mengimbuhkan kode script-nya secara manual ke anggota HTML terhadap postingan. Dan kita dapat modifikasi bersama dengan beraneka macam gaya.
Contoh kotak script simple di postingan blog :
Cara Membuat Kotak Script di Postingan Blog/Website – Sulistia-One
Berikut Scrip untuk membuat teks di atas
<div style="background-color: #ffe599; border: 4px dotted rgb(255, 255, 255); color: #cc0000; line-height: 1.5em; padding: 5px;"> <div style="background-color: #6ddb98; padding: 10px; text-align: center;"> Cara Membuat Kotak Script di Postingan Blog/Website – Sulistia-One</div></div>
Namun sebelum saat kami masuk ke langkah membawa dampak kotak script di postingan blog, lebih-lebih dahulu kami mempelajari kode script yang dapat kami gunakan, dan memandang preview gambar kotak script-nya.
Kotak Script sederhana tanpa lis border
<div style="background-color: turquoise; padding: 10px; text-align: left;"> Tulis script anda di sini..! </div>
Kotak Script dengan single-border solid 2px
<div style="background-color: ivory; border: 2px solid black; padding: 10px; text-align: left;"> Tulis script anda di sini..! </div>
Kotak Script dengan single-border solid 4px
<div style="background-color: #f3f3f3; border: 4px solid #999; padding: 10px; t-align: left;"> Tulis script anda di sini..! </div>
Kotak Script dengan double-border
Tulis script anda di sini..!
Kotak Script dengan top-border
<div style="background-color: ghostwhite; border-top: 8px solid red; overflow: auto; padding: 10px; t-align: left;"> Tulis script anda di sini..! </div>
Kotak Script dengan left-border
<div style="background-color: #f3f3f3; border-left: 10px solid #2288dd; padding: 10px; t-align: left;"> Tulis script anda di sini..! </div>
Kotak Script dengan dotted-border (garis titik-titik/dots)
<div style="background-color: #ffebcd; border: 3px Red Dotted; padding: 5px; text-align: left;"> Tulis script anda di sini..! </div>
Kotak Script dengan dashed-border (garis putus-putus)
<div style="background-color: palegreen; border: 5px #1780dd Dashed; padding: 5px; text-align: left;"> Tulis script anda di sini..! </div>
Kotak Script dengan inset-border (seperti tertanam pada halaman postingan)
<div style="border: 4px #02d144 inset; padding: 10px; background-color: #d5839f; text-align: left;"> Tulis script anda di sini..! </div>
Kotak Script dengan outset-border (seperti keluar dari halaman postingan)
<div style="background-color: white; border: 3px #1780dd outset; padding: 10px; text-align: left;"> Tulis script anda di sini..! </div>
Kotak Script dengan ridge-border (seperti timbul)
<div style="background-color: #dde5d1; border: 3px Blue Ridge; padding: 5px; text-align: left;"> Tulis script anda di sini..! </div>
Kotak Script dengan groove-border (seperti masuk ke dalam halaman postingan)
<div style="background-color: white; border: 3px Pink Groove; padding: 5px; text-align: left;"> Tulis script anda di sini..! </div>
Note :
- background-color (warna kotak script)
- border-color (warna garis border)
- border : (..)px (ketebalan garis border)
- text-align (posisi script).
Nah kira-kira seperti itu cara membuat kotak script sederhana di postingan blog/website.
Selanjutnya silahkan berkreasi sendiri untuk warna, bentuk dan ukuran kotak script bisa kita custom sesuka kita.
Terimakasih sudah berkunjung.
0 Response to "Cara Membuat Kotak Script di Postingan Blog/Website"
Posting Komentar