Memasukkan Kode dan Blockquote pada Komentar

Memasukkan Kode dan Blockquote pada Komentar - Mengingat bahwa kode dan blockquote sangat penting dan dibutuhkan oleh blogger terutama blog-blog tutorial, saya akan membahas mengenai cara memasukkan kode dan blockquote pada komentar. Dan untuk gambar ataupun video youtube pada komentar, saya rasa tidak terlalu dibutuhkan di sini. Maka dari itu, saya hanya akan membahas pemasangan kode dan blockquote pada komentar saja.

Sebenarnya, di Google sendiri sudah pernah ada yang posting. Tapi, saya lihat masih ada beberapa tutorial di luar sana yang masih kurang jelas, sehingga tidak sedikit pula banyak blogger yang kesulitan dan tidak berhasil dalam penggunaannya. Maka dari itu, saya akan memberikan tips yang paling mudah dan tidak ribet. 

Yang pertama, tentunya kita harus sudah memasang syntax highlighter di blog kita. Bagi yang sudah memasang, silahkan lewati langkah yang pertama ini.

Memasang Syntax Highlighter 

Dalam hal ini, saya ambil JavaScript yang diberikan oleh +Kang Ismet. 

<script src='http://bloggertut.googlecode.com/svn/trunk/js/highlight.pack.js'/>
<script>
hljs.initHighlightingOnLoad();
</script>

Simpan JavaScriptnya di atas </body>.

Untuk CSS-nya, silahkan masukkan di atas ]]></b:skin> atau </style>

pre,i[rel="pre"] {padding:.8em 1em;margin:0;background-color:#2f3741;border-left:4px solid #40627E;font-size:13px;color:#839496;
font-family: Consolas,"Andale Mono WT","Andale Mono","Lucida Console","Lucida Sans Typewriter","DejaVu Sans Mono","Bitstream Vera Sans Mono","Liberation Mono","Nimbus Mono L",Monaco,"Courier New",Courier,Monospace;line-height:1.4em;position:relative;white-space: pre;word-wrap: normal;white-space:pre;overflow:auto}
code {font-family: Consolas,"Andale Mono WT","Andale Mono","Lucida Console","Lucida Sans Typewriter","DejaVu Sans Mono","Bitstream Vera Sans Mono","Liberation Mono","Nimbus Mono L",Monaco,"Courier New",Courier,Monospace;font-size:13px;color: #d14;}
#comments code {color:#bbbb6d;}
pre code {padding:0 !important;color: #a3a49a;background: none !important;border:none !important;display:block;}
pre mark {background-color:#1a5752;color:#a3a483}
pre .line-number {float:left;margin:0 1em 0 -1em;color:#61686d;background-color:#39424e;text-align:right;min-width:2.5em;padding-right:4px;}
pre .comment,pre .template_comment,pre .diff .header,pre .doctype,pre .pi,pre .lisp .string,pre .javadoc {color: #586e75;font-style: italic;}
pre .keyword,pre .winutils,pre .method,pre .addition,pre .css .tag,pre .request,pre .status,pre .nginx .title {color: #859900;}
pre .number,pre .command,pre .string,pre .tag .value,pre .rules .value,pre .phpdoc,pre .tex .formula,pre .regexp,pre .hexcolor {color: #7195a3;}
pre .title,pre .localvars,pre .chunk,pre .decorator,pre .built_in,pre .identifier,pre .vhdl .literal,pre .id,pre .css .function {color: #569dcf;}
pre .attribute,pre .variable,pre .lisp .body,pre .smalltalk .number,pre .constant,pre .class .title,pre .parent,pre .haskell .type {color: #aa985a;}
pre .preprocessor,pre .preprocessor .keyword,pre .shebang,pre .symbol,pre .symbol .string,pre .diff .change,pre .special,pre .attr_selector,pre .important,pre .subst,pre .cdata,pre .clojure .title,pre .css .pseudo {color: #509a55;}
pre .deletion {color: #dc322f;}
pre .tex .formula {background: #073642;}

Memasukkan Kode dan Blockquote pada Komentar

Setelah CSS syntax highlighter terpasang, kita akan menambahkan CSS sedikit untuk blockquote-nya.

blockquote{margin:20px;background:#293E6A;color:#fff;padding:10px;border-left:20px solid #04043C;display:block;font:17px "PT Sans Narrow";}

Silahkan taruh CSS di atas di bawah-nya CSS tag pre (syntax highlighter)

Jika sudah, silahkan tambahkan JavaScript berikut dan letakkan di atas </body>. JavaScript ini saya dapat dari Mas +Saeful Rahman.

<script type='text/javascript'>
//<![CDATA[
$("#comment_block").each(function () {
    $('i[rel="pre"]', this).replaceWith(function () {
        return $("<pre></pre>").append($("<code></code>").append($(this).contents()))
    });
    $('b[rel="quote"]', this).replaceWith(function () {
        return $("<blockquote></blockquote>").append($(this).contents())
    });
    $('i[rel="code"]', this).contents().unwrap().wrap("<code/>")
});
//]]>
</script>

Sesuaikan id komentar-nya dengan template blog anda. Silahkan ganti #comment_block  jika tidak sesuai.

Pengaturan Penulisan

Menulis tag pre (kode panjang)

<i rel="pre"> Tulis kode yang sudah diparse di sini <i>

Menulis tag code (kode pendek)

<i rel="code"> Tulis kode yang sudah diparse di sini </i>

Menulis catatan blockquote

<b rel="quote"> Tulis catatan blockquote di sini </i>

Selesai.... cukup mudah bukan. Semoga bermanfa'at

UPDATE

Silahkan perhatikan lagi css blockquote-nya. Ubah blockquote menjadi blockquote,b[rel="quote"]. Jadi, nanti akan seperti di bawah ini. 

blockquote,b[rel="quote"] {margin:20px;background:#293E6A;color:#fff;padding:10px;border-left:20px solid #04043C;display:block;font:17px "PT Sans Narrow";}

Perubahan ini dimaksudkan agar penggunaan blockquote pada komentar masih bisa berfungsi apabila JavaScript-nya mati.

Terima kasih atas masukannya +Kang Mousir