Cara Mudah Membuat Syntax Highlighter Di Blog.Bagi Saya Yang Masih Newbye,Untuk Bisa membuat Syntax Highlighter Di blog adalah sesuatu yang Luar Biasa.Betapa tidak Kadang saya Hanya bisa menyaksikan/melihat Blog teman-teman yang sudah Memakai Syntax Highlighter.Kadang saya juga berfikir,Bagaimana sih cara membuat Syntax Highlighter Itu sendiri?Ternyata setelah saya Googling kemana mana Kayak lagunya ayu ting-ting hehehehe...akhirnya saya dapat pencerahan Juga.Lalu apa yang di maksud Dengan Syntax Highlighter itu? Syntax Highlighter Adalah Sebuah Tool Untuk Block scrip,Css dan HTML tapi juga bisa di terapkan di Tulisan biasa.Syntax Highlighter itu sendiri kalau saya pahami memang hampir sama dengan Blockquote Cuma yang membedakan untuk Tool Syntax Highlighter ini Penerapannya Lebih Spesifik.Jika anda memasang Tool Syntax Highlighter Blog anda akan Kelihatan Lebih Profesional.Tapi untuk beberapa kemungkinan Cara pemasangannya memang agak sedikit Ribet.Jadi kalau anda masih Newbye seperti saya lebih tepatnya ada pakai trik Blockquote Saja yang lebih simpel dalam pemasangannya.
 |
| SreenShot Hasil dari Syntax Highlighter |
1.Pertama-Tama Login Blogger.
2.Kedua Pilih Template - Edit HTML - Klik Expand Template Widget - Lalu cari Kode ]]></b:skin> Untuk mempercepat Proses pencarian Gunakan Ctrl + F lalu masukkan Kode ]]></b:skin> Jika anda sudah menemukannya kemudian Kopy Kode di bawah ini 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;
margin: 18px 0 18px 0 !important;
max-height:250px;
padding-top: 1px; /* adds a little border on top when controls are hidden */
}
/* clear styles */
.dp-highlighter ol,
.dp-highlighter ol li,
.dp-highlighter ol li span
{
margin: 0;
padding: 0;
border: none;
}
.dp-highlighter a,
.dp-highlighter a:hover
{
background: none;
border: none;
padding: 0;
margin: 0;
}
.dp-highlighter .bar
{
padding-left: 45px;
}
.dp-highlighter.collapsed .bar,
.dp-highlighter.nogutter .bar
{
padding-left: 0px;
}
.dp-highlighter ol
{
list-style: decimal; /* for ie */
background-color: #fff;
margin: 0px 0px 1px 45px !important; /* 1px bottom margin seems to fix occasional Firefox scrolling */
padding: 0px;
color: #5C5C5C;
}
.dp-highlighter.nogutter ol,
.dp-highlighter.nogutter ol li
{
list-style: none !important;
margin-left: 0px !important;
}
.dp-highlighter ol li,
.dp-highlighter .columns div
{
list-style: decimal-leading-zero; /* better look for others, override cascade from OL */
list-style-position: outside !important;
border-left: 3px solid #6CE26C;
background-color: #F8F8F8;
color: #5C5C5C;
padding: 0 3px 0 10px !important;
margin: 0 !important;
line-height: 14px;
}
.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: black;
background-color: inherit;
}
/* Adjust some properties when collapsed */
.dp-highlighter.collapsed ol
{
margin: 0px;
}
.dp-highlighter.collapsed ol li
{
display: none;
}
/* Additional modifications when in print-view */
.dp-highlighter.printing
{
border: none;
}
.dp-highlighter.printing .tools
{
display: none !important;
}
.dp-highlighter.printing li
{
display: list-item !important;
}
/* Styles for the tools */
.dp-highlighter .tools
{
padding: 3px 8px 3px 10px;
font: 9px Verdana, Geneva, Arial, Helvetica, sans-serif;
color: silver;
background-color: #f8f8f8;
padding-bottom: 10px;
border-left: 3px solid #6CE26C;
}
.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;
}
/* About dialog styles */
.dp-about { background-color: #fff; color: #333; margin: 0px; padding: 0px; }
.dp-about table { width: 100%; height: 100%; font-size: 11px; font-family: Tahoma, Verdana, Arial, sans-serif !important; }
.dp-about td { padding: 10px; vertical-align: top; }
.dp-about .copy { border-bottom: 1px solid #ACA899; height: 95%; }
.dp-about .title { color: red; background-color: inherit; font-weight: bold; }
.dp-about .para { margin: 0 0 4px 0; }
.dp-about .footer { background-color: #ECEADB; color: #333; border-top: 1px solid #fff; text-align: right; }
.dp-about .close {text-decoration:none; font-size: 11px; font-family: Tahoma, Verdana, Arial, sans-serif !important; background-color: #ECEADB; color: #333; width: 60px; height: 22px; }
/* Language specific styles */
.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: bold; background-color: inherit; }
.dp-highlighter .preprocessor { color: gray; background-color: inherit; }
3.Langkah Ketiga Cari Kode </head> Untuk mempercepat Proses pencarian Gunakan Ctrl + F lalu masukkan Kode </head> Kalau sobat sudah menemukannya Kopy Kode di bawah ini Tepat di atas Kode </head>
<script src='http://facewoman.googlecode.com/files/shData.js' type='text/javascript'/> <script src='http://facewoman.googlecode.com/files/shBrushCss.js' type='text/javascript'/> <script src='http://facewoman.googlecode.com/files/shBrushJScript.js' type='text/javascript'/> <script src='http://facewoman.googlecode.com/files/shBrushXml.js' type='text/javascript'/>
4.Langkah Keempat Cari Kode </body> Untuk mempercepat Proses pencarian Gunakan Ctrl + F lalu masukkan Kode </body> Kalau anda sudah menemukannya Kopy Kode di bawah ini Tepat di atas Kode </body>
<script language='javascript'> dp.SyntaxHighlighter.BloggerMode(); dp.SyntaxHighlighter.HighlightAll('code'); </script>
5.Langkah Terakhir tinggal Save Template anda.
Ops!!! Ternyata langkah di atas belum sepenuhnya selesai.Untuk penggunaan Syntax Highlighter Itu sendiri contoh penggunaannya seperti di bawah ini :
1.Contoh Penerapan Syntax Highlighter Untuk Kode Java scrip.
<pre class="JScript" name="code">
Taruh Kode anda.........
</pre>
2.Contoh Penerapan Syntax Highlighter Untuk Kode CSS.
<pre class="Css" name="code">
Taruh Kode anda.........
</pre>
2.Contoh Penerapan Syntax Highlighter Untuk Kode HTML.
<pre class="Html" name="code">
Taruh Kode anda.........
</pre>
Keterangan:
- Ganti Tulisan Berwarna Merah Taruh Kode anda......... dengan Kode anda yang akan dibuat Syntax Highlighter.
Ya itulah cara membuat Syntax Highlighter Walau sedikit Ribet dan membingungkan hehehehehe...Tapi Untuk hasilnya juga akan memuaskan,Karena Blog anda akan telihat Cantik dan lebih Profesional.Jika langkah di atas Memang benar-benar Betul/sakses.Maka untuk hasil Syntax Highlighter akan seperti Blog Facewoman.blogspot.com
Posting Komentar
Hallo sobat..Kami Senang! Apabila Anda mau meninggalkan Saran, kritik dan Opini tentang Artikel Blog Kami.