Cara Simple Membuat Kotak Script/Syntax Highlighter di Postingan Blog - Seringkali dalam postingan yang berisi tips edit template kita dituntut untuk menyematkan script CSS, HTML, Java atau yang lainnya.
Jika Anda mempaste-kan secara langsung kode-kode tersebut di dalam postingan, pasti hasilnya acak-acakan.
Maka, untuk menghindari hal tersebut, Anda harus membuat kotak script untuk menyematkan script CSS, HTML, dan Java di postingan blog. Kotak script ini biasa disebut Syntax Highlighter Box.
Untuk membuat kotak script/Syntax Highlighter Box dipostingan blogspot berbeda dengan di Wordpress.
Jika di blog Wordpress Anda cukup menginstall plugin Syntax Highlighter Evolved, sedangkan untuk blogspot Anda harus menambahkan beberapa kode CSS dan HTML ke dalam template blog.
Bagaimana Cara membuat Kotak Script/Syntax Highlighter Box di Postingan Blog ?
Untuk membuat kotak script/Syntax Highlighter Box di dalam postingan blog caranya mudah. Silahkan masuk ke Dashboard blog Anda, kemudian pilih Template >> Tata Letak.
Sebelum melakukan pengeditan terhadap template blog Anda, silahkan backup dulu templatenya untuk jaga-jaga bila nantinya terjadi error.
Langkah pertama, cari kode ]]> di template blog Anda. Kalau sulit, cari dengan menekan ctrl + F di keyboard. Setelah ketemu, letakan kode dibawah ini tepat di atas kode ]]>.
/* 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}
Langkah kedua, temukan kode </head> atau </body> di template blog kemudian letakan kode di bawah ini tepat di atasnya.
<script src='https://googledrive.com/host/0B8a75E285BMHMDVkVGY1dUhzUUE' type='text/javascript'/>
Setelah Anda memasang kode-kode di atas ke dalam template Anda bukan berarti kotak script/Syntax Highlighter Box akan berfungsi secara otomatis.
Untuk menampilkannya di postingan lakukan langkah terakhir ini. Masukan Script di bawah ini dalam postingan blog Anda setiap kali mau menyematkan script CSS, Java, HTML atau yang lainnya.
<pre><code>
Masukkan disini Kode CSS, JavaScript, atau HTML
</pre></code>
0 komentar :
Posting Komentar