Kata Share | Mas Sehat | Ston SEO Responsif Blogger Template
» » Membuat syntaxt highlighter keren di blog

Membuat syntaxt highlighter keren di blog

Tutorial Blog
Sunday 8 June 2014
Belum ada komentar
Hay,.. sobat Blog Irvan Efendy apa kabar semua nya,.. hehehee
sudah 2 hari nie saya gak memposting tutorial blog dan alhamdulillah hari ini saya di beri kesempatan untuk berbagi tutorial lagi,.. okeyy untuk postingan kali ini saya akan membahas tentang Syntaxt Higlighter.
Apa itu Syntax Highlighter,?? Kita para blogger sering kali berbagi script/kode untuk blogger atau siapapun yang membutuhkannya untuk pengembangan web/blog. Kebanyakan dari kita menggunakan Tag Blockquote sebagai "wadah" dari script/kode tersebut dan menandai dengan beberapa warna khusus sebagai indikator atau petunjuk. Nah, Syntax Highlighting adalah upaya untuk mempresentasikan script/kode tersebut dengan cara dan tampilan yang lebih baik berdasarkan jenis kode, misalnya CSS, HTML, Javascript, JQuery, Phyton, PHP, XML dan masih banyak lagi.

Simak langkah2 dibawah ini:

1. Login ke akun blogger sobat
2. Klik Template » Edit HTML
3. Kemudian tekan Ctrl+F cari kode ]]></b:skin> atau </style>
4. Lalu tambahkan script CSS berikut ini tepat diatas kode ]]></b:skin> atau </style> 
pre, i[rel="pre"] {
display:block;
font-style:normal;
font-size:12px;
line-height:18px;
background-color:#0d0e0f;
color:#8e9081 !important;
padding:10px 12px;
border-left:4px solid #555555;
white-space:pre;
word-wrap:normal;
overflow:auto
}
pre[data-codetype="CSS"] {
border-left-color:#7B990C
}
pre[data-codetype="HTML"] {
border-left-color:#0B7E88
}
pre[data-codetype="JavaScript"] {
border-left-color:#545448
}
pre[data-codetype="JQuery"] {
border-left-color:#395540
}
pre[data-codetype="XML"] {
border-left-color:#E55E48
}
pre code {
color:inherit !important;
font-weight:normal;
display:block
}
pre.numbered {
border-left-width:4px
}
pre.numbered[data-codetype]:before {
content:attr(data-codetype);
display:block;
margin:-10px -12px 10px;
padding:5px 10px;
font-family:'Open Sans', "Segoe UI", Arial, Tahoma, sans-serif;
text-transform:uppercase;
background-color:#40627e;
color:white
}
pre.numbered[data-codetype="CSS"]:before {
background-color:#7B990C
}
pre.numbered[data-codetype="HTML"]:before {
background-color:#0B7E88
}
pre.numbered[data-codetype="JavaScript"]:before {
background-color:#545448
}
pre.numbered[data-codetype="JQuery"]:before {
background-color:#395540
}
pre.numbered[data-codetype="XML"]:before {
background-color:#E55E48
}
pre.numbered[data-codetype*="+"]:before {
content:"Kode";
background-color:#555;
}
code, pre, i[rel="code"], i[rel="pre"] {
font-style: normal;
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;
color:#805bc0
}
pre .branch-link {
border-bottom:1px dotted;
text-decoration:none !important
}
pre .comment, pre .template_comment, pre .diff .header, pre .lisp .string, pre .javadoc {
color:#93a1a1;
font-style:italic
}
pre .doctype {
color:#df7c51
}
pre .keyword, pre .css .rule .keyword, pre .winutils, pre .javascript .title, pre .method, pre .addition, pre .css .tag, pre .lisp .title {
color:#0264BE
}
pre .css .class {
color:#a7aa9b
}
pre .number, pre .command, pre .string, pre .phpdoc, pre .tex .formula, pre .regexp, pre .hexcolor {
color:#628998
}
pre .title, pre .localvars, pre .function .title, pre .chunk, pre .decorator, pre .builtin, pre .built_in, pre .lisp .title, pre .identifier, pre .title .keymethods, pre .id {
color:#86aade
}
pre .tag .title, pre .rules .property, pre .django .tag .keyword {
font-weight:bold
}
pre .attribute, pre .variable, pre .instancevar, pre .lisp .body, pre .smalltalk .number, pre .constant, pre .class .title, pre .parent, pre .haskell .label {
color:#a59355
}
pre .preprocessor, pre .pi, pre .shebang, pre .symbol, pre .diff .change, pre .special, pre .keymethods, pre .important, pre .subst, pre .cdata {
color:#b25a5a
}
pre .tag .value, pre .attr_selector, pre .javascript .literal {
color:#bfbf90
}
pre .deletion {
color:#dc322f
}
pre .tex .formula {
background:#eee8d5
}
pre .tag {
color:#a0a28b
}
pre.numbered .line-number {
display:block;
float:left;
text-align:right;
margin:-10px 12px -10px -12px;
padding:10px 12px;
background-color:#141414
}
pre.numbered .line-number span {
display:block;
position:relative;
color:#818181;
}
pre.numbered .line-number em {
font:inherit;
position:absolute;
top:-5px;
left:100%;
margin-left:15px;
background-color:#fc391e;
border-color:transparent;
color:#fff;
line-height:1;
padding:4px 5px;
display:none
}
pre.numbered .line-number em:before {
content:"";
display:block;
width:0;
height:0;
border:4px solid transparent;
border-right-color:inherit;
border-bottom-color:inherit;
position:absolute;
top:50%;
right:100%;
margin-top:-4px
}
pre.numbered .line-number span:hover em, pre.numbered .line-number span:target em {
display:block
}
pre.numbered .line-number span:target {
font-weight:bold;
background-color:#40464b;
margin:0 -12px;
padding:0 12px
}
pre.numbered .line-number span:target a {
color:#8e9081
}
pre.numbered:hover .line-number span:target em {
display:none
}

5. Tekan Ctrl+F cari kode </body> Lalu masukan script di bawah ini tepat di atas kode </body>
<script src='http://sites.google.com/site/vanzdy/script/Syntax-highlight.js'></script>

6. Kemudian simpan template sobat.

Penerapannya:

Untuk menampilkan Syntaxt Highlighter tersebut gunakan mode HTML html
Lalu masukkan kode Pemanggil nya dibawah ini simak baik baik ya ^_^

<pre class="numbered" data-codetype="CSS"><code>Kode CSS anda disini!</code></pre>
<pre class="numbered" data-codetype="HTML"><code>Kode HTML anda disini!</code></pre>
<pre class="numbered" data-codetype="JQuery"><code>Kode JQuery anda disini!</code></pre>
<pre class="numbered" data-codetype="XML"><code>Kode XML anda disini!</code></pre>
<pre class="numbered" data-codetype="JavaScript"><code>Kode Javascript anda disini!</code></pre>

Nanti DEMO nya seperti dibawah ini :

<pre class="numbered" data-codetype="CSS"><code>Kode CSS anda disini!</code></pre>

<pre class="numbered" data-codetype="HTML"><code>Kode HTML anda disini!</code></pre>

<pre class="numbered" data-codetype="JQuery"><code>Kode JQuery anda disini!</code></pre>

<pre class="numbered" data-codetype="JavaScript"><code>Kode Javascript anda disini!</code></pre>

<pre class="numbered" data-codetype="XML"><code>Kode XML anda disini!</code></pre>

UpsS,... Baca juga cara membuat Tag Pre keren di blog | Semoga Bermanfaat 
Terima kasih telah membaca artikel tentang Membuat syntaxt highlighter keren di blog di blog blog sepot jika anda ingin menyebar luaskan artikel ini di mohon untuk mencantumkan link sebagai Sumbernya, dan bila artikel ini bermanfaat silakan bookmark halaman ini diwebbroswer anda, dengan cara menekan Ctrl + D pada tombol keyboard anda.

Artikel terbaru :

Kata Share | Mas Sehat | Ston SEO Responsif Blogger Template