Membuat pre syntax simple keren

Membuat pre syntax simple keren

Salam sobat blogging semua pada artikel saya yang ke sekian kalinya ini sedikit berbagi untuk sobat semua Bahwasanya pada blogging takan pernah habis dalam kemajuan dan perkembanganya, dan pada artikel saya Kali ini. Akan berbagi trik cara mudah membuat pre syntax yang akan terpasang pada blog anda dan untuk Anda yang menginginkan trik ini bisa anda simak dengan seksama panduan cara memasang nya di sini : 

 

Berikut ini cara pemasanganya :

Masuk dasboard blog anda cari kode  ]]></b:skin>. atau kode  </style>  kemudian copy. Kode di bawah ini dan pastekan tepat diatas kode  ]]></b:skin>  atau diatas  </style>  Tekan  Ctr + F  untuk memudahkan pencarian pada bagian template anda.

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/AVvXsEimk2GuU6-AIXwvdAC45R2p3xKqN2rjHBuWV0215XqXQFrI4jKv2taCdg_KPApB8z57hppqD_R68jZ5occS-iszSN5Jn7wihVy0yzckDUgsMPSdWWosDOX_bB_aDQcbDuoJ7cvu9KEoNK8/s1600/number-karrysta.gif)no-repeat top left;padding-left:54px;border-left:none;overflow:auto;}
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:#00cd77}
pre[data-codetype="HTML"]{border-left-color:#e49937}
pre[data-codetype="JavaScript"]{border-left-color:#009bd9}
pre[data-codetype="JQuery"]{border-left-color:#2c6950}
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:#00cd77}
pre.line-number[data-codetype="HTML"]:before{background-color:#e49937}
pre.line-number[data-codetype="JavaScript"]:before{background-color:#009bd9}
pre.line-number[data-codetype="JQuery"]:before{background-color:#2c6950}
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;
} 

Pemasangan kode Jquery :

Selanjutnya cari kode  </body>  kalau sudah ketemu copy kode  js  dibawah ini,  Dan pastekan tepat diatas kode  </body>  di bawah ini kode yang harus anda copy :

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

Setelah penerapanya sesuai dengan petunjuk diatas Klik Simpan/Save Tempalte.

Cara penerapan kode nya area Html Postingan  :

Masukan kode di bawah ini pada area postingan di mode Html jangan di Compose

Dibawah ini kode Html Tag Pre syntax yang memakai nomer :

<pre class="line-number" data-codetype="CSS"><code>  DI SINI CODE CSS  </code></pre>
<pre class="line-number" data-codetype="HTML"><code>  DI SINI CODE HTML  </code></pre>
<pre class="line-number" data-codetype="JavaScript"><code>  DI SINI CODE JAVA SCRIPT  </code></pre>
<pre class="line-number" data-codetype="Jquery"><code>  DI SINI CODE JQUERY  </code></pre>

Dan dibawah ini kode Tag pre syntax yang menggunakan style standar :

<pre><code class="language-css">  DI SINI CODE CSS  </code></pre>
<pre><code class="language-html">  DI SINI CODE HTML  </code></pre>
<pre><code class="language-javascript">  DI SINI CODE JAVA SCRIPT  </code></pre>
<pre><code class="language-jquery">  DI SINI CODE JQUERY  </code></pre>

Terakhir silahkan Publish/Publikasikan postingan baru anda. Dan silahkan cek postingan anda.Selamat mencoba semoga berhasil. Jika anda kesulitan silahkan bertanya dengan kembali pada Halaman utama post :   Blog KARRYSTA . Barangkali saja berkomentar di Blog Demo Karrysta ini tidak terbalas. *Salam ceria dan salam berbagi :)

Author : Karrysta Blog Demo

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit. Terimakasih atas kunjungannya brother yang baru saja membaca artikel berjudul Membuat pre syntax simple keren.

Share Artikel

Facebook

Twitter

Google+

Artikel Terkait