Memasang Syntax Highlighter Blogspot

Syntax Highlighter Blogspot

Syntax Highlighter adalah suatu tempat, atau wadah yang berbentuk text area dimana, didalamnya kita dapat memasukkan kode-kode yang dapat berupa code-code dari bahasa java, HTML, Javascript, PHP, CSS, dan kode-kode lainnya.  Fungsi Dari Syntax Highlighter ini adalah untuk memudahkan Para Pembaca Blog Untuk Mengelompokan Suatu Code Code HTML, JavaScript , CSS dan Lainnya.Untuk memasang fitur  Syntax Highlighter di blogspot relatif gampang - gampan susah si. Untuk Anda yang ingin menggunakan fitur Syntax Highlighter ke dalam blogspot berikut kami berikan penjelasan lengkapnya.

sebelum melakukan editing pada template, sebaiknya sobat "backup" dahulu template
yang sobat gunakan agar dapat meminimalisir apabila terjari "error".

1. Login ke Blog milik sobat.
2. Pada dashboard sobat pilih "Template" lalu pilih "Edit HTML".
3. cari kode beriku "]]></b:skin>" gunakan "CTRL + F" supaya pencarian lebih mudah.
4. Copy syntak di bawan ini dan paste tepat di atas kode "]]></b:skin>".

.dp-highlighter{font-family:Consolas, Monaco, "Courier New", Courier, monospace;font-size:12px;background-color:#E7E5DC;width:99%;overflow:auto;padding-top:1px;margin:18px 0!important} 
.dp-highlighter ol,.dp-highlighter ol li,.dp-highlighter ol li span{border:none;margin:0;padding:0} 
.dp-highlighter a,.dp-highlighter a:hover{background:none;border:none;margin:0;padding:0} 
.dp-highlighter .bar{padding-left:45px} 
.dp-highlighter.collapsed .bar,.dp-highlighter.nogutter .bar{padding-left:0} 
.dp-highlighter ol{list-style:decimal;background-color:#fff;color:#5C5C5C;margin:0 0 1px 45px !important;padding:0} 
.dp-highlighter.nogutter ol,.dp-highlighter.nogutter ol li{list-style:none!important;margin-left:0!important} 
.dp-highlighter ol li,.dp-highlighter .columns div{list-style:decimal-leading-zero;list-style-position:outside!important;border-left:3px solid #6CE26C;background-color:#F8F8F8;color:#5C5C5C;line-height:14px;margin:0!important;padding:0 3px 0 10px !important} 
.dp-highlighter.nogutter ol li,.dp-highlighter.nogutter .columns div{border:0} 
.dp-highlighter .columns{background-color:#F8F8F8;color:gray;overflow:hidden;width:100%} 
.dp-highlighter .columns div{padding-bottom:5px} 
.dp-highlighter ol li.alt{background-color:#FFF;color:inherit} 
.dp-highlighter ol li span{color:#000;background-color:inherit} 
.dp-highlighter.collapsed ol{margin:0} 
.dp-highlighter.collapsed ol li{display:none} 
.dp-highlighter.printing{border:none} 
.dp-highlighter.printing .tools{display:none!important} 
.dp-highlighter.printing li{display:list-item!important} 
.dp-highlighter .tools{font:9px Verdana, Geneva, Arial, Helvetica, sans-serif;color:silver;background-color:#f8f8f8;border-left:3px solid #6CE26C;padding:3px 8px 10px 10px} 
.dp-highlighter.nogutter .tools{border-left:0} 
.dp-highlighter.collapsed .tools{border-bottom:0} 
.dp-highlighter .tools a{font-size:9px;color:#a0a0a0;background-color:inherit;text-decoration:none;margin-right:10px} 
.dp-highlighter .tools a:hover{color:red;background-color:inherit;text-decoration:underline} 
.dp-about{background-color:#fff;color:#333;margin:0;padding:0} 
.dp-about table{width:100%;height:100%;font-size:11px;font-family:Tahoma, Verdana, Arial, sans-serif!important} 
.dp-about td{vertical-align:top;padding:10px} 
.dp-about .copy{border-bottom:1px solid #ACA899;height:95%} 
.dp-about .title{color:red;background-color:inherit;font-weight:700} 
.dp-about .para{margin:0 0 4px} 
.dp-about .footer{background-color:#ECEADB;color:#333;border-top:1px solid #fff;text-align:right} 
.dp-about .close{font-size:11px;font-family:Tahoma, Verdana, Arial, sans-serif!important;background-color:#ECEADB;color:#333;width:60px;height:22px} 
.dp-highlighter .comment,.dp-highlighter .comments{color:#008200;background-color:inherit} 
.dp-highlighter .string{color:blue;background-color:inherit} 
.dp-highlighter .keyword{color:#069;font-weight:700;background-color:inherit} 
.dp-highlighter .preprocessor{color:gray;background-color:inherit}lor:inherit}

5. Cari kode "</Head>"gunakan "CTRL + F" supaya pencarian lebih mudah.
6. Copy syntak di bawan ini dan paste tepat di atas kode "</Head>".

7. Cari kode "</body>"gunakan "CTRL + F" supaya pencarian lebih mudah.
8. Copy syntak di bawan ini dan paste tepat di atas kode "</body>".

<!--SYNTAX HIGHLIGHTER BEGINS-->
<script language='javascript'>
dp.SyntaxHighlighter.BloggerMode();
dp.SyntaxHighlighter.HighlightAll('code');
</script>
<!--SYNTAX HIGHLIGHTER ENDS-->

9. Simpan Template.

Untuk menggunakan SSyntax Highlighter di postingan blogspot,
caranya pada menu postingan, klik HTML sebelah kanan menu compose.
pastekan kode dibawah ini.

- Class Css

<pre class="Css" name="code">
paste Class Css yang akan di posting disini
</pre>

- Class Java Script

<pre class="JScript" name="code">
paste Java Script yang akan di posting disini
</pre>

- Class HTML

<pre class="HTML" name="code">
paste HTML yang akan di posting disini
</pre>

lumanayan gampangkan caranya?? meski prosesnya aga lama si, tapi mudah - mudahan para sobat sukses menggunakan script ini.

semoga dapat bermanfaat bagi sobat