Cara memasukan kode HTML, Css, Script diposting blog

Untuk memasukan kode html, css, script diposting blog sebenarnya bisa dapat ditulis secara langsung seperti kita menulis artikel seperti biasa. Tapi dibeberapa blog ada yang tidak dapat menuliskannya secara langsung, seperti menulis kode ]]></b:skin>. Pada saat diketik mungkin bisa, tapi pada saat dipublikasikan, yang tampil hanya kode ]]> ini saja.

Kejadian ini saya alami pada saat menggunakan template simple. Terus saya cari tau, kesalahannya dimana. Ternyata kesalahannya ada di pengaturan Setelan entri yang ada disebelah kanan pada saat kita menulis artikel. Jika kamu mengalami hal yang sama. Buka entri baru/atau entri lama kamu, lalu klik pengaturan Setelan Entri > Pilihan > mode tulis > pilih Tunjukan HTML apa adanya dan klik selesai. Maka kode² yang kita tulis secara langsung diposting blog akan terlihat.

Selanjutnya, agar tampilan kode html, css, script diblog kita terlihat rapi. Kita dapat memasukannya ke dalam satu kotak script. Berikut caranya.

Pembuatan kotak script

1. Pertama, copi kode dibawah ini, lalu pastekan diatas ]]></b:skin>  
.kotak {
padding:10px;
margin-top:5px;
margin-bottom:10px;
border-left: 10px solid #0b5394;
border-top:1px solid #ddd;
border-bottom:1px solid #eee;
border-right:1px solid #eee;
box-shadow:0px 3px 3px #aaaaaa;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhE0b0NhBK-AEuSuux3jE5tGe7Zl_nA1XDpUc5cFoT4R_d-s5QyGfnsbHKlBwhNH7OtvPzs83fwD1hPcXHkUtcbdgH9S1mzVbYhyaf1dD0Dw-tn7LD8JaX1-AOcdKIE4G6rruNUU9S1EJs8/s150/Code%2520HTML%2520css.png)
no-repeat center center;}
2. Save template. Selesai.

Cara membuat kotak script didalam posting blog

1. Buatlah entri baru atau edit artikel lama kamu. 
2. Lalu klik bagian HTML disebelah Compose.
3. Lalu ketikan kode ini.
<div class="kotak">
klik disini dan ganti dengan kode script yang ingin kalian masukan
</div>
4. Lalu kembali ke Bagian Compose dan ganti tulisan klik disini dan ganti dengan kode script yang ingin kalian masukan 
5. Setelah itu klik Pratinjau untuk melihat tampilannya. Selesai.

 Selanjutnya masuk ke tahap overflow, membuat kotak dengan scroll

1. Cara membuat Kotak scroll kebawah. Sama seperti cara diatas, lalu tambahkan kode style="overflow: auto; height: 80px; didalamnya. Contohnya seperti dibawah ini.
<div class="kotak" style="overflow: auto; height: 80px;" >
Contoh kotak dengan scroll
</div>


2. Cara membuat kotak scroll kesamping.
Contoh penggunaan kotak denga scroll kesamping. Copi kode dibawah ini dan tempatkan dibagian HTML seperti cara diatas.

<div class="kotak" style="overflow-x: scroll; overflow-y: hidden; padding: 10px; width: 540px;" >
<p style="width:450%;">Masukan kode disini.
</p></div><br />

Pada saat kita menulis artikel warna dari kotak script tidak terlihat, api pada saat kita Pratinjau atau publikasikan, barulah kotak dengan warna tersebut akan terlihat. Agar kita tidak bingung, sebaiknya pada saat menuliskan kode kotak di HTML(sebelah compose), tambahkan juga tulisan dimana tempat memasukan kodenya. Contoh:

<div class="kotak">
Tempat memasukan kode script, html, css dan lain-lain.
</div>

Dengan begitu, tulisan yang akan tampil dihalaman Compose adalah tulisan Tempat memasukan kode script, html, css dan lain-lain. Tinggal kita klik lalu ganti dengan kode yang ingin kita masukan. Selesai.

Silakan dibaca juga artikel tentang fungsi border dan penggunaannya diblog yang dapat digunakan untuk mengganti tampilan kotak script dengan tampilan lain. Semoga bermanfaat.

Tweet