Menampilkan text box pada postingan blog biasanya digunakan oleh penulis blog yang isi postingannya menjelaskan tentang suatu script ataupun memang tema blog tersebut membahas pembelajaran tutorial komputer yang perlu menggunakan text boxt untuk bahan script yang dijelaskannya.
Alasan kenapa harus pakai Kotak Script di postingan?
- Dengan memakai kotak script akan lebih rapi karena bisa memisahkan antara text biasa dan kode script, karena tersusun didalam satu kotak, atau box area apa bila membahas tutorial yang harus menampilkan kode script.
- Akan lebih menarik jika sebagai tempat konten pilihan post terkait, tombol download, atau apa saja karena script box ini bisa di pakai apa saja (pasti yang lain tertarik dan pada mau pake)
- Tidak akan membuat lambat pada loding blog karena kode yang digunakan sangat minimal.
Gambar contoh - Script Text-Box (BroHabir)
Manfaat Script Text-Box
Manfaat dari script text-box ini sendiri, berfungsi sebagai box atau kotak yang dimana dikotak tersebut terdapat scroll-box yang membuat text yang berada di box tersebut bisa dituliskan sepanjang-panjangnya script tanpa menampilkan banyak text pada wrapper atau isi artikel..
Script Text-Box 1
<div style="background-color: #111; border-radius: 5px; height: 100px; overflow: auto; padding: 10px; text-align: left; width: auto;">
<br /></div>
Script Text-Box 2
<div style="background-color: #444444; border-radius: 0px; border: 5px solid #ff0000; height: 100px; overflow: auto; padding: 10px; text-align: left; width: auto;">
<br /></div>
Script Text-Box 3
<div style="background-color: #3d3627; border-radius: 0px; border: 1px solid #000; height: 100px; overflow: auto; padding: 10px; text-align: left; width: auto;">
<br /></div>
Script Text-Box 4
<div style="background-color: #000; border-radius: 0px; border: 2px dashed #fff; height: 100px; overflow: auto; padding: 10px; text-align: left; width: auto;">
<br /></div>
Script Text-Box 5
<div style="background-color: #2b3b44; border-radius: 0px; border: 2px dotted #fff; height: 100px; overflow: auto; padding: 10px; text-align: left; width: auto;">
<br /></div>
Script Text-Box 6 (sudut melengkung)
<div style="background-color: #ffe599; border-radius: 20px; border: 4px groove rgb(170, 170, 170); padding: 10px;"> Tulis script anda di sini..! </div>
Script Text-Box 7 (sudut melengkung)
<div style="background-color: #6fa8dc; border-radius: 20px; border: 2px solid rgb(178, 34, 34); padding: 10px; text-align: center;"> Tulis script anda di sini..! </div>
Script Text-Box 8 (sudut melengkung)
<div style="background-color: #f3f3f3; border-left: 10px solid rgb(34, 136, 221); border-radius: 20px; padding: 10px; text-align: left;"> Tulis script anda di sini..! </div>
Script Text-Box 9 (efek bayangan)
<div style="background-color: lemonchiffon; border-radius: 7px; box-shadow: rgba(0, 0, 0, 0.157) 10px 10px, rgba(0, 0, 0, 0.118) 10px 2px 10px 0px; padding: 20px; text-align: center;">Tulis catatan penting di sini..!</div>
Script Text-Box 10 (efek blur)
<div style="background-color: lemonchiffon; border-radius: 7px; box-shadow: rgba(0, 0, 0, 0.157) 10px 10px 15px, rgba(0, 0, 0, 0.118) 0px 2px 10px 0px; padding: 20px; text-align: center;">Tulis catatan penting di sini..!</div>
Script Text-Box 11 (efek drag)
Cara Penggunaan:
Cara penggunaan script text-box ini tidak sembarangan. Maka dari itu, berikut ini adalah cara penggunaannya:
Blogger Menu → Postingan → Entri Baru (Tempat anda menulis artikel) → Salin kode diatas mulai dari <div hingga </div> → Paste di HTML (Terletak disebelah Compose) → Buka Compose → Isi Box baru ditulis Script atau kodenya.
Posts
