Cara Gampang Menciptakan Kotak Untuk Menaruh Script Di Dalam Postingan

Anda pernah memiliki duduk masalah untuk menaruh instruksi Script? Karena kalau hanya memakai blockquote itu akan memakan kawasan yang sangat panjang..

Untuk itu kita akan membahas wacana cara menciptakan kotak script dalam postingan blog

Ada dua tipe kotak yang dapat anda gunakan, Yaitu Yang hanya berupa kotak border biasa dan juga kotak script yang dapat di Scroll

Anda tinggal memilihnya saja ingin menciptakan script box biasa atau yang Scroll ..

Border untuk menaruh script instruksi ini dijamin keren keren .. Selain instruksi box nya, aku juga memberi tutorial untuk cara memasang dan penerapan.

Cara Membuat kotak Script Di Blog

Untuk membuatnya cukuplah gampang anda hanya perlu melaksanakan tutorial berikut ini..

Kita mulai dari Script border

1. Kotak Script biasa di blog

Untuk membuatnya anda tidak perlu memakai CSS Hanya cukup copy code ke dalam postingan blog, Jika anda masih belum mengerti akan aku tunjukan Nanti tutorial..


A. kotak border dua Garis

<div style="background-color: white; border: 5px #08a2fa double; padding: 10px; text-align: left;">
Taruh instruksi disini</div>

m
B. Kotak border Satu garis
M

<div style="background-color: white; border: 5px #08a2fa Solid; padding: 10px; text-align: left;">
Taruh instruksi disini</div>

C. Kotak Dashed border

<div style="background-color: white; border: 5px #08a2fa dashed; padding: 10px; text-align: left;">
Taruh instruksi disini</div>

D. kotak Dotted

<div style="background-color: white; border: 5px #08a2fa dotted; padding: 10px; text-align: left;">
Taruh instruksi disini</div>

Penerapan ...

Masuk ke dalam Postingan memakai mode HTML .. Pastekan Ke dalam Mode HTML Tersebut sempurna ditempat yang Kalian Inginkan..

*Catatan

Ganti Kode 08a2fa dengan instruksi warna yang Kalian inginkan

Jika anda galau bagaimana cara melanjutkan menulis Setelah menaruh instruksi tersebut Maka Jawabannya ialah Tambahkan Kode </br> sehabis instruksi Script..

2. Kotak Script Scroll

Jika Script box nya tidak memerlukan instruksi CSS Maka Yang Satu ini membutuhkan instruksi CSS Tersebut ..

Script box Scroll..

Copy Dan Pastekan code Dibawah ini Tepat Diatas Kode ]]></b:skin> ataupun instruksi </style>

/* syntax highlighter Otomatis */ pre{padding:.8em 1em;margin:0.5em 0;background-color:#F7F7F9;border:1px solid #ddd;font-size:13px;color:#000;font-family:Consolas,Monaco,'Andale Mono','Courier New',Courier,Monospace;line-height:1.4em;position:relative;white-space:pre-wrap;word-wrap:break-word;overflow:auto;max-height:200px} code{font-family:Consolas,"Andale Mono WT","Andale Mono","Lucida Console","Lucida Sans Typewriter","DejaVu Sans Mono","Bitstream Vera Sans Mono","Liberation Mono","Nimbus Mono L",Monaco,"Courier New",Courier,Monospace;font-size:13px;color:#d14} pre code{padding:0!important;color:#839496;background:none!important;border:none!important;display:block} pre .comment,pre .template_comment,pre .diff .header,pre .doctype,pre .pi,pre .lisp .string,pre .javadoc{color:#93a1a1;font-style:italic} pre .keyword,pre .winutils,pre .method,pre .addition,pre .css .tag,pre .request,pre .status,pre .nginx .title{color:#F5821E} pre .number,pre .command,pre .string,pre .tag .value,pre .rules .value,pre .phpdoc,pre .tex .formula,pre .regexp,pre .hexcolor{color:#008800} pre .title,pre .localvars,pre .chunk,pre .decorator,pre .built_in,pre .identifier,pre .vhdl .literal,pre .id,pre .css .function{color:#268bd2} pre .attribute,pre .variable,pre .lisp .body,pre .smalltalk .number,pre .constant,pre .class .title,pre .parent,pre .haskell .type{color:#A2886F} pre .preprocessor,pre .preprocessor .keyword,pre .shebang,pre .symbol,pre .symbol .string,pre .diff .change,pre .special,pre .attr_selector,pre .important,pre .subst,pre .cdata,pre .clojure .title,pre .css .pseudo{color:#000;font-weight:bold} pre .deletion{color:#dc322f} pre .tex .formula{background:#eee8d5} 

Sudah? Jika Sudah Lanjut Ke cara penerapannya

Penerapan

Masuk Kedalam Postingan dan Pilih Mode Html ...
Jika Sudah Masukan ini sempurna ditempat yang kalian inginkan..

<pre><code> .... </pre></code>

Maksud dari tanda " ... " ialah instruksi Script yang ingin kalian taruh... Apabila galau silahkan Lihat gambar..

*Catatan
Sebelum Menaruh instruksi HTML ke dalam border Scroll ini anda Harus parse terlebih dahulu instruksi HTML Tersebut ...

Cara nya anda buka Situs blogcrowds.com . Lalu pastekan Kode HTML anda dan Klik Parse ..

Maka Kode HTML anda tadi akan terparse secara otomatis, Barulah anda taruh instruksi tersebut kedalam border..

Penutup

Itulah tutorial Cara menciptakan kotak Script di dalam postingan Blog, Semoga artikel ini dapat membantu Kalian Semua ..

Share this post