Ya'ahowu Hondrö™

SELAMAT DATANG DI BLOG ILOOK IDEA HONDRO
Home » » Cara Posting Source Code di Blog

Cara Posting Source Code di Blog

Written By BAPAK BOOM on 10 Jan 2014 | Jumat, Januari 10, 2014

Beberapa bahasa Pemograman yang dapat di posting dengan menggunakan Metode SyntaxHighlighter Berikut:
text, html, css, c, c++, c-sharp, c#, cpp, delphi, jscript, php, java, pascal, matlab, vb, vb.Net,
perl, py, python, rb, ruby, sql, rails, ror, xhtml, xml

Biar kelihatan keren... :D


  1. Wordpress.com
  2. Untuk Wordpres kita Cuman Menambahkan kode seperti berikut:
    [sourcecode language="html"]  
    Ketikkan Source code yang akan kita postingkan
    [/sourcecode] 
  3. Blogspot.com
  4. Berbeda dengan wordpress di bloggger ada sedikit beberapa kode yang harus di masukan kedalam kode HTML templeate Blog, Langsung aja:
    1. Login blogger dulu>Rancangan>Edit HTML
    2. Copy Pastekan kode berikut setelah <b:skin> (supaya mudah ditemukan di serarch ja, tekan Ctrl + F di keyboard ketikan <b:skin> :D )

    3. .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; } 
      


    4. Selanjutnya Copy Paste Kode berikut sebelum sintaks </head>
    5. <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>
      


    6. Copy Paste Kode berikut sebelum sintaks </body>
    7. <script language="javascript">  
      dp.SyntaxHighlighter.BloggerMode();  
      dp.SyntaxHighlighter.HighlightAll('code');  
      </script>
      

    Nah.. selanjutnya jika kita ingin memposting koding bahasa pemograman di blog terlebih dahulu awali dengan mengetikan
    <pre class="html" name="code">Kode yang ingin kita post</pre>
    




0 comments:

Posting Komentar

Cari Blog Ini

Pengikut

Popular Posts