Memasukkan Kode dan Blockquote pada Komentar

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 &quot;PT Sans Narrow&quot;;}

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 &quot;PT Sans Narrow&quot;;}

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

Terima kasih atas masukannya +Kang Mousir
Enter your email address to get update from Fathoni16.
Print PDF

29 komentar Tambahkan komentar

kebetulan lagi ngutak ngatik kolom komentar nih, bagus juga kalau sekalian dipasangi kode blockquote nya dari sini nih...:p

Balas

iya kang. lebih baik jika komentarnya sudah ada kode dan blockquotenya. hehe.. =D

Balas

Izin coba scripnya Mas... menarik nich...

Balas

silahkan dicoba mas... :D

Balas

keren sob. Jadi enak komennya

Balas

nambah ilmu lagi nih, terimakasih sob,ini dapat memudahkan untuk memasukkan script di komentar :)

Balas

thx gan.. langsung coba ah.

Balas

silahkan dicoba sob. :D

Balas

Wah mantep nih gan wajib di coba. Izin coba gan

Balas

ya sob. jadi enak komennya jika ingin masukan kode atau blockquote tinggal tulis aja sob, seperti di atas. tapi, jangan lupa diparse dulu untuk kodenya

Balas

iya sob, sama-sama :) ini bisa mempermudah memasukkan kode dan blockquote pada komentar

Balas

sama-sama mas :D silahkan dicoba

Balas

silahkan aja sob dicoba...

Balas

nice gan tipsnya... coba ahh

Balas

silahkan dicoba sob :)

Balas

Mudah banget caranya sob :)

Balas

Menarik Mas Fathonitutorialmemasang kode blockquote pada komentar
Ini belum ada di blog saya, saya coba ya Mas? makasih atas berbaginya

Balas

Memang mudah mas. Nggak ribet. Cuma nambahin js sama css sedikit. :)

Balas

hehehe....belum ada ya. Silahkan aja dicoba Kang Saud.
Semoga bermanfa'at :D

Balas

Nice posting gan :)
Ijin Simak postingan ~

Balas

silahkan disimak mas.... :)

Balas

Pake jquery jadi lebih mudah gk seribet js hehe. Oh ya biar pada saat JavaScript browser di nonaktifkan tambah juga pada css blockquote menjadi blockquote,b[rel="quote"] agar berfungsi saat js mati :D

Balas

Oh ya kang, makasih sarannya. Nanti saya perbaiki lagi.

Balas

kebetulan blog saya blog tutorial. Enakan gini mas, bisa jawab komentar pake kodenya langsung

Balas

iya mas. jika komentarnya sudah ada giniannya, kita tinggal masukin aja kodenya...

Balas

Wah keren Nich kalo di komentar bisa pasang blockquot :)

Ijin Test Sob! :)

Balas

iya kang. Komentar bisa jadi keren. :D
silahkan ditest sob.

Balas

Spesialis penyakit dalam, termasuk wasir atau wasir, pengobatan herbal
obat wasir

Balas

Dilarang menyertakan link aktif, iklan, ataupun titip link dalam berkomentar di Blog Fathoni16. Silahkan berkomentar tanpa ada kata-kata kotor.

Konversi KodeEmoticon