05 March, 2015

2 Cara Membuat Kotak Script Dalam Posting Secara Manual atau Otomatis

2 Cara Membuat Kotak Script Dalam Posting Secara Manual atau Otomatis - Kali ini saya akan berbagi kode HTML untuk menempatkan kotak script dalam sebuah posting blog. Biasanya kotak ini digunakan oleh para blogger jika ingin menyisipkan serangkaian script atau kode html ke dalam postingnya. 

Ataupun dalam penerapannya terkadang kotak script ini juga biasa digunakan untuk menyisipkan serangkaian kalimat kutipan di dalam sebuah posting agar terlihat jelas bahwa kalimat tersebut merupakan sebuah kutipan. Yang jelas kode ini multi fungsi, tergantung sang penulis mau menggunakannya untuk apa.


Kali ini sendiri saya akan share 2 cara membuat kotak script dalam posting, diantaranya:
Cara 1. Membuat kotak script dalam posting secara manual
Cara 2. Membuat kotak script dalam posting secara Otomatis dengan Block quote

Oke langsung saja kita masuk ke cara pertama.


Cara 1. Membuat kotak script dalam posting secara manual
Dibawah ini adalah kode html untuk kotak script dalam posting, sekaligus contoh DEMO nya:
<div style="background-color: #efefef; overflow: auto; padding: 15px; width: auto; height: auto">
KETIK TEKS ANDA DISINI
</div>

Keterangan :
  • #efefef adalah kode warna background (sesuaikan dengan warna pilihan anda)
Cara menerapkannya :
  • kode html diatas harus diketik pada posting mode HTML, ingat bukan Compose.
  • Sebelum posting di publikasikan, periksa hasilnya dalam mode Compose. 
Jika kode HTML atau teks yang ingin disisipkan memiliki baris yang banyak sehingga tinggi, lalu anda ingin kotak scriptnya memiliki scroll (agar posting terlihat rapi), maka ganti kode height: auto dengan kode height: 100px  (sesuaikan tingginya dengan keinginan anda). Sehingga kodenya menjadi seperti ini.
<div style="background-color: #efefef; overflow: auto; padding: 15px; width: auto; height: 100px">
maka jika diterapkan hasilnya akan terlihat seperti ini.

contoh 

 
Cara 2. Membuat kotak script dalam posting secara Otomatis dengan Block quote
Yang dimaksudkan block quote disini adalah fitur yang disediakan secara default oleh blogger untuk membuat kalimat kutipan dalam postingan dengan sekali klik (tanpa edit html lagi). Block quote ini letaknya berada di bar sudut kanan atas dalam halaman entri posting baru yang iconnya berupa tanda kutip 2 (").  
Cara penerapannya:
  • letakan kode css ini ke dalam template anda. Cari kode .post-body blockquote , lalu ganti dengan kode dibawah ini.
.post-body blockquote {background-color: #efefef; height: auto; overflow: auto; padding: 15px; width: auto;}
  • Untuk memanggilnya dalam postingan maka anda hanya perlu mengetik script atau kalimat yang ingin disisipkan dalam kotak script, lalu blok script tersebut dan klik tombol block quote yang terletak pada sudut kanan atas bar dalam halaman entri posting baru, yang diwakili dengan icon tanda kutip (").
Ok, Demikian artikel 2 Cara Membuat kotak script Dalam Posting Secara Manual dan Otomatis.
Good luck dan Silahkan kirim komentar jika Anda memiliki pertanyaan.

Artikel Terkait

2 Cara Membuat Kotak Script Dalam Posting Secara Manual atau Otomatis
4/ 5
Oleh

Berlangganan

Suka dengan artikel di atas? Silakan berlangganan gratis via email

Mari berkomentar dan berbagi info atau pengalaman Anda. Dan jangan SPAM!