3 Langkah Mudah Memposting Source Code di Blog

Memposting Source code di Blog

Memposting Source Code di Blog - Penulisan script yang rapi didalam tutorial pemrograman di blog merupakan hal yang harus di lakukan karena ketika source code berantakan seperti yang biasa dilihat di blog lain maka prngunjung biasanya akan malas membaca tutorial yang kita buat.

ketika iseng blog walking ingin mencari script perograman php, saya mengunjungi salah satu blog seorang blogger entah itu siapa saya lupa alamat blognya.

Blog tersebut memposting script PHP yang sangat tidak nyaman saya lihat, Berantakan dan tidak dengan aturan cara menulis kode yang di anjurkan di blog…

Tanpa berfikir panjang saya langsung close blog tersebut…

Bayangkan hal itu terjadi di blog sobat…

Ketika pengunjung yang antusias membuka artikel yang sobat posting dan ternyata mereka malah menemukan ceceran script yang di cari berantakan….

Otomatis saja pengunjung tidak paham dan langsung close

Ketika blog terlihat rapi dan pengunjung juga mendapatkan apa yang mereka cari, Nilai plusnya sobat bakal mempunyai langganan visitor.

Namun pada artikel ini sobat akan dituntun bagaimana cara yang baik menulis source kode ketika sedang membuat artikel yang menjelaskan bahasa pemrograman.

Cara Menulis Script Di Artikel Blog

Untuk mengatasi blog sobat yang ber-niche tutorial pemrograman, ada baiknya sobat menggunakan cara ini untuk memposting kode di blog sobat agar terlihat rapi…

Oke langsung saja kita terapkan cara berikut…

Silahkan seperti biasa login ke blog > cari menu template dan edit html..

1. Copas script di bawah ini di atas tag penutup ]]></b:skin>

/* Syntax Highlighter */
pre,i[rel="pre"]{padding:.8em 1em;margin:0;background-color:#2f3741;border-left:4px solid #40627E;font-size:11px;color:#839496;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;line-height:1.4em;position:relative;white-space:pre;word-wrap:normal;white-space:pre;overflow:auto}
pre.line-number{background:#2f3741 url(http://4.bp.blogspot.com/-13ewIh6Vm50/UnBe-_3zqDI/AAAAAAAAF-o/4FNnjpi-N5c/s1600/new-line-number.png)no-repeat top left;padding-left:54px;border-left:none}
pre.line-number:after{content:"";width:35px;height:8px;background-color:#39424e;bottom:0;left:0;position:absolute}
pre[data-codetype="CSS"]{border-left-color:#5fbbba}
pre[data-codetype="HTML"]{border-left-color:#4fc1eb}
pre[data-codetype="JavaScript"]{border-left-color:#ff6c60}
pre[data-codetype="JQuery"]{border-left-color:#99c262}
pre.line-number[data-codetype]:before{content:attr(data-codetype);display:block;margin:-11px -13px 10px -54px;padding:8px 12px;font-family:Oswald,Arial,Sans-serif;font-size:12px;text-transform:uppercase;background-color:#41749f;color:white}
pre.line-number[data-codetype="CSS"]:before{background-color:#a9d86e}
pre.line-number[data-codetype="HTML"]:before{background-color:#4fc1eb}
pre.line-number[data-codetype="JavaScript"]:before{background-color:#ff6c60}
pre.line-number[data-codetype="JQuery"]:before{background-color:#99c262}
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}
#comments code{color:#bbbb6d}
pre code{padding:0!important;color:#a3a49a;background:none!important;border:none!important;display:block}
pre .line-number{float:left;margin:0 1em 0 -1em;color:#61686d;background-color:#39424e;text-align:right;min-width:2.5em;padding-right:4px}
pre .comment,pre .template_comment,pre .diff .header,pre .doctype,pre .pi,pre .lisp .string,pre .javadoc{color:#2DCFF2;font-style:italic}
pre .keyword,pre .winutils,pre .method,pre .addition,pre .css .tag,pre .request,pre .status,pre .nginx .title{color:#E6D90C}
pre .number,pre .command,pre .string,pre .tag .value,pre .rules .value,pre .phpdoc,pre .tex .formula,pre .regexp,pre .hexcolor{color:#EB4F4F}
pre .title,pre .localvars,pre .chunk,pre .decorator,pre .built_in,pre .identifier,pre .vhdl .literal,pre .id,pre .css .function{color:#03C425}
pre .attribute,pre .variable,pre .lisp .body,pre .smalltalk .number,pre .constant,pre .class .title,pre .parent,pre .haskell .type{color:#1B6FC3}
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:#D94CEA}
pre .deletion{color:#dc322f}
pre .tex .formula{background:#073642}

Janga lupa simpan…

Sebenarnya cara di atas mempunyai banyak style agar postingan script kita terlihat lebih keren…

Sobat bisa mencarinya di google. Banyak sekali model latar agar script postingan kode terlihat rapi…

Oyaa setelah sobat melakukan hal di atas..lakukan cara selanjutnya

2. Encode source

Dan sebelum mempaste script tersebut di halaman mode html..
Pastikan sobat sudah meng-encode dulu script tersebut di alamat di Htmlencoder...

Lalu hasilnya itu yang sobat paste di mode html…

3. Cara posting source code supaya rapi di blog

Ketika ingin menulis script jangan lupa gunakan script di bawah ini dan paste di mode html.
<pre><code>
/*ketikkan source code di sini*/
</code></pre>

Bagaimana sobat…apakah sobat sudah menggunakannya di blog masing-masing…

Sekian tutorial saya hari ini tentang  3 Langkah Mudah Memposting Source Code di Blog ..

Semoga tutorialnya berhasil and happy blogging..

Share this

Subscribe to receive free email updates:

2 Responses to "3 Langkah Mudah Memposting Source Code di Blog"