belajar usaha, materi smk, game

Memasang Syntax Highlighter blog terbaru


-->

sebetulnya saya pusing waktu teman meminta soce code program, hal yang membuat saya bingung adalah. bagaimana cara membuat tampilan souce code / scrip program bisa tertata rapi dan mudah dicopi seperti kita menggunakan notepad++ atau editor java. setelah lama cara akhire ketemu deh caranya.
1. silahkan login ke blognya masing - masing
2. masuk dashbord
3. kemudian masuk template dan dan klik edit HTML
4. jangan lupa klik expand widget
5. cari kede </head> kemudian letakkan kode dibawah ini diatasnya

  1. <script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shCore.js" type="text/javascript">  
  2. </script>    
  3. <script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCpp.js" type="text/javascript">  
  4. </script>    
  5. <script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCSharp.js" type="text/javascript">  
  6. </script>    
  7. <script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCss.js" type="text/javascript">  
  8. </script>    
  9. <script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushDelphi.js" type="text/javascript">  
  10. </script>    
  11. <script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJava.js" type="text/javascript">  
  12. </script>    
  13. <script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJScript.js" type="text/javascript">  
  14. </script>    
  15. <script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPhp.js" type="text/javascript">  
  16. </script>    
  17. <script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPython.js" type="text/javascript">  
  18. </script>    
  19. <script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushRuby.js" type="text/javascript">  
  20. </script>    
  21. <script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushSql.js" type="text/javascript">  
  22. </script>    
  23. <script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushVb.js" type="text/javascript">  
  24. </script>    
  25. <script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushXml.js" type="text/javascript">  
  26. </script> 

