29 February 2012

Cara Menambahkan Syntax Highlighter pada Blog

Syntax Highlighter, cara buat Syntax Highlighter, cara pasang Syntax Highlighter, Syntax Highlighter blog, Syntax Highlighter blogspot, Syntax Highlighter blogger
"Syntax Highlighter" apakah sobat blogger merasa asing dengan istilah tersebut? atau bahkan sebaliknya, istilah Syntax Highlighter sudah sering terdengar di telinga sobat blogger. Syntax Highlighter atau Penyorotan sintaks adalah fitur dari beberapa editor teks yang menampilkan teks, terutama source code dalam berbagai warna dan font sesuai dengan kategori istilah. Fitur ini memudahkan kita dalam menulis dalam bahasa terstruktur seperti bahasa pemrograman atau bahasa markup. Untuk kesempatan kali ini, saya akan memberikan tutorial blog tentang cara membuat Syntax Highlighter.

Cara Menambahkan Syntax Highlighter pada Blog :
  • Log In di http://www.blogger.com/
  • Klik Menu Rancangan, lalu pilih Edit HTML
  • Cari kode ]]></b:skin> dan letakkan kode di bawah ini sebelum 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;
 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 { 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; }
  • Cari kode </head> dan letakkan kode di bawah ini sebelum kode </head>
<script gapi_processed="true" src="https://apis.google.com/js/plusone.js" async="" type="text/javascript"></script><script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shCore.js" type="text/javascript">
</script>    
<script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCpp.js" type="text/javascript">
</script>    
<script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCSharp.js" type="text/javascript">
</script>    
<script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCss.js" type="text/javascript">
</script>    
<script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushDelphi.js" type="text/javascript">
</script>    
<script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJava.js" type="text/javascript">
</script>    
<script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJScript.js" type="text/javascript">
</script>    
<script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPhp.js" type="text/javascript">
</script>    
<script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPython.js" type="text/javascript">
</script>    
<script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushRuby.js" type="text/javascript">
</script>    
<script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushSql.js" type="text/javascript">
</script>    
<script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushVb.js" type="text/javascript">
</script>    
<script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushXml.js" type="text/javascript">
</script>
  • Cari kode </body> dan letakkan kode di bawah ini sebelum kode </body>
<script language='javascript'> dp.SyntaxHighlighter.BloggerMode(); dp.SyntaxHighlighter.HighlightAll('code'); </script>

Tambahan :
Setiap mempublikasikan post yang terdapat kode-kode di dalamnya, sobat blogger harus memasukkan kode tersebut seperti contoh d bawah ini!

<textarea name="code" class="c#" cols="60" rows="10">
KODE YANG AKAN DITAMPILKAN DILETAKKAN DISINI
</textarea>

Sobat blogger masih bingung? Ya wajarlah sobat blogger bingung. Langkahnya terlalu panjang sih... Untuk itu, ceritakan kebingungan sobat melalui kolom komentar yang ada di bawah ini, supaya kita bisa menemukan pemecahan terhadap kebingungan sobat tersebut.


Baca tutorial menarik lainnya di bawah ini :

33 comments:

  1. Tambah keren http://pendtiumpraz.blogspot.com :D makasih

    ReplyDelete
  2. Jujur aja, masih bingung kegunaan syntax ini.

    ReplyDelete
  3. Dwijayas...
    Syntax Highlighter digunakan untuk membatasi teks dengan kode. Apakah itu kode CSS, Java Script atau kode-kode yang lain

    ReplyDelete
  4. Saya masih bingung, apa sih maksudnya...

    ReplyDelete
  5. thx u , atas tutorilanya, mampir ke blog ane

    ReplyDelete
  6. Thank you mas tutorialnya, izin ngelink ya mas ehehe..
    follow dong blog ane mas!! ane follow situ ya, biar nambah kenceng SEO nya ^^
    www.collegerlearn.blogspot.com

    ReplyDelete
  7. ada demonya gak mas?? saya belum paham dengan ini

    ReplyDelete
  8. ya gan binggung nya terlalu panjang scrip nya gan apa lagi ane ngerjain pasang scrip nya jam 3 pagi ane simpan aja dulu gan besok di lanjutkan kmbli tanks gan semoga bermanfaat Salam Gan Semoga Sukses visit back yoi gan

    ReplyDelete
  9. pos ane kok jadi double yh keluarnya

    ReplyDelete
  10. This is very interesting, You are a very skilled blogger.
    I have joined your feed and look forward to seeking more of your magnificent post.
    Also, I've shared your web site in my social networks!

    Feel free to surf to my webpage :: advice on how to get a guy

    ReplyDelete
  11. If some one needs to be updated with hottest technologies after
    that he must be go to see this site and be up to date everyday.


    my homepage; rentals

    ReplyDelete
  12. Hi there! I simply want to give a huge thumbs up for the nice info you could
    have here on this post. I will be coming back to your blog for extra soon.


    Feel free to visit my blog - SEO收費

    ReplyDelete
  13. Good day! I simply would like to give an enormous thumbs
    up for the good info you may have right here on this post.
    I shall be coming back to your weblog for extra soon.


    Look into my website :: semantics linguistics encyclopedia

    ReplyDelete
  14. Good way of telling, and fastidious article to get data concerning my
    presentation subject matter, which i am going to deliver
    in school.

    Feel free to surf to my web blog; accommodations in

    ReplyDelete
  15. Howdy! I just wish to give an enormous thumbs up for the great data you may have right here on
    this post. I will probably be coming back to your weblog for extra
    soon.

    Here is my web-site; seoul korea time change

    ReplyDelete
  16. Howdy! I just wish to give a huge thumbs up for the good data you’ve gotten right here on this post.
    I will likely be coming again to your blog for extra soon.



    My website; seo toolbar for chrome download

    ReplyDelete
  17. Hey! I simply would like to give an enormous thumbs up for the nice data you have right here on this post.
    I will likely be coming back to your blog for extra soon.


    Feel free to surf to my site ... semantic or syntax error

    ReplyDelete
  18. Hello! I just would like to give an enormous thumbs up for the nice
    info you’ve here on this post. I shall be coming again to your blog
    for more soon.

    Here is my site; seohyun tumblr

    ReplyDelete
  19. Hi there! I simply wish to give a huge thumbs up for the good information you’ve gotten here on
    this post. I shall be coming again to your blog for more soon.


    Also visit my website - semaphore symbol for the letter m

    ReplyDelete
  20. Whats up! I simply wish to give an enormous thumbs
    up for the nice information you have right here on this
    post. I shall be coming again to your weblog for more soon.


    Also visit my web-site seoul backpackers hostel myeongdong

    ReplyDelete
  21. Hey! I just would like to give an enormous thumbs up for the nice info
    you have got here on this post. I will be coming again to your blog for more soon.


    my website - amd sempron 140 power consumption

    ReplyDelete
  22. nice artikel... kunjungi blog ane juga gan... cekidot --> http://raflyhariss.blogspot.com/

    ReplyDelete
  23. sangat membantu sekali, kebanyakan pakai pre dan ini pakai text area,,

    ReplyDelete
  24. Nice infonya..
    Kunjungi blog saya yaa
    agusraze.blogspot.com

    ReplyDelete
  25. Terima kasih ini info yang sangat berguna :D

    ReplyDelete
  26. http://matarisenja.blogspot.com
    makasih gan, newbie

    ReplyDelete