Sunday, July 31, 2016

Menyisipkan kode di komentar Blogger

thumb





Selamat Pagi 😀. saya mau bagi tutorial cara menampilkan Kode Prism atau syntax Highlighter di komentar yang agak terbilang terlarang .
ya memang . tapi bagaimana lagi di saat ini kita butuh itu untuk memudahkan komentator mekspresikan diri nya di komentar dalam tanda kutip "NO SPAM" .

oke berikut tutorial nya.



Pertama yang harus kita lakukan adalah menambahkan jquery dan stylsheet terlebih dahulu.
Taruh di atas <b:skin>

<link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css' rel='stylesheet' type='text/css'/>
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>

Lalu Tambahkan Jquery di bawah kode ]]> </ b: skin>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js' type='text/javascript'></script>

Lalu cari kode <div class='comments' id='comments'> ,kode yang pertama bukan yang kedua.
lalu tambahkan kode di bawah ini diatas <div class='comments' id='comments'> .

<b:if cond='data:blog.pageType != "static_page"'>
    &lt;div class='panel panel-info'&gt;
      &lt;div class='panel-heading'&gt;Meletakan Kode Di komentar&lt;/div&gt;
      &lt;div class='panel-body'&gt;
Untuk menyisipkan kode, gunakan tag &amp;lt;code&amp;gt;&amp;amp;lt;i rel=&amp;amp;quot;code&amp;amp;quot;&amp;amp;gt;&amp;amp;lt;/i&amp;amp;gt;&amp;lt;/code&amp;gt; atau &amp;lt;code&amp;gt;&amp;amp;lt;i rel=&amp;amp;quot;pre&amp;amp;quot;&amp;amp;gt;&amp;amp;lt;/i&amp;amp;gt;&amp;lt;/code&amp;gt;&amp;lt;/br&amp;gt;
Untuk menyisipkan gambar, gunakan tag &amp;lt;code&amp;gt;&amp;amp;lt;i rel=&amp;amp;quot;image&amp;amp;quot;&amp;amp;gt;&amp;amp;lt;/i&amp;amp;gt;&amp;lt;/code&amp;gt;&amp;lt;/br&amp;gt;
Untuk menyisipkan judul, gunakan tag &amp;lt;code&amp;gt;&amp;amp;lt;b rel=&amp;amp;quot;h3&amp;amp;quot;&amp;amp;gt;&amp;amp;lt;/b&amp;amp;gt;&amp;lt;/code&amp;gt;&amp;lt;/br&amp;gt;
Untuk menyisipkan catatan, gunakan tag &amp;lt;code&amp;gt;&amp;amp;lt;b rel=&amp;amp;quot;quote&amp;amp;quot;&amp;amp;gt;&amp;amp;lt;/b&amp;amp;gt;&amp;lt;/code&amp;gt;&amp;lt;/br&amp;gt;
Untuk menciptakan efek tebal gunakan tag &amp;lt;code&amp;gt;&amp;amp;lt;b&amp;amp;gt;&amp;amp;lt;/b&amp;amp;gt;&amp;lt;/code&amp;gt;&amp;lt;/br&amp;gt;
Untuk menciptakan efek huruf miring gunakan tag &amp;lt;code&amp;gt;&amp;amp;lt;i&amp;amp;gt;&amp;amp;lt;/i&amp;amp;gt;&amp;lt;/code&amp;gt; &amp;lt;/br&amp;gt;
&amp;lt;/br&amp;gt;&amp;lt;/br&amp;gt;
&amp;lt;a class=&amp;quot;btn btn-primary btn-xs&amp;quot; data-toggle=&amp;quot;modal&amp;quot; data-target=&amp;quot;#myModal&amp;quot;&amp;gt;Parse&amp;lt;/a&amp;gt;

&amp;lt;!-- Modal --&amp;gt;
&amp;lt;div id=&amp;quot;myModal&amp;quot; class=&amp;quot;modal fade&amp;quot; role=&amp;quot;dialog&amp;quot;&amp;gt;
  &amp;lt;div class=&amp;quot;modal-dialog&amp;quot;&amp;gt;

    &amp;lt;!-- Modal content--&amp;gt;
    &amp;lt;div class=&amp;quot;modal-content&amp;quot;&amp;gt;
      &amp;lt;div class=&amp;quot;modal-header&amp;quot;&amp;gt;
        &amp;lt;button type=&amp;quot;button&amp;quot; class=&amp;quot;close&amp;quot; data-dismiss=&amp;quot;modal&amp;quot;&amp;gt;&amp;amp;times;&amp;lt;/button&amp;gt;
        &amp;lt;h4 class=&amp;quot;modal-title&amp;quot;&amp;gt;Html Parser&amp;lt;/h4&amp;gt;
      &amp;lt;/div&amp;gt;
      &amp;lt;div class=&amp;quot;modal-body&amp;quot;&amp;gt;
&amp;lt;style scoped=&amp;quot;&amp;quot; type=&amp;quot;text/css&amp;quot;&amp;gt;
code{font-family:Consolas,Monaco,&amp;#39;Andale Mono&amp;#39;,&amp;#39;Courier New&amp;#39;,Courier,Monospace;color:#2a5ead;font-size:13px;padding:2px 4px;color:#d14;}
#codes{border:1px solid #ccc;width:68%;height:250px;margin:0 auto;display:block;background-color:#fafafa;color:#333;padding:15px;font:400 14px &amp;#39;Courier New&amp;#39;,Monospace;border-radius:4px}
.button-group{float:none;margin:0 auto 0;text-align:center}
button,button[disabled]:active{border:none;padding:5px 12px;text-align:center;color:#fff;display:inline-block;white-space:nowrap;background-color:#0ea6d8;cursor:pointer;font-family:&amp;#39;Open Sans&amp;#39;,Arial,Sans-Serif; font-size:13px;position:relative;top:-1px;margin:0 10px;line-height:23px;border-radius:3px;transition:all 0.3s ease-in-out;}
button:active{background:#0095c6;}
button[disabled],button[disabled]:active{background:#0095c6;}
#opt1,#opt2,#opt3,#opt4,#opt5{display:inline-block;margin:0 10px 0 0;vertical-align:middle;border:none;outline:none}
&amp;lt;/style&amp;gt;
&amp;lt;textarea id=&amp;quot;codes&amp;quot; placeholder=&amp;quot;Tulis/paste kode di sini lalu klik &amp;#39;Konversi&amp;#39;&amp;quot; spellcheck=&amp;quot;false&amp;quot;&amp;gt;&amp;lt;/textarea&amp;gt;

&amp;lt;/p&amp;gt;
&amp;lt;div class=&amp;quot;button-group&amp;quot;&amp;gt;
&amp;lt;button id=&amp;quot;cvrt&amp;quot; onclick=&amp;quot;cdConvert();this.disabled = true;&amp;quot; disabled=&amp;quot;&amp;quot;&amp;gt;Konversi&amp;lt;/button&amp;gt;&amp;lt;button onclick=&amp;quot;cdClear();&amp;quot;&amp;gt;Bersihkan&amp;lt;/button&amp;gt;&amp;lt;/div&amp;gt;
&amp;lt;ul id=&amp;quot;wrapin&amp;quot;&amp;gt;
&amp;lt;li&amp;gt;
&amp;lt;input checked=&amp;quot;true&amp;quot; id=&amp;quot;opt1&amp;quot; type=&amp;quot;checkbox&amp;quot;&amp;gt;Konversi &amp;lt;code&amp;gt;&amp;amp;amp;&amp;lt;/code&amp;gt; menjadi &amp;lt;code&amp;gt;&amp;amp;amp;amp;&amp;lt;/code&amp;gt;
&amp;lt;/li&amp;gt;
&amp;lt;li&amp;gt;
&amp;lt;input id=&amp;quot;opt2&amp;quot; type=&amp;quot;checkbox&amp;quot;&amp;gt;Konversi &amp;lt;code&amp;gt;&amp;#39;&amp;lt;/code&amp;gt; menjadi &amp;lt;code&amp;gt;&amp;amp;amp;#039;&amp;lt;/code&amp;gt;
&amp;lt;/li&amp;gt;
&amp;lt;li&amp;gt;
&amp;lt;input id=&amp;quot;opt3&amp;quot; type=&amp;quot;checkbox&amp;quot;&amp;gt;Konversi &amp;lt;code&amp;gt;&amp;quot;&amp;lt;/code&amp;gt; menjadi &amp;lt;code&amp;gt;&amp;amp;amp;quot;&amp;lt;/code&amp;gt;
&amp;lt;/li&amp;gt;
&amp;lt;li&amp;gt;
&amp;lt;input checked=&amp;quot;true&amp;quot; id=&amp;quot;opt4&amp;quot; type=&amp;quot;checkbox&amp;quot;&amp;gt;Konversi &amp;lt;code&amp;gt;&amp;amp;lt;&amp;lt;/code&amp;gt; menjadi &amp;lt;code&amp;gt;&amp;amp;amp;lt;&amp;lt;/code&amp;gt;
&amp;lt;/li&amp;gt;
&amp;lt;li&amp;gt;
&amp;lt;input checked=&amp;quot;true&amp;quot; id=&amp;quot;opt5&amp;quot; type=&amp;quot;checkbox&amp;quot;&amp;gt;Konversi &amp;lt;code&amp;gt;&amp;amp;gt;&amp;lt;/code&amp;gt; menjadi &amp;lt;code&amp;gt;&amp;amp;amp;gt;&amp;lt;/code&amp;gt;
&amp;lt;/li&amp;gt;
&amp;lt;/ul&amp;gt;
&amp;lt;script type=&amp;quot;text/javascript&amp;quot;&amp;gt;
function cdClear() {
    var wtarea = document.getElementById(&amp;#39;codes&amp;#39;);
    wtarea.value = &amp;#39;&amp;#39;;
    wtarea.focus();
    document.getElementById(&amp;#39;cvrt&amp;#39;).disabled = false;
}
function cdConvert() {
    var ctarea = document.getElementById(&amp;#39;codes&amp;#39;),
        cv = ctarea.value,
        opt1 = document.getElementById(&amp;#39;opt1&amp;#39;),
        opt2 = document.getElementById(&amp;#39;opt2&amp;#39;),
        opt3 = document.getElementById(&amp;#39;opt3&amp;#39;),
        opt4 = document.getElementById(&amp;#39;opt4&amp;#39;),
        opt5 = document.getElementById(&amp;#39;opt5&amp;#39;);
    cv = cv.replace(/\t/g, &amp;quot;    &amp;quot;);
    if (opt1.checked) cv = cv.replace(/&amp;amp;/g, &amp;quot;&amp;amp;amp;&amp;quot;);
    if (opt2.checked) cv = cv.replace(/&amp;#39;/g, &amp;quot;&amp;amp;#039;&amp;quot;);
    if (opt3.checked) cv = cv.replace(/&amp;quot;/g, &amp;quot;&amp;amp;quot;&amp;quot;);
    if (opt4.checked) cv = cv.replace(/&amp;lt;/g, &amp;quot;&amp;amp;lt;&amp;quot;);
    if (opt5.checked) cv = cv.replace(/&amp;gt;/g, &amp;quot;&amp;amp;gt;&amp;quot;);
    ctarea.value = cv;
    ctarea.focus();
    ctarea.select();
};
&amp;lt;/script&amp;gt;
&amp;lt;/div&amp;gt;
&amp;lt;p&amp;gt;
&amp;lt;/p&amp;gt;
&amp;lt;div class=&amp;quot;clear&amp;quot;&amp;gt;

     &amp;lt;/div&amp;gt;
      &amp;lt;div class=&amp;quot;modal-footer&amp;quot;&amp;gt;
        &amp;lt;button type=&amp;quot;button&amp;quot; class=&amp;quot;btn btn-default&amp;quot; data-dismiss=&amp;quot;modal&amp;quot;&amp;gt;Close&amp;lt;/button&amp;gt;
      &amp;lt;/div&amp;gt;
    &amp;lt;/div&amp;gt;

  &amp;lt;/div&amp;gt;
&amp;lt;/div&amp;gt;
      &lt;/div&gt;
    &lt;/div&gt;
</b:if>
Untuk Lebih Maksimal silahkan Parse dahulu kode Tersebut .


Sekarang Kita Cari Kode </body>
Lalu Tambahkan Kode Di Bawah ini Tepat Di Atas Kode Tersebut


<script type='text/javascript'>
//<![CDATA[
$('#comments p, #comments dd').each(function() {
   $('b[rel^="h"]', this).nextAll().filter('br').remove();
    $('i[rel="pre"]', this).replaceWith(function() {
        return $('<pre></pre>').append($(this).contents());
    });
    $('i[rel="image"]', this).replaceWith(function() {
        return $('<img />').attr('src', $(this).text());
    });
    // Menyisipkan tag `<h3>`
    $('b[rel="h3"]', this).replaceWith(function() {
        return $('<h3></h3>').append($(this).contents());
    });
    $('b[rel="quote"]', this).replaceWith(function() {
        return $('<blockquote></blockquote>').append($(this).contents());
    });
    $('i[rel="code"]', this).contents().unwrap().wrap('<code></code>');
});
//]]>
</script>

Simpan Semua Perubahan Dan Lihat Hasil Nya 😐

Oke Tutorial Selesai 😐
Doain saya juga ya semoga saya lulus mengaji 😀


Penggunaan Markup
  • Untuk memasukan gambar dan youtube link silahkan taruh link gambar dan youtube link tanpa tag <img> dan <iframe>.
  • Untuk menulis huruf bold silahkan gunakan [strong]KONTEN[/strong] atau [b]KONTEN[/b].
  • Untuk menulis huruf italic silahkan gunakan [em]KONTEN[/em] atau [i]KONTEN[/i].
  • Untuk menulis huruf underline silahkan gunakan [u]KONTEN[/u].
  • Untuk menulis huruf strikethrought silahkan gunakan [strike]KONTEN[/strike].
  • Untuk menulis kode HTML silahkan gunakan [code]KONTEN[/code] atau [pre]KONTEN[/pre] atau [pre][code]KONTEN[/code][/pre], dan silahkan parse dulu kodenya pada kotak parser di bawah ini.

Penggunaan Parse Kode Dan Emoticon Tidak Berlaku Di Ponsel.
Show EmoticonHide Emoticon Off Topic