Cara Mebuat Kotak Script Dengan CSS dan Mudah

Kotak Script

Cara Mebuat Kotak Script Dengan CSS dan Mudah - Ingin share , javascript , CSS , HTML , terlalu panjang dan tidak enak dilihat, mungkin membuat anda tidak nyaman dengan script yang terlalu panjang.

Dan sekarang , bagaimana caranya agar tidak terlalu panjang saat memberikan script, berikut tutorial atau cara membuatnya, sebagai berikut :

Cara Membuat Kotak Script

1. Buka akun blogger.
2. Pilih Template > edit Html
3. Cari kode </head> (gunakan Ctrl + F untuk membantu mencari)
4. Copy kode di bawah ini dan taruh tepat di atas kode </head>

<script src='http://procejct-saeful13.googlecode.com/
svn/JS/SyntaxHighlighter.js' type='text/javascript'/>

5. Selanjutnya copy kode di bawah ini dan letakan tepat di atas kode ]]></b:skin>

/*syntax highlighter*/
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}

<span style='visibility:hidden'>http://www.seonih.ga/</span>
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}

6. Save Template

Cara Menggunakan :

Gunakan kode

 <pre><code>Masukkan JavaScript atau CSS </pre></code>

Pada menu Html saat anda membuat posting, dan isikan code script yang akan di tambahakan pada menu compose.

Related Post

Share this

Share on Facebook