bantal silikon · jasa seo

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 kode2 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

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://lh4.googleusercontent.com/-20OcWWjnUys/UoH5-kSIcAI/AAAAAAAABNs/qD2oTuhBfPU/s150/Code%2520HTML%2520css.png)
no-repeat center center;}
Save template. Selesai.

Cara membuat kotak script didalam posting blog

Buatlah entri baru atau edit artikel lama kamu.
Lalu klik bagian HTML disebelah Compose.
Lalu ketikan kode ini.

klik disini dan ganti dengan kode script yang ingin kalian masukan

Lalu kembali ke Bagian Compose dan ganti tulisan klik disini dan ganti dengan kode script yang ingin kalian masukan
Setelah itu klik Pratinjau untuk melihat tampilannya. Selesai.

Selanjutnya masuk ke tahap overflow, membuat kotak dengan scroll

Cara membuat Kotak scroll kebawah. Sama seperti cara diatas, lalu tambahkan kode style=”overflow: auto; height: 80px; didalamnya. Contohnya seperti dibawah ini.

Contoh kotak dengan scroll

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

Masukan kode disini.

<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:

Tempat memasukan kode script, html, css dan lain-lain.

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.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s