Saturday, July 27, 2013

Membuat Syntax Highlighter Di Blogspot

8:14 PM  ,  No comments


Cara membuat Syntax Highlighter di blogspot:
  • Log in di blog anda Klik Rancangan
  • klik Edit HTML
  • Cari kode ]]></b:skin>
  • Copy  kode di bawah ini dan paste di atas kode ]]></b:skin>
view plainprint?
  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.   
  12. /* clear styles */  
  13. .dp-highlighter ol,  
  14. .dp-highlighter ol li,  
  15. .dp-highlighter ol li span  
  16. {  
  17. margin: 0;  
  18. padding: 0;  
  19. border: none;  
  20. }  
  21.   
  22. .dp-highlighter a,  
  23. .dp-highlighter a:hover  
  24. {  
  25. background: none;  
  26. border: none;  
  27. padding: 0;  
  28. margin: 0;  
  29. }  
  30.   
  31. .dp-highlighter .bar  
  32. {  
  33. padding-left: 45px;  
  34. }  
  35.   
  36. .dp-highlighter.collapsed .bar,  
  37. .dp-highlighter.nogutter .bar  
  38. {  
  39. padding-left: 0px;  
  40. }  
  41.   
  42. .dp-highlighter ol  
  43. {  
  44. list-style: decimal; /* for ie */  
  45. background-color: #fff;  
  46. margin: 0px 0px 1px 45px !important; /* 1px bottom margin seems to fix occasional Firefox scrolling */  
  47. padding: 0px;  
  48. color: #5C5C5C;  
  49. }  
  50.   
  51. .dp-highlighter.nogutter ol,  
  52. .dp-highlighter.nogutter ol li  
  53. {  
  54. list-style: none !important;  
  55. margin-left: 0px !important;  
  56. }  
  57.   
  58. .dp-highlighter ol li,  
  59. .dp-highlighter .columns div  
  60. {  
  61. list-style: decimal-leading-zero; /* better look for others, override cascade from OL */  
  62. list-style-position: outside !important;  
  63. border-left: 3px solid #6CE26C;  
  64. background-color: #F8F8F8;  
  65. color: #5C5C5C;  
  66. padding: 0 3px 0 10px !important;  
  67. margin: 0 !important;  
  68. line-height: 14px;  
  69. }  
  70.   
  71. .dp-highlighter.nogutter ol li,  
  72. .dp-highlighter.nogutter .columns div  
  73. {  
  74. border: 0;  
  75. }  
  76.   
  77. .dp-highlighter .columns  
  78. {  
  79. background-color: #F8F8F8;  
  80. color: gray;  
  81. overflow: hidden;  
  82. width: 100%;  
  83. }  
  84.   
  85. .dp-highlighter .columns div  
  86. {  
  87. padding-bottom: 5px;  
  88. }  
  89.   
  90. .dp-highlighter ol li.alt  
  91. {  
  92. background-color: #FFF;  
  93. color: inherit;  
  94. }  
  95.   
  96. .dp-highlighter ol li span  
  97. {  
  98. color: black;  
  99. background-color: inherit;  
  100. }  
  101.   
  102. /* Adjust some properties when collapsed */  
  103.   
  104. .dp-highlighter.collapsed ol  
  105. {  
  106. margin: 0px;  
  107. }  
  108.   
  109. .dp-highlighter.collapsed ol li  
  110. {  
  111. display: none;  
  112. }  
  113.   
  114. /* Additional modifications when in print-view */  
  115.   
  116. .dp-highlighter.printing  
  117. {  
  118. border: none;  
  119. }  
  120.   
  121. .dp-highlighter.printing .tools  
  122. {  
  123. display: none !important;  
  124. }  
  125.   
  126. .dp-highlighter.printing li  
  127. {  
  128. display: list-item !important;  
  129. }  
  130.   
  131. /* Styles for the tools */  
  132.   
  133. .dp-highlighter .tools  
  134. {  
  135. padding: 3px 8px 3px 10px;  
  136. font: 9px Verdana, Geneva, Arial, Helvetica, sans-serif;  
  137. color: silver;  
  138. background-color: #f8f8f8;  
  139. padding-bottom: 10px;  
  140. border-left: 3px solid #6CE26C;  
  141. }  
  142.   
  143. .dp-highlighter.nogutter .tools  
  144. {  
  145. border-left: 0;  
  146. }  
  147.   
  148. .dp-highlighter.collapsed .tools  
  149. {  
  150. border-bottom: 0;  
  151. }  
  152.   
  153. .dp-highlighter .tools a  
  154. {  
  155. font-size: 9px;  
  156. color: #a0a0a0;  
  157. background-color: inherit;  
  158. text-decoration: none;  
  159. margin-right: 10px;  
  160. }  
  161.   
  162. .dp-highlighter .tools a:hover  
  163. {  
  164. color: red;  
  165. background-color: inherit;  
  166. text-decoration: underline;  
  167. }  
  168.   
  169. /* About dialog styles */  
  170.   
  171. .dp-about { background-color: #fff; color: #333; margin: 0px; padding: 0px; }  
  172. .dp-about table { width: 100%; height: 100%; font-size: 11px; font-family: Tahoma, Verdana, Arial, sans-serif !important; }  
  173. .dp-about td { padding: 10px; vertical-align: top; }  
  174. .dp-about .copy { border-bottom: 1px solid #ACA899; height: 95%; }  
  175. .dp-about .title { color: red; background-color: inherit; font-weight: bold; }  
  176. .dp-about .para { margin: 0 0 4px 0; }  
  177. .dp-about .footer { background-color: #ECEADB; color: #333; border-top: 1px solid #fff; text-align: right; }  
  178. .dp-about .close { font-size: 11px; font-family: Tahoma, Verdana, Arial, sans-serif !important; background-color: #ECEADB; color: #333; width: 60px; height: 22px; }  
  179.   
  180. /* Language specific styles */  
  181.   
  182. .dp-highlighter .comment, .dp-highlighter .comments { color: #008200; background-color: inherit; }  
  183. .dp-highlighter .string { color: blue; background-color: inherit; }  
  184. .dp-highlighter .keyword { color: #069; font-weight: bold; background-color: inherit; }  
  185. .dp-highlighter .preprocessor { color: gray; background-color: inherit; }  
  • Lalu Cari kode </head> kalau sudah ketemu copy kode dibawah ini dan paste diatas kode </head>
view plainprint?
  1. <!-- Add-in CSS for syntax highlighting -->  
  2. <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shCore.js' type='text/javascript'></script>  
  3. <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCpp.js' type='text/javascript'></script>  
  4. <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCSharp.js' type='text/javascript'></script>  
  5. <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCss.js' type='text/javascript'></script>  
  6. <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushDelphi.js' type='text/javascript'></script>  
  7. <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJava.js' type='text/javascript'></script>  
  8. <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJScript.js' type='text/javascript'></script>  
  9. <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPhp.js' type='text/javascript'></script>  
  10. <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPython.js' type='text/javascript'></script>  
  11. <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushRuby.js' type='text/javascript'></script>  
  12. <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushSql.js' type='text/javascript'></script>  
  13. <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushVb.js' type='text/javascript'></script>  
  14. <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushXml.js' type='text/javascript'></script>  
  • Setelah itu Cari lagi kode </body> dan simpan kode di bawah ini di atas kode </body>
view plainprint?
  1. ><!-- Add-in Script for syntax highlighting -->  
  2. <script language='javascript'>  
  3. dp.SyntaxHighlighter.BloggerMode();  
  4. dp.SyntaxHighlighter.HighlightAll('code');  
  5. </script>  
  • Lalu Save template
Setiap sobat  ingin  posting kode javascript, HTML atau kode CSS, sobat blogger harus  menulis dimode "Edit HTML" dari editor posting sobat

Untuk penulisan kode dipostingan:
view plainprint?
  1. <pre name="code" class="cpp">  
  2. "tulis script kamu di sini"  
  3. </pre> 

0 comments:

Post a Comment

Subscribe to: Post Comments (Atom)