Cara Membuat Syntax Highlighter Blog

IBM(InfoBlogMe) - Cara Membuat Syntax Highlighter Blog. Pada kesempatan ini kami akan memberikan sebuah tutorial tentang bagaimana caranya membuat Syntax Highlighter atau yang biasa di sebut dengan precode.

Dalam dunia blogger, precode sudah tidak asing lagi. karena hal ini biasanya digunakan untuk menaruh kode HTML di dalam artikel yang ingin dibagikan. selain menambah kesan rapi. Syntax Highlighter juga bisa menambah kesan mewah pada artikel blogger.

Syntax Highlighter atau Precode juga biasanya digunakan oleh blog - blog terkenal seperti arlinadzgn, igniplex dan juga mastimon. mereka akan menaruh Syntax Highlighter jika dalam artikel tersebut berkaitan dengan tutorial blogger, yang mengharuskan penggunan precode.

Nah pada tutorial Cara Membuat Syntax Highlighter Blog ini akan kami bagikan bagaimana penerapannya pada blog. Caranya sangat mudah, anda tinggal mengikuti langkah-langkah yang kami berikan. maka anda langsung bisa membuatnya sendiri pada blog anda.

Berikut ini Cara membuat Syntax Highlighter pada Blog.

1.Silahkan Login Ke akun BLOGGER anda
2.Lalu Pilih Tema > Edit HTML
3.Setelah itu tekan CTRL+F untuk Melakukan Pencarian Kode ]]></b:skin>
4.Jika sudah ketemu, Taruh Kode HTML ini, di atasa Kode ]]></b:skin>

pre {
padding:.5em 1em;
margin: 0;
white-space:pre;
word-wrap:normal;
overflow:auto;
background-color:#f1f1f1;
font-size:12px;
clear:both;
border-left:15px solid #ccc;
border-right:1px solid #ccc;
color:#999;
}
code {
font-family:Consolas,Monaco,'Andale Mono','Courier New',Courier,Monospace;
line-height:15px;
color:#ff3c00;
font-size:13.5px;
}
pre code {
display: block; padding: 0.5em;
color: #555;
}
#comments pre code {
padding: 0 !mportant;
color: #555;
}

pre .comment,
pre .template_comment,
pre .diff .header,
pre .doctype,
pre .pi,
pre .lisp .string,
pre .javadoc {
color: slategray;
}
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 .phpdoc,
pre .tex .formula,
pre .regexp,
pre .hexcolor {
color: #0077aa;
}
pre .title,
pre .localvars,
pre .chunk,
pre .decorator,
pre .built_in,
pre .identifier,
pre .vhdl .literal,
pre .id,
pre .css .function {
color: #990055;
}
pre .variable,
pre .lisp .body,
pre .smalltalk .number,
pre .constant,
pre .class .title,
pre .parent,
pre .haskell .type {
color: #669900;
}
pre .attribute {
color: #588400;
}
pre .rules .value{
color: #333;
}
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: #a0733f;
}
pre .deletion {
color: #905;
}
pre .tex .formula {
background: #073642;
}

5. Jika sudah di taruh silahkan Cari lagi kode lagi </body>
6.Masukkan Kode HTML dibawah ini Di atasnya

<script type="text/javascript">
var pres = document.getElementsByTagName("pre");
for (var i = 0; i < pres.length; i++) {
  pres[i].addEventListener("dblclick", function () {
    var selection = getSelection();
    var range = document.createRange();
    range.selectNodeContents(this);
    selection.removeAllRanges();
    selection.addRange(range);
  }, false);
}
</script>

7. Jika sudah dimasukkan jangan lupa Simpan Tema

Baca Juga : Cara membuat Halaman Partner Blog Mudah

Bagaimana Tutorial sangat mudah bukan ? Silahkan diterpkan dan jika ada kenadala silahkan hubungi saya melalui Comentar dibawah ini atau bisa langsung dengan Contact

Tweet

Subscribe to receive free email updates: