Rabu, 03 Oktober 2012

15.44

Memasang Syntax Highlighter Pada Blogger

Unknown  , , , ,  4 comments

Assalamualaikum Warahmatullahi Wabarakatuh.

Pada postingan kali ini, Newbie akan berbagi sedikit mengenai tips dan trik blogger. Soalnya Newbie juga baru menemukan cara ini, ketika Newbie ingin membuat tutorial Web didalam Websiter Newbie, disitulah mulai terlintas bagaimana cara membuat coding agar tampak indah dilihat diblog. Akan tetapi Newbie belum tahu apa namanya, Newbie cari aja digoogle
"Menuliskan coding di blog","Membuat code web seperti dinotepad untuk blogger" dan lain sebagainya. Akan tetapi hasilnya mengecewakan semua,,,, (-___-). Akan tetapi setelah berjuang keras, Newbie bertanya kepada seorang kawan yang sudah master di dunia Website. Sebut saja namanya Abang Trezz. Nah, dari itu Newbie menemukan sebuah titik terang yang bisa mengarahkan Newbie untuk mendapatkan apa yang Newbie cari. Dan tersebutlah judulnya "Memasang Syntax Highlighter Pada Blogger". 

Mungkin diatas itu sebagai pembukaannya, maaf kalo ada yang kurang berkenan. Baiklah kita mulai tutorial untuk memasang syntax highlighter padad blogger, karena dari tadi Newbie udah banyak Basa Basi ( Bukan nasi basi). ^_^. Simak langkah-langkahnya :

  1. Login dulu ke blogger. Kemudian buka Template > Edit HTML, centang "Expand Template Wignet".
  2. Kemudian cari kode : </head>. Untuk mempercepat pencarian gunakan Ctrl+F, dan bila sudah ketemu letakkan kode berikut diatas kode </head>.
  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> 

  1. Kemudian cari kode : </b:skin>. 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; }

  1. [Terakhir] Kemudian cari kode : </body>. 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> 

  1. Nah dan yang terakhir adalah bagaimana cara menggunakannya ?
    Cara menggunakannya sangatlah mudah, Sahabat Newbie hanya perlu menambahkan kode dibawah ini jika ingin membuat Syntax Highlighter.
  1. <pre class="html" name="code">TARUH TULISAN ANDA DISINI 
  2. </pre>



Semoga tutorial yang singkat ini [banyak sebenarnya]. ^_^. hehehe  bisa membantu sahabat Newbie. Terimakasih telah menyempatkan diri untuk berkunjung diblog Websiter Newbie.

Note:
Contoh penggunaannya telah saya terapkan dalam tutorial ini


Wassalamualaikum Warahmatullahi Wabarakatuh.

Administrator

Unknown

Terima kasih telah berkunjung ke Websiter Newbie. Tempatnya menambah ilmu bagi para newbie.
Websiter Newbie / Study from zero to hero !
Related Posts
COMMENT!

4 komentar:

  1. Unknown4 Oktober 2012 pukul 11.43

    Waaaah,, itu perlu di koreksi sedikit...
    Tambahan pada penyebutan nama di paragraf pembukanya sepertinya terlalu lebay...

    kalo yang lainnya, overall: luar biasa... :)

    sedikti saran (hanya saran), kalo bisa captchanya di disable aja dulu, kalo emang mulai banyak spam yang masuk, baru di aktifkan lagi, toh juga sekarang sudah ada fitur anti spam dari blogger... :)

    BalasHapus
    Balasan
    1. Unknown5 Oktober 2012 pukul 08.54

      Heee,,,, kn emg bener k'. gk lebay ko'.....
      Kn master yg udah membimbing saya hingga smpai saat ini (hihihi....) terharu....!!!!

      O iya, untuk captcha tu dmn emg yea ????
      sy gk tau k'. bru belajar ngeblog kn,,,, hehehe....

      Thanks dah berkenan hadir disini.... (sering-sering aja deh ksini..) ^_^

      Hapus
    2. Unknown5 Oktober 2012 pukul 18.00

      anak muda, kau seperti ini karena usahamu, dan izin Allah SWT :)

      masuk ke settingan komentarnya...

      Hapus
    3. Unknown6 Oktober 2012 pukul 08.58

      ya emang gitu sih k'. tapi Allah memberikannya lewat perantara kk jg kn,,,, ^_^

      Okey, mari otak atik blogger....

      Hapus

Langganan: Posting Komentar (Atom)

 

Copyright @ 2013 Websiter Websiter Newbie.

Designed by Templateism | MyBloggerLab