• About
  • Sitemap
  • Privacy Policy
  • Versi Mobile
  • Contact
Cara Maf Tuhi
  • Home
  • Template
    • Seo
    • Valid HTML 5
    • Responsive
  • Tutorial Blog
    • Submenu1
    • Submenu2
  • Kesehatan
  • Game Online
  • Download game
Home » Tutorial Blog » Cara Memasang SyntaxHighlighter Keren dengan Penomoran

Cara Memasang SyntaxHighlighter Keren dengan Penomoran

Cara Memasang SyntaxHighlighter  Keren dengan Penomoran_ Hello..!
Bertemu Lagi dengan Blogger Cara Maftuhi Moga engga bosan dengan Blog ini
karna pada kesempatan kali ini saya mau share tutor jadul
mungkin sudah bertebaran tutor ini di google
tapi saya mau bahas ulang lagi sebagai catatan saya ^_^

Cara Memasang SyntaxHighlighter Keren dengan Penomoran


Langkah Pertama

 1.Cari kode ini ]]></b:skin> Tekan CTRL+F untuk mempermudah pencarian
 2. Jika sudah Paste kode di bawah ini tepat di atas 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/AVvXsEhPYiGDR92qe9vd0MEy0jzlidXbPHJ4jDyMReFD5yU53xbxwUtUas69bPx8y-vAGEGW24RCd78Rs9qhDOp5zTonvdd-8d_JwQLSYdjcDxFZJJSjp9lRzaJomF23-qPjRIfJqttrNcbT8wY/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;

} 


3.Jika sudah Taru kode di bawah ini tepat di atas kode </body>

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

 
4.Langkah Terakhir klik Save pada template sahabat..!

 Cara Penggunaan

<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>

SemogaBermanfaat dan jangan Lupa klik g+ yah biar blog ini tetap update..
Tag Membuat Blockquotes Keren Di Blog
Share artikel ke: Facebook Twitter Google+ Linkedin Technorati Digg

Ditulis Oleh : Unknown

Maf Tuhi Sahabat sedang membaca artikel tentang Cara Memasang SyntaxHighlighter Keren dengan Penomoran. Jika Berkenan Klik Tombol Share di atas yah ..!!!

:: Get this widget ! ::

7 comments

avatar
Balas
Wahyu Dwi delete 28 April 2014 at 19:29

mau praktekin dulu gan ,btw banyak juga script nya :D

avatar
Balas
Satriyo76 delete 28 April 2014 at 19:34

Syntax cocok Buat blog tutor keren nih..

avatar
Balas
Penggemar Rahasia delete 28 April 2014 at 19:47

keren gan,

numpang tanya, agar SyntaxHighlighter Keren ini bisa double click untuk copy gmna ya ^_^

avatar
Balas
Unknown Administer delete 28 April 2014 at 19:47

iya gan super banyak..
tapi keren kan hasilnya kaga mengecewakan wkwkwk :v

avatar
Balas
Unknown Administer delete 28 April 2014 at 19:57

oh Gitu ya Gan Caranya ? :D Ijin Bikin gan :-bd. Thanks udah Share |o|

avatar
Balas
Unknown Administer delete 28 April 2014 at 20:49

keren-keren gan hasilnya... :-d

avatar
Balas
Billy Ramadhan delete 28 April 2014 at 21:06

wosss :-d mantaff kebetulan ane lagi nyari ini tutorial dimana² eh ternyata jodohnya disini :p ijin jajal kang |o|

Warning..!
[+] No Spamer
[+] No Sara
[+] No Link Aktip..!

Terima Kasih Atas Partisipasinya..!

Konversi KodeTutup Konverter!Tutup Emoticon


Newer Post
Older Post
Home
Subscribe to: Post Comments (Atom)

Statistik

Artikel Populer

  • Download Lagu Rachmi Ayu Situmorang - Bukan Untukku
  • Template Jas Pas Photo Format PSD Untuk Photoshop
  • Download Aplikasi Untuk Pencatat Hutang Untuk Android
  • Download Mp3 Sandiwara Cinta_ Cover Keesamus ( Republik )
  • Cara Membuat Bluetooth Headset Sebagai Camera Remote di HTC One X
  • Cara Setatus Facebook Banyak Like ( Auto Like 2014 )
  • Cara Mendapatkan Pulsa GRATIS All Operator dari Candy
  • Cara Mudah Membuat Popular Post Seperti Template Evo Magz
  • Cara dapat Pulsa GRATIS 2014 NO HOAX 100% work
Copyright © 2012 Cara Maf Tuhi - All Rights Reserved
Mas Sugeng - Powered by Blogger