follow ehpedia.com di facebook follow ehpedia.com di twitter follow ehpedia.com di google plus

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.

2 Cara Membuat Kotak Script Dalam Posting Secara Manual atau Otomatis

di 05 March, 2015 - 07:33 dengan 1 komentar

artikel terkait lainnya

1 komentar

  1. Terimakasih, saya banyak dpt pelajaran dari membaca postingan ini, salam kenal dari saya admin blog RPP, thanks

    ReplyDelete

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

Contact Form

Name

Email *

Message *