Cara Memasang Syntax Highlighter Keren Pada Blog

ScrenShot

Cara Memasang Syintax Highlighter Keren - Syntax hightlighter biasanya digunakan dalam hal menaruh HTML, CSS, maupun JQUERY dalam postingan blog. selain itu, Syntax juga akan mempercantik postingan blog dengan penuh warna dan penomoran serta label diatas Syntax itu.
Postingan pada blog akan lebih menarik dan lebih professional dibandingkan dengan yg tidak menggunakan Syntax.

Untuk lebih mayakinkan, anda bisa melihat Demonya dibawah ini

Demo

Nah itu adalah Demonya. sedikit cuplikannya saja. bagaimana? anda tertarik memasang Syntax?

kalau begitu ikuti langkah langkah dibawah ini

Langkah Pemasangan

Masuk dulu ke blogger
Pilih blog yang mau ditambahkan Syntac
Pilih menu Template > Edit HTML
Tambahkan CSS dibawah ini diatas Kode ]]></b:skin>

 /* Syntax Highlghter --------- */

  pre {padding:.8em 1em;margin:0;background-color:#2f3741;border-left:4px solid #40627E;font-size:13px;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-wrap;word-wrap: normal;}

  pre.line-number {background:#2f3741 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_3lrkMnCZvgZKM0DT2_x1V_4QCmyXGeUXz5j0hZqr0kLWXdbLQbgTBw5kz9NfHB-3L-_rOCSPiqGb7EHM5RlLQiFtcGHubZOh92SW9C_TRpqDe3H5eaNsTuOZlBq2HrQMRmsI9aNeTVM/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:14px;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: #586e75;font-style: italic;}

pre .keyword,

pre .winutils,

pre .method,

pre .addition,

pre .css .tag,

pre .request,

pre .status,

  pre .nginx .title {color: #859900;}

pre .number,

pre .command,

pre .string,

pre .tag .value,

pre .rules .value,

pre .phpdoc,

pre .tex .formula,

pre .regexp,

  pre .hexcolor {color: #7195a3;}

pre .title,

pre .localvars,

pre .chunk,

pre .decorator,

pre .built_in,

pre .identifier,

pre .vhdl .literal,

pre .id,

  pre .css .function {color: #569dcf;}

pre .attribute,

pre .variable,

pre .lisp .body,

pre .smalltalk .number,

pre .constant,

pre .class .title,

pre .parent,

  pre .haskell .type {color: #aa985a;}

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: #509a55;}

  pre .deletion {color: #dc322f;}

  pre .tex .formula {background: #073642;

}

Simpan JQuery dibawah ini tepat diatas kode </body>

 <script src='http://bloggertut.googlecode.com/svn/trunk/js/highlight.pack.js'/>
    <script>
      hljs.initHighlightingOnLoad();
    </script>

Nah setelah itu. Simpan Template dan Selesai.

Cara penggunaan

Anda hanya menambahkan kode dibawah ini disetiap postingan anda

<pre class="line-number" data-codetype="CSS"><code> ....... </code></pre>
<pre class="line-number" data-codetype="Jquery"><code> ....... </code></pre>
<pre class="line-number" data-codetype="HTML"><code> ....... </code></pre>
<pre class="line-number" data-codetype="JavaScript"><code> ....... </code></pre>

Sekian Postingan dari saya

Semoga Bermanfaat dan Berguna
Jika anda ingin Copy + Paste Camtumkan Link Sumbernya,
tolong hargai saya, Jika anda ingin di hargai maka hargailah orang lain....

SUMBER : http://blog-kangramzi.blogspot.com/2014/04/cara-memasang-syintax-highlighter-keren.html

UnknownMay 10, 2014 at 7:34:00 PM GMT+7
keren mas. terimakasih sudah cantumkan link sumbernya
AnonymousMay 10, 2014 at 7:48:00 PM GMT+7
keren nih...
suatu saat ane butuh nih, izin bookmark gan
arif brajamustiMay 11, 2014 at 10:12:00 AM GMT+7
Keren gan Syntaxnya :)
UnknownMay 11, 2014 at 10:57:00 AM GMT+7
keren gan, izin praktek dulu
UnknownMay 11, 2014 at 10:57:00 AM GMT+7
wah keren tutorialnya
izin nyoba gan
nice
AnonymousMay 11, 2014 at 11:09:00 AM GMT+7
lengkap banget tutorial nya (y) keren gan mau nyoba ah :D ditunggu tutor lainnya
Raihan Sa'diMay 11, 2014 at 11:14:00 AM GMT+7
jadi pengen nyoba, izin coba gan :D
KhairulMay 11, 2014 at 11:51:00 AM GMT+7
woop2 ini yang saya cari gan , makasih ...
Udah lama di cari baru jumpa keyword nya -_-
Reza Syahputra RizalMay 11, 2014 at 11:56:00 AM GMT+7
Ini Gunanya Apa Gan ?
AnonymousMay 11, 2014 at 2:10:00 PM GMT+7
wah kren nih jdi gitu ya caranya
thanks infonya ya
UnknownMay 11, 2014 at 2:44:00 PM GMT+7
ini fungsinya untuk apa ya gan,
maklum
UnknownJune 30, 2014 at 5:05:00 AM GMT+7
buat kode PHP gmna ? bisa ?

Silahkan berkomentar sesuai dengan topik artikel di atas, komentar yang menyertakan link, iklan, spam, dan sejenisnya akan di hapus.

My Label Post