6. kemudian masukkan kode dibawah ini diatas kode </b:skin>
  1. .dp-highlighter  
  2. {  
  3.  font-family: "Consolas", "Monaco", "Courier New", Courier, monospace;  
  4.  font-size: 12px;  
  5.  background-color: #E7E5DC;  
  6.  width: 99%;  
  7.  overflow: auto;  
  8.  margin: 18px 0 18px 0 !important;  
  9.  padding-top: 1px; /* adds a little border on top when controls are hidden */  
  10. }  
  11. /* clear styles */  
  12. .dp-highlighter ol,  
  13. .dp-highlighter ol li,  
  14. .dp-highlighter ol li span   
  15. {  
  16.  margin: 0;  
  17.  padding: 0;  
  18.  border: none;  
  19. }  
  20. .dp-highlighter a,  
  21. .dp-highlighter a:hover  
  22. {  
  23.  background: none;  
  24.  border: none;  
  25.  padding: 0;  
  26.  margin: 0;  
  27. }  
  28. .dp-highlighter .bar  
  29. {  
  30.  padding-left: 45px;  
  31. }  
  32. .dp-highlighter.collapsed .bar,  
  33. .dp-highlighter.nogutter .bar  
  34. {  
  35.  padding-left: 0px;  
  36. }  
  37. .dp-highlighter ol  
  38. {  
  39.  list-style: decimal; /* for ie */  
  40.  background-color: #fff;  
  41.  margin: 0px 0px 1px 45px !important; /* 1px bottom margin seems to fix occasional Firefox scrolling */  
  42.  padding: 0px;  
  43.  color: #5C5C5C;  
  44. }  
  45.   
  46. .dp-highlighter.nogutter ol,  
  47. .dp-highlighter.nogutter ol li  
  48. {  
  49.  list-style: none !important;  
  50.  margin-left: 0px !important;  
  51. }  
  52. .dp-highlighter ol li,  
  53. .dp-highlighter .columns div  
  54. {  
  55.  list-style: decimal-leading-zero; /* better look for others, override cascade from OL */  
  56.  list-style-position: outside !important;  
  57.  border-left: 3px solid #6CE26C;  
  58.  background-color: #F8F8F8;  
  59.  color: #5C5C5C;  
  60.  padding: 0 3px 0 10px !important;  
  61.  margin: 0 !important;  
  62.  line-height: 14px;  
  63. }  
  64. .dp-highlighter.nogutter ol li,  
  65. .dp-highlighter.nogutter .columns div  
  66. {  
  67.  border: 0;  
  68. }  
  69. .dp-highlighter .columns  
  70. {  
  71.  background-color: #F8F8F8;  
  72.  color: gray;  
  73.  overflow: hidden;  
  74.  width: 100%;  
  75. }  
  76. .dp-highlighter .columns div  
  77. {  
  78.  padding-bottom: 5px;  
  79. }  
  80. .dp-highlighter ol li.alt  
  81. {  
  82.  background-color: #FFF;  
  83.  color: inherit;  
  84. }  
  85. .dp-highlighter ol li span  
  86. {  
  87.  color: black;  
  88.  background-color: inherit;  
  89. }  
  90. /* Adjust some properties when collapsed */  
  91. .dp-highlighter.collapsed ol  
  92. {  
  93.  margin: 0px;  
  94. }  
  95. .dp-highlighter.collapsed ol li  
  96. {  
  97.  display: none;  
  98. }  
  99. /* Additional modifications when in print-view */  
  100. .dp-highlighter.printing  
  101. {  
  102.  border: none;  
  103. }  
  104. .dp-highlighter.printing .tools  
  105. {  
  106.  display: none !important;  
  107. }  
  108. .dp-highlighter.printing li  
  109. {  
  110.  display: list-item !important;  
  111. }  
  112. /* Styles for the tools */  
  113. .dp-highlighter .tools  
  114. {  
  115.  padding: 3px 8px 3px 10px;  
  116.  font: 9px Verdana, Geneva, Arial, Helvetica, sans-serif;  
  117.  color: silver;  
  118.  background-color: #f8f8f8;  
  119.  padding-bottom: 10px;  
  120.  border-left: 3px solid #6CE26C;  
  121. }  
  122. .dp-highlighter.nogutter .tools  
  123. {  
  124.  border-left: 0;  
  125. }  
  126. .dp-highlighter.collapsed .tools  
  127. {  
  128.  border-bottom: 0;  
  129. }  
  130. .dp-highlighter .tools a  
  131. {  
  132.  font-size: 9px;  
  133.  color: #a0a0a0;  
  134.  background-color: inherit;  
  135.  text-decoration: none;  
  136.  margin-right: 10px;  
  137. }  
  138. .dp-highlighter .tools a:hover  
  139. {  
  140.  color: red;  
  141.  background-color: inherit;  
  142.  text-decoration: underline;  
  143. }  
  144. /* About dialog styles */  
  145. .dp-about { background-color: #fff; color: #333; margin: 0px; padding: 0px; }  
  146. .dp-about table { width: 100%; height: 100%; font-size: 11px; font-family: Tahoma, Verdana, Arial, sans-serif !important; }  
  147. .dp-about td { padding: 10px; vertical-align: top; }  
  148. .dp-about .copy { border-bottom: 1px solid #ACA899; height: 95%; }  
  149. .dp-about .title { color: red; background-color: inherit; font-weight: bold; }  
  150. .dp-about .para { margin: 0 0 4px 0; }  
  151. .dp-about .footer { background-color: #ECEADB; color: #333; border-top: 1px solid #fff; text-align: right; }  
  152. .dp-about .close { font-size: 11px; font-family: Tahoma, Verdana, Arial, sans-serif !important; background-color: #ECEADB; color: #333; width: 60px; height: 22px; }  
  153. /* Language specific styles */  
  154. .dp-highlighter .comment, .dp-highlighter .comments { color: #008200; background-color: inherit; }  
  155. .dp-highlighter .string { color: blue; background-color: inherit; }  
  156. .dp-highlighter .keyword { color: #069; font-weight: bold; background-color: inherit; }  
  157. .dp-highlighter .preprocessor { color: gray; background-color: inherit; }

7. kemudian masukkan kode dibawah ini diatas kode </body>. Dan simpanlah template blog Anda.
  1. <script language="javascript">  
  2.   
  3. dp.SyntaxHighlighter.BloggerMode();    
  4. dp.SyntaxHighlighter.HighlightAll('code');    
  5.   
  6. </script> 

8. Cara menggunakannya sangatlah mudah, hanya perlu menambahkan kode dibawah ini jika ingin membuat Syntax Highlighter.

  1. <pre class="html" name="code">TARUH TULISAN ANDA DISINI  
  2. </pre>
Anda baru saja membaca artikel yang berkategori tips blog dengan judul Memasang Syntax Highlighter blog terbaru. Anda bisa bookmark halaman ini dengan URL http://saapii.blogspot.com/2013/02/memasang-syntax-highlighter-blog-terbaru.html. Terima kasih!
Ditulis oleh: syaiful ridlo - Sunday, 10 February 2013

3 komentar untuk "Memasang Syntax Highlighter blog terbaru"

  1. nice info gan!

    kunjung & comment balik ya di blog Saya darkmetaland.blogspot.com

    ReplyDelete
  2. yang pemasanganya pakai text area gimana sob? infonya ya!

    ReplyDelete