Cara mudah membuat kotak untuk menaruh script di dalam postingan

Anda pernah mempunyai masalah untuk menaruh kode Script? Karena jika hanya menggunakan blockquote itu akan memakan tempat yang sangat panjang..

Untuk itu kita akan membahas tentang cara membuat kotak script dalam postingan blog

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

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

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

Cara Membuat kotak Script Di Blog

Untuk membuatnya cukuplah mudah anda hanya perlu melakukan tutorial berikut ini..

Kita mulai dari Script border

1. Kotak Script biasa di blog

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


A. kotak border dua Garis

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

m
B. Kotak border Satu garis
M

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

C. Kotak Dashed border

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

D. kotak Dotted

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

Penerapan ...

Masuk ke dalam Postingan menggunakan mode HTML .. Pastekan Ke dalam Mode HTML Tersebut tepat ditempat yang Kalian Inginkan..

*Catatan

Ganti Kode 08a2fa dengan kode warna yang Kalian inginkan

Jika anda bingung bagaimana cara melanjutkan menulis Setelah menaruh kode tersebut Maka Jawabannya adalah Tambahkan Kode </br> setelah kode Script..

2. Kotak Script Scroll

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

Script box Scroll..

Copy Dan Pastekan code Dibawah ini Tepat Diatas Kode ]]></b:skin> ataupun kode </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 tepat ditempat yang kalian inginkan..

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

Maksud dari tanda " ... " adalah kode Script yang ingin kalian taruh... Apabila bingung silahkan Lihat gambar..

*Catatan
Sebelum Menaruh kode HTML ke dalam border Scroll ini anda Harus parse terlebih dahulu kode 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 kode tersebut kedalam border..

Penutup

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

BERITA LENGKAP DI HALAMAN BERIKUTNYA

Halaman Berikutnya

Subscribe to receive free email updates: