Mecha versi 2.6.3 sudah dirilis!

Paket JavaScript Fitur Manipulasi Komentar Blogger

Tabel Konten
  1. Perhatian Pertama: Rusaknya DOM (?) 
  2. Penggunaan Tag HTML Asli 
  3. Progressive Enhancement 
  4. Mengatur Tampilan Melalui CSS 
  • Cara Memasang Fitur Ini 
  • Penerapan Kode-Kode Manipulasi 
  • Manipulasi komentar Blogger
    Manipulasi komentar Blogger

    Rilis paket JavaScript manipulasi komentar Blogger! Setelah beberapa kali menemukan masalah pada kode JavaScript manipulasi komentar yang biasa digunakan (Saya rasa ada banyak dimana-mana dalam berbagai versi), kali ini Saya akan memperkenalkan versi yang lebih aman dan lebih lengkap. Berikut ini adalah beberapa fitur yang ada:

    • Menyisipkan gambar pada komentar Blogger.
    • Menyisipkan video YouTube ke dalam komentar Blogger.
    • Menyisipkan tag <code>
    • Menyisipkan tag <pre>
    • Menyisipkan <blockquote>
    • Mengubah teks emotikon secara otomatis.
    • Dua metode penyisipan kode untuk manipulasi komentar Blogger.
    • Aman. Kode braket kotak yang keliru saat diimplementasikan tidak akan diparse menjadi tag HTML.
    • CSS Fallback. Artinya bahwa jika JavaScript tidak bekerja, beberapa elemen penting masih bisa bekerja sebagaimana saat menggunakan JavaScript (Progressive Enhancement).
    • Pengaturan ukuran dan posisi dilakukan melalui CSS.

    Lihat Sampel Manipulasi

    Ada beberapa hal yang menjadi perhatian Saya di sini:

    Perhatian Pertama: Rusaknya DOM (?) 

    Rusaknya elemen-elemen HTML karena terkadang JavaScript memanipulasi karakter dengan perintah yang salah yang berasal dari faktor manusia. Hal ini biasanya terjadi ketika penulis melakukan kesalahan saat menerapkan kode. Salah satu contoh umum adalah saat menyisipkan gambar dengan manipulasi braket kotak seperti ini:

    [img]gambar-pemandangan.jpg[/img]

    Kode di atas adalah kode yang dituliskan secara benar, sehingga kita bisa membuat manipulasi dengan regex untuk mengubahnya menjadi tag <img> seperti ini:

    var a = something.innerHTML;
        a = a.replace(/\[img\]/ig, "<img src='");
        a = a.replace(/\[\/img\]/ig, "' alt='' />");
    another.innerHTML = a;

    Sehingga JavaScript akan mengubah kode di atas menjadi seperti ini:

    <img src='gambar-pemandangan.jpg' alt='' />

    Tapi terkadang kita juga bisa saja mengalami kesalahan ketik seperti ini:

    [img]gambar-pemandangan.jpg[img]

    Hal ini sangat berbahaya, karena sekali saja Anda melakukan kesalahan terhadap peraturan JavaScript yang Anda buat sendiri, meskipun hanya satu kode tapi itu bisa merusak dokumen HTML secara global!

    <img src='gambar-pemandangan.jpg<img src='

    Masalah system of blog pada diskusi hilangnya beberapa item komentar karena JavaScript - Permalink

    Oleh karena itu, dibandingkan mengubah setiap karakter unik secara terpisah, akan lebih baik jika Anda menggabungkannya dalam satu kelompok, antara braket pembuka dan braket penutup:

    var a = something.innerHTML;
        a = a.replace(/\[img\](.[^\]]*)\[\/img\]/ig, "<img src='$1' alt='' />");
    another.innerHTML = a;

    Cara di atas jauh lebih aman, karena JavaScript hanya akan memanipulasi karakter [img] yang memiliki penutupnya yaitu [/img]. Jika karakter akhirnya bukan [/img], maka JavaScript akan mengabaikannya. Itu adalah konsep yang Saya pegang di sini.

    Penggunaan Tag HTML Asli 

    Ini penting, dan Saya memang lebih memfokuskan karya ini pada penerapan tag HTML murni, bukan braket kotak atau karakter-karakter paksaan lainnya. Blogger sudah memiliki fasilitas pengecekan validasi tag HTML pada formulir komentar mereka. Singkatnya, tag HTML bisa menjadi sesuatu yang sangat aman karena Blogger secara normal akan memastikan bahwa kode yang Anda tuliskan benar:

    var a = something.innerHTML;
        // Mengubah tag <i> menjadi <code>
        a = a.replace(/<i rel="code">(.[^>]*)<\/i>/g, "<code>$1<\/code>");
    another.innerHTML = a;

    Progressive Enhancement 

    Saya menggunakan dua tag HTML utama yaitu <i> dan <b> dengan atribut rel yang berbeda-beda. Apa yang Saya lakukan di sini adalah Saya akan memastikan bahwa jika JavaScript tidak bekerja, maka tampilan tag HTML manipulator akan tetap sama dengan tag HTML yang akan menjadi penggantinya. Sebagai contoh, Saya akan menyamakan tampilan tag <pre> dengan <i rel="pre"> sebagai cadangan:

    pre,
    i[rel="pre"] {
      display:block;
      font:normal normal 12px/normal Monaco,"Courier New",Courier,Monospace;
      word-wrap:normal;
      white-space:pre;
      background-color:black;
      color:white;
      padding:.5em 1em;
      overflow:auto;
    }

    Dengan begitu Saya bisa memastikan bahwa jika tag <i rel="pre"> berhasil dimanipulasi menjadi tag <pre>, maka tampilan pada peramban akan tampak seperti apa adanya tag <pre>. Namun jika gagal dimanipulasi, tampilan tag <i rel="pre"> akan tetap tampak sebagai sesuatu yang memiliki wujud sama dengan tag <pre> - Selengkapnya bisa dibaca di CSS Fallback untuk Manipulasi Bagian Komentar

    Mengatur Tampilan Melalui CSS 

    Semua pengaturan seperti lebar elemen, posisi dan warna dilakukan melalui CSS.


    Cara Memasang Fitur Ini 

    Pertama-tama masuklah ke halaman editor HTML blog Anda. Klik Edit HTML dan klik Lanjutkan:

    Edit HTML Blogger
    Mengedit HTML

    Temukan kode ini:

    </head>

    Salin kode CSS ini dan letakkan di atasnya:

    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <style>
    /* Add More Features to the Blogger Comments by Taufik Nurrohman @http://www.dte.web.id */
    img.emo {
      display:inline-block;
      vertical-align:middle;
    }
    
    #comment-holder .cm-youtube {
      display:block;
      border:none;
      background-color:#333;
      width:370px;
      height:218px;
      margin:0 auto 30px;
    }
    
    #comment-holder .cm-image {
      display:block;
      margin:0 auto 15px;
      outline:none;
      border:1px solid #ccc;
      background-color:white;
      -webkit-box-shadow:0 1px 3px rgba(0,0,0,.2);
      -moz-box-shadow:0 1px 3px rgba(0,0,0,.2);
      box-shadow:0 1px 3px rgba(0,0,0,.2);
      padding:5px;
      max-width:96%;
      height:auto;
      width:auto\9;
    }
    
    #comment-holder code,
    #comment-holder i[rel="code"],
    #comment-holder pre,
    #comment-holder i[rel="pre"] {
      font:normal normal 12px/normal Monaco,"Courier New",Courier,Monospace;
      color:blue;
    }
    
    #comment-holder pre,
    #comment-holder i[rel="pre"] {
      display:block;
      background-color:#333;
      color:white;
      padding:.5em 1em;
      word-wrap:normal;
      white-space:pre;
      overflow:auto;
    }
    
    #comment-holder blockquote,
    #comment-holder b[rel="quote"] {
      margin:0 2%;
      background-color:#eee;
      padding:1em 1.2em;
      border-left:4px solid #7498AD;
      display:block;
      font-weight:bold;
      font-style:italic;
    }
    
    #comment-holder i[rel="image"],
    #comment-holder i[rel="youtube"] {
      display:block;
      overflow:hidden;
      border:2px solid black;
      position:relative;
      width:170px;
      height:100px;
      margin:0 auto 30px;
    }
    
    #comment-holder i[rel="image"]:before,
    #comment-holder i[rel="youtube"]:before {
      content:"Please enable your JavaScript to see this image!";
      position:absolute;
      top:0;
      right:0;
      bottom:0;
      left:0;
      background-color:red;
      color:white;
      font-weight:bold;
      text-align:center;
      padding:15px 0;
    }
    
    #comment-holder i[rel="youtube"]:before {content:"Please enable your JavaScript to watch this video!"}
    </style>
    </b:if>

    Setelah itu temukan kode ini:

    </body>

    Salin kode ini dan letakkan di atasnya:

    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <script>
    //<![CDATA[
    // Add More Features to the Blogger Comments
    // Fix some bugs that I got from some similar code out here :)
    // Date: 21 May 2012
    // Time: 22:50 WIB
    // Author: Taufik Nurrohman
    // URL: https://plus.google.com/108949996304093815163/about
    function repText(id) {
        var a = document.getElementById(id);
        if (!a) return;
        var b = a.innerHTML, c = "//cdn.rawgit.com/tovic/dte-project/0ef9de902cf286a77272f9b3c6f8168c17ab61c6/emoticon/";
        // Images
        b = b.replace(/<i rel="image">(.*?)<\/i>/ig, "<img class='cm-image' src='$1' alt='loading...' \/>");
        b = b.replace(/\[img\](.*?)\[\/img\]/ig, "<img class='cm-image' src='$1' alt='loading...' \/>");
        // YouTube video
        b = b.replace(/<i rel="youtube">https?:\/\/www\.youtube\.com\/embed\/(.*?)<\/i>/ig, "<iframe class='cm-youtube' src='https://www.youtube.com/embed/$1'><\/iframe>");
        b = b.replace(/<i rel="youtube">(https?:\/\/youtu\.be\/|https?:\/\/www\.youtube\.com\/watch\?v\=)(.*?)<\/i>/ig, "<iframe class='cm-youtube' src='https://www.youtube.com/embed/$2'><\/iframe>");
        b = b.replace(/\[youtube\]https?:\/\/www\.youtube\.com\/embed\/(.*?)\[\/youtube\]/ig, "<iframe class='cm-youtube' src='https://www.youtube.com/embed/$1'><\/iframe>");
        b = b.replace(/\[youtube\](https?:\/\/youtu\.be\/|https?:\/\/www\.youtube\.com\/watch\?v\=)(.*?)\[\/youtube\]/ig, "<iframe class='cm-youtube' src='https://www.youtube.com/embed/$2'><\/iframe>");
        // Code & text block
        b = b.replace(/<i rel="code">(.*?)<\/i>/ig, "<code>$1<\/code>");
        b = b.replace(/<i rel="pre">(.*?)<\/i>/ig, "<pre>$1<\/pre>");
        b = b.replace(/<b rel="quote">(.*?)<\/b>/ig, "<blockquote>$1<\/blockquote>");
        b = b.replace(/\[code\](.*?)\[\/code\]/ig, "<code>$1<\/code>");
        b = b.replace(/\[pre\](.*?)\[\/pre\]/ig, "<pre>$1<\/pre>");
        b = b.replace(/\[blockquote\](.*?)\[\/blockquote\]/ig, "<blockquote>$1<\/blockquote>");
        // Finishing YouTube and Reduce filesize from images that uploaded by Blogger
        b = b.replace(/&feature=[\w-]*/ig, "");
        b = b.replace(/\/s(640|1600)/g, "/s400");
        // Emoticons
        b = b.replace(/\s:\)+/g, " <img class='emo' alt=':)' src='" + c + "01.gif'\/>");
        b = b.replace(/\s;\)+/g, " <img class='emo' alt=';)' src='" + c + "02.gif'\/>");
        b = b.replace(/\s:\(/g, " <img class='emo' alt=':(' src='" + c + "03.gif'\/>");
        b = b.replace(/\s=\(/g, " <img class='emo' alt='=(' src='" + c + "04.gif'\/>");
        b = b.replace(/\[email protected]@,/g, " <img class='emo' alt='@@,' src='" + c + "05.gif'\/>");
        b = b.replace(/\s:s/ig, " <img class='emo' alt=':s' src='" + c + "07.gif'\/>");
        b = b.replace(/\s:(\\|\/)/g, " <img class='emo' alt=':\\' src='" + c + "08.gif'\/>");
        b = b.replace(/\s:D/g, " <img class='emo' alt=':D' src='" + c + "09.gif'\/>");
        b = b.replace(/\s=D/g, " <img class='emo' alt='=D' src='" + c + "10.gif'\/>");
        b = b.replace(/\s\^:D/g, " <img class='emo' alt='^:D' src='" + c + "11.gif'\/>");
        b = b.replace(/\s\^_?\^/g, " <img class='emo' alt='^_^' src='" + c + "12.gif'\/>");
        b = b.replace(/\s:'\(/g, " <img class='emo' alt=':&#39;(' src='" + c + "13.gif'\/>");
        b = b.replace(/\sT_T/ig, " <img class='emo' alt='T_T' src='" + c + "15.gif'\/>");
        b = b.replace(/\sB\)/g, " <img class='emo' alt='B)' src='" + c + "16.gif'\/>");
        b = b.replace(/\s:Q/ig, " <img class='emo' alt=':Q' src='" + c + "17.gif'\/>");
        b = b.replace(/\s7:\(/g, " <img class='emo' alt='7:(' src='" + c + "19.gif'\/>");
        b = b.replace(/\s:p/ig, " <img class='emo' alt=':p' src='" + c + "20.gif'\/>");
        b = b.replace(/\s:Oz+/ig, " <img class='emo' alt=':Ozzz' src='" + c + "21.gif'\/>");
        b = b.replace(/\s7:O/ig, " <img class='emo' alt='7:O' src='" + c + "22.gif'\/>");
        b = b.replace(/\s\\o\//ig, " <img class='emo' alt='\\o/' src='" + c + "23.gif'\/>");
        b = b.replace(/\s\\m\//ig, " <img class='emo' alt='\\m/' src='" + c + "24.gif'\/>");
        b = b.replace(/\s(<3|:\*)/ig, " <img class='emo' alt=':*' src='" + c + "25.gif'\/>");
        b = b.replace(/\s0:\)+/ig, " <img class='emo' alt='0:)' src='" + c + "26.gif'\/>");
        b = b.replace(/\s\^o\^/ig, " <img class='emo' alt='^o^' src='" + c + "27.gif'\/>");
        b = b.replace(/\s:-a/ig, " <img class='emo' alt=':-a' src='" + c + "28.gif'\/>");
        b = b.replace(/\s\*fck\*/ig, " <img class='emo' alt='*fck*' src='" + c + "29.gif'\/>");
        b = b.replace(/\sxV/ig, " <img class='emo' alt='xV' src='" + c + "30.gif'\/>");
        b = b.replace(/\sx\@/g, " <img class='emo' alt='[email protected]' src='" + c + "31.gif'\/>");
        b = b.replace(/\s\X\@/g, " <img class='emo' alt='[email protected]' src='" + c + "32.gif'\/>");
        b = b.replace(/\s:-d/ig, " <img class='emo' alt=':-d' src='" + c + "33.gif'\/>");
        b = b.replace(/\s:-bd/ig, " <img class='emo' alt=':-bd' src='" + c + "34.gif'\/>");
        b = b.replace(/\s\~x\(+/ig, " <img class='emo' alt='~x(' src='" + c + "35.gif'\/>");
        b = b.replace(/\s:W/g, " <img class='emo' alt=':W' src='" + c + "37.gif'\/>");
        b = b.replace(/\s''J/ig, " <img class='emo' alt='&#39;&#39;J' src='" + c + "47.gif'\/>");
        a.innerHTML = b;
    } repText('comment-holder');
    //]]>
    </script>
    </b:if>

    Klik Simpan Template.

    Pembaharuan: Mengganti pola /<tag>(.[^>]*)<\/tag>/ig dan /\[bracket\](.[^\]]*)\[\/bracket\]/ig menjadi /<tag>(.*?)<\/tag>/ig dan /\[bracket\](.*?)\[\/bracket\]/ig untuk meloloskan tag <br> di dalam tag manipulasi.

    Penerapan Kode-Kode Manipulasi 

    Saya memberikan dua pilihan, yaitu menggunakan tag HTML dengan target manipulasi yang diambil berdasarkan atribut rel dan menggunakan kata-kata kunci yang dimasukkan ke dalam braket kotak sebagai penggambaran tag HTML. Saya merekomendasikan Anda untuk menggunakan tag HTML karena mereka masih bisa bekerja tanpa JavaScript (ini juga merupakan standar manipulasi komponen komentar di blog Saya):

    PerintahFormat
    Memasukkan gambar<i rel="image">URL Gambar</i>
    [img]URL Gambar[/img]
    Memasukkan video YouTube<i rel="youtube">URL YouTube</i>
    [youtube]URL YouTube[/youtube]
    Memasukkan tag <code><i rel="code">Kode Anda</i>
    [code]Kode Anda[/code]
    Memasukkan tag <pre><i rel="pre">Kode Anda</i>
    [pre]Kode Anda[/pre]
    Memasukkan kuota<b rel="quote">Kata-kata Anda</b>
    [blockquote]Kata-kata Anda[/blockquote]
    Memasukkan emotikonBeberapa kode yang bisa digunakan: :) :( =( :s ^_^ :D =D ^:D @@, ;) :-bd :-d :'( :'( T_T :\ :p B) :Q :Ozz 7:( \o/ \m/ <3 0:) ^o^ :-a 7:O *fck* xV [email protected] [email protected] ~x( ''J :W

    116 Komentar

    you

    mas cara agar ketika klik emotikon muncul input kodenya gmn? saya coba utak atik pake kode ini v gagal

    you

    $('.emo').css('cursor', 'pointer').live("click", function(e) {
    $('input.emoKey').remove();
    $(this).after('<input class="emoKey" type="text" size="6" value=" ' + this.alt + '" />');
    e.stopPropagation();
    });
    $('input.emoKey').live("click", function() {
    $(this).focus().select();
    });

    Taufik Nurrohman

    $(document.body).on("click", function() {
    $('.emoKey').remove();
    });
    $('.emo').on("click", function(e) {
    $('.emoKey').remove();
    $(this).after('<input class="emoKey" type="text" size="6" value=" ' + this.alt + '"/>');
    $('.emoKey').focus().select();
    e.stopPropagation();
    });

    Letakkan setelah repText('comment-holder');
    Ganti juga semua nilai atribut alt gambar menjadi kode kunci emotikon, seperti apa yang Saya jelaskan ke The7Bloggers di atas.

    Saeful Rahman

    mas gimana caranya input kode emoticon lebih dari satu kode, dengan cara manual bisa saja namun kurang efektif. Apakah bisa dipersingkat ?

    misalkan untuk emoticon smile, terdapat pilihan kode seperti :)atau:-).

    Unknown

    Kalau mau meletakkan manipulasi ini di Post berarti pada } repText('comment_block'); di edit jadi } repText('comment_block','post'); ?

    Taufik Nurrohman

    Kurang lebihnya seperti ini. Tapi tempat meletakannya yang akan sedikit lebih rumit lagi:

    <script>repText(&#39;post-<data:post.id/>&#39;);</script>

    Asyaf Syaffar

    semuanya dijelaskan dengan rinci dan detail (easy learning)
    termasuk HTML,CSS dan Javascript
    terima kasih atas tutorialnya dan sudah saya terapkan diblog saya
    semoga blog ini makin maju jaya \o/

    Rizal Nurhidayat

    Mas Taufik, saya mau tanya tapi sebenernya saya bingung jelasin pertanyaannya darimana...
    Begini mas, saya mau tanya kalo menambahkan kode lain untuk dikonversi menjadi emoticon itu codenya harus di parse jadi kode apa?

    Semisal untuk mengkonversi kode :) menjadi emoticon :) kode yang ditulis di replace jadi /\s:\)+/g, nah jika saya mau menambahkan kode lain selain yang ada pada default kode itu harus dirubah seperti apa?

    Mohon pencerahannya... terimakasih... :)

    Taufik Nurrohman

    Ini pakai Regex. Sulit diungkapkan dengan kata-kata. Belajar saja metodenya di sini → http://www.regular-expressions.info/quickstart.html

    Rizal Nurhidayat

    Makasih mas jawabannya... nambah ilmu lagi dan makin tertari dengan javascript... =D

    Unknown

    kayak cinta aja mas, sulit diungkapkan dengan kata kata.. **p

    Bachrul Arief F

    gan,,blog ane kok nggak bisa jalan yaa,,pliss lihat blog ane ya gan :'(

    bacilsoft dot blogspot dot com/2014/06/membuat-widget-popular-posts-dengan.html

    makasih banyak gan

    Taufik Nurrohman

    repText('comment_block');

    Bachrul Arief F

    makasih banyak gan,,semoga Allah membalas kebaikan agan :)

    oh yaa,,kalo mau bikin gambar dan youtube yang ada di comment berada di tengah gimana ya gan??

    Taufik Nurrohman

    Kalau kamu pakai CSS di atas harusnya sih sudah ke tengah secara otomatis. Jangan lupa ganti selektor ID-nya (semuanya):

    #comment_block .cm-youtube {
    …
    margin:0 auto 30px;
    }
    #comment_block .cm-image {
    …
    margin:0 auto 15px;
    }

    Bachrul Arief F

    alhamdulillah,sudah berhasil mas,,makasih banyak atas bantuannya :) :okey :hore

    Rizky

    kang saya udah coba semua cara, suapaya javascrept yang diatas </body> bisa berfungsi tp tetep aja ga fungsi, apa karna versi jquerynya? atau hal lain? mohon panduannya. :(
    cek sumbernya disini primecyber.blooooooooooogspot.com

    Unknown

    pak kalau sudah pakai threaded comment apa harus di disable "false" dulu untuk fungsi yang sama?

    Unknown

    pak kalau emoticon facebook penguin <(\") regexnya gimana yah?

    Irfan Muhammad Ghani

    atau buat kayak gini aja ya
    b = b.replace(/\[update\](.*?)\[\/update\]/ig, "<div class='update'>$1<\/div>");

    Unknown

    kalo url video yang dimasukin pake https kok tidak bisa ya?

    Taufik Nurrohman

    Sekarang sudah bisa :)

    Unknown

    terimakasih mas sangat membantu, saya coba tidak berhasil ternyata dibagian ini b = b.replace(/&lt;i rel=" harus tetap seperti yang sebelumnya mas, seperti ini b = b.replace(/<i rel=".
    hehe tanya lagi mas, kalo mau di tambahin yang replace link seperti diblog ini gimana? saya coba buat regexnya seperti ini tapi tidak berhasil menerapkan dibagian ini b = b.replace(/\[link=https?:\/\/(www\.)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-](\S*[&|#]\S+)*)*\/?\][^\s\\](.*?)\[\/link\]/ig, "<span data-linkhref='$1' title='Lampiran'>$1<\/span>");