Blog Tutorial

Tutorial Blog, Cheat Games, Tutorial Ponsel, Tutorial Komputer, Tutorial Browser

Senin, 24 Mei 2010

Menampilkan Kode Yang unik di postingan (2)

Kategori :
Menampilkan Kode Yang unik di psotingan (2). Pada kesempatan sebelumnya saya telah membahas tentang cara menampilkan kode html di postingan yang unik nah kalau sekarang keluar deh versi kedua-nya yang lebih unik lagi dan tidak perlu di parse (baca : Menampilkan kode html di postingan) tetapi yang versi pertama itu tidak menggunakan javasript tetapi menggunakan css jadi tidak terlalu memberatkan size blog.

Walaupun trik Menampilkan kode yang unik di postingan (2) ini lebih unik dibandingkan Menampilkan kode yang unik di postingan (1) namun yang versi keduanya akan menambah size blog kita menjadi lebih berat. Jadi terserah sobat mau di pakai atau tidak soalnya disini saya hanya bertugas untuk membagikan ilmu yang saya dapat dari alexgorbatchev. sekarang kita lihat langkahnya saja y biar lebih cepat.
  1. login ke blogger
  2. setelah login masuk ke Tata Letak => Edit HTML
  3. lalu cari kode ]]></b:skin> lalu taruh kode di bawah ini tepat di atasnya


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


    Menampilkan Kode Yang unik di psotingan (2)
    Menampilkan Kode Yang unik di psotingan (1)
  4. Setelah itu cari kode </head> lalu taruh kode di bawah ini tepat di atasnya


    <!-- Add-in CSS for syntax highlighting -->
    <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>


    Menampilkan Kode Yang unik di psotingan (2)Menampilkan Kode Yang unik di psotingan (1)
  5. nah setelah itu cari lagi kode </body> lalu taruh kode di bawah ini tepa di atsnya juga


    <!-- Add-in Script for syntax highlighting -->
    <script language='javascript'>
    dp.SyntaxHighlighter.BloggerMode();
    dp.SyntaxHighlighter.HighlightAll('code');
    </script>


    Menampilkan Kode Yang unik di psotingan (2)Menampilkan Kode Yang unik di psotingan (1)
  6. Nah sekarang sobat bisa menyimpannya
  7. Trus cara menggunakannya gimana? begini caranya, pada halaman post editor sobat harus memasukan kode di bawah ini

    <pre name="code" class="cpp">

    ----Taruh HTML Di sini-----

    </pre>

    Menampilkan Kode Yang unik di psotingan (2)Menampilkan Kode Yang unik di psotingan (2)
  8. nah disana ada kalimat ----Taruh HTML Di sini----- nah disitulah sobat menaruh kode HTML-nya
  9. trus kalau mau ngambil kodenya di halaman postingan gimana? memang ini trik ini unik sekali jadi kita tidak bisa asal copy saja namun pada trik ini sudah di atur untuk mengambil kodenya yaitu dengan mengklik View Plain lalu baru bisa mengambilnya

    Menampilkan Kode Yang unik di psotingan (1)
  10. Selesai deh
Bagaimana lebih baik Menampilkan Kode Yang unik di psotingan yang unik (1) atau Menampilkan Kode Yang unik di psotingan yang unik (2)? kalau menurut saya template yang menggunakan css lebih baik dari pada template yang menggunakan banyak javascript. Walaupun template lebih keren menggunakan javascript namun akan membuat template kita menjadi berat apabila di pakai, mungkin hanya sekian yang bisa saya sampaikan. Terima Kasih dan Happy Blogging.
Bagikan Artikel : Facebook Twitter Google+ Linkedin Technorati Digg

4 Komentar untuk Menampilkan Kode Yang unik di postingan (2)

Wah info'y muantabz Sob.........D'tgu yg berikutnya......

maaf sebelumnya aku baru bisa mampir gy disini......Sukses slalu kawan.......

oh ini SyntaxHighlighter ya mas??

keren uy..

@Girant_31 => bener mas, itu syntax Highlighter :D