Cara membuat kotak script

Sobat-sobat saya yang ganteng-ganteng dan cantik-cantik, pada postingan kali ini saya akan mengangkat topik tentang cara membuat kotak script di dalam artikel, maksudnya adalah tempat berbentuk kotak dimana text script kita tuliskan, dan berada di dalam artikel.

Bagi beberapa orang (termasuk saya di awal-awal ngeblog) terlihat bingung saat ingin menuliskan script/text lainnya di dalam artikel tapi dengan tempat khusus yang membungkusnya (kotak).

http://kendhou.blogspot.co.id/2015/11/membuat-kotak-script-dalam-artikel.html
Tujuan saya pribadi adalah agar script/text tersebut bisa lebih terlihat dari sekian banyak text yang ada di dalam artikel. Dan yang pastinya lagi, text yang kita letakkan dalam kotak khusus akan tampak lebih menarik sekaligus membedakannya dari text lainnya.

Sobat bisa lihat contoh dibawah ini...
Contoh text dalam kotak khusus
Bagaimana Sob???
Terlihat lebih menarik kan?? 

Dan juga contoh ini
Contoh text dalam kotak khusus
Bagaimana Sob???
Terlihat lebih menarik kan??

Sobat bisa memasukkan text apapun di dalam kotak seperti ini

Caranya adalah seperti ini
  • Login ke blogger dengan aku sobat seperti biasanya
  • Buatlah postingan (buat entry baru)
  • Tuliskan text atau script yang akan sobat beri kotak pada menu "Compose" seperti sobat membuat artikel-artikel yang lain
  • Gunakan script ini untuk "pengkotakan" pada text yang sobat inginkan 
  • <div style="border: 3px #1780dd Double; padding: 10px;background-color:#ffffff;
    text-align: left;">
    Ketik tulisan sobat disini</div>
  • Kembali ke Blogger sobat dan pilih HTML
  • Paste script tadi yang sobat copy, Ingat!!! letaknya di bagian HTML bukan Compose
  • Kembali ke Compose untuk melihat hasilnya
Ada beberapa pilihan untuk tampilan kotak yang dapat sobat gunakan dengan script diatas. Penjelasannya sebagai berikut

border: 3px adalah ketebalan garis kotak
1780dd: warna garis kotak
Double: bentuk garis kotak
padding: panjang kotak (kebawah)
background: warna kotak
text-align: left: posisi text didalam kotak, left=kiri

pilihan-pilihan tampilan border adalah Dashed, dotted, Groove, Inset, Outset, Ridge dan Solid. Gunakan yang sobat suka.

Sekarang kita akan menggunakan script lain dalam membuat kotak script/text dalam artikel.

Sobat bisa menggunakan script dibawah yang telah disertai kotak sebagai contohnya

Ini adalah script dengan bentuk kotak seperti yang dapat sobat lihat pada penampilannya

<div style="border: 1px solid #000000; height: 200px; overflow: auto; padding: 5px; width: auto;"> masukkan Text / Script diinginkan </ div> 

Angka 200 dengan warna merah dapat sobat ganti sesuka hati, klik Compose untuk melihat hasilnya. Seperti yang saya gunakan dalam contoh ini, saya rubah angka tersebut menjadi 140

Ada juga script yang di bawah ini

<div>
<div align="center">
<textarea cols="20" name="txt" rows="4" style="height: 50px; width: 200px;" wrap="VIRTUAL">masukkan Text / Script yang diinginkan</textarea></div>

Bagaimana menurut sobat?
Mudah bukan?
Sebagai kata penutup, saya ingin mengucapkan terima kasih kepada blogooblok dan situs 9 yang telah membagikan ilmu ini, meskipun dengan beberapa eksperimen baru saya mengerti benar... Semoga bermanfaat bagi sobat-sobat sekalian
Salam Pintar...  

Berlangganan update artikel terbaru via email:

2 Responses to "Cara membuat kotak script"

  1. Replies
    1. Jangan panggil mastah dong, saya juga masih pemula kok. By the way... thanks juga buat komentarnya.
      Semoga bermanfaat, itu point pentingnya.
      Happy blogging...

      Delete

Terima kasih atas kunjungannya...
Pertanyaan, pendapat,serta saran dan masukan dapat sobat tuliskan pada kolom komentar yang tersedia. Harap menggunakan bahasa yang baik dan sopan.
Mohon maaf, segala bentuk SPAM dan mengandung unsur SARA akan kami hapus.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel