Mecha versi 2.6.4 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(/\s@@,/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='x@' src='" + c + "31.gif'\/>");
        b = b.replace(/\s\X\@/g, " <img class='emo' alt='X@' 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 x@ X@ ~x( ''J :W

    116 Komentar

    Unknown

    Saya malah belum mengeri dan belum tau malah bang, Ini aja masih berkutat diw3school untuk memahami Code-code. Saya cuma bisa bilang 100 :-bd untuk bang taufik. Otak bang taufik ini udah kayak sarapan Keju tiap hari saja. (Pintar banget). saya aja ndak lulus-lulus di w3school..

    Unknown

    @Syndicate OS Kok 1001 yang :p kenapa tidak 1001 yang \o/ \o/ aja mas Sekalian amankan pertama kesampaian juga hari ini :D :D :D :D

    Taufik Nurrohman

    @Suwardi Unggit Haha :D

    Saya aja ndak lulus-lulus di w3school..

    Jangan cuma main di W3Schools saja (banyak yang sudah melupakan W3School karena beberapa orang bilang referensinya tidak meyakinkan).
    Main saja ke forum atau grup Facebook lalu nyoba ngubek-ubek status :)

    Unknown

    @Taufik Nurrohman Bang, Saya pengennya gak pake tag untuk video dan gambar pengennya langsung URL aja seperti Regex Video dan Regex URL gambar itu :) semoga mengerti maksudnya :D

    Taufik Nurrohman

    @system of blog Sudah Saya coba mas, tapi ternyata sangat berbahaya!
    Ini adalah produk gagalnya, untuk mengubah URL menjadi video atau gambar secara langsung:

    var autoReplaceImageURL = true,
    autoReplaceYouTubeLink = true; // GAGAL!!!
    if(autoReplaceImageURL) {
    b = b.replace(/\[img\](.[^\]]*)\[\/img\]/g, "$1");
    b = b.replace(/<i rel="image">(.[^>]*)<\/i>/g, "$1");
    b = b.replace(/(http:\/\/[\w\-\.]+\.[a-zA-Z]{2,3}(?:\/\S*)?(?:[\w])+\.(?:jpg|jpeg|png|gif|bmp))/ig, "<img class='cm-image' src='$1' alt='loading...' \/>");
    }
    if(autoReplaceYouTubeLink) {
    b = b.replace(/\[youtube\](.[^\]]*)\[\/youtube\]/g, "$1");
    b = b.replace(/<i rel="youtube">(.[^>]*)<\/i>/g, "$1");
    b = b.replace(/(?:http:\/\/)?(?:www\.)?(?:youtube\.com|youtu\.be)\/(?:watch\?v=)?(.+ )/g, "<iframe class='cm-youtube' src='http://www.youtube.com/embed/$1'><\/iframe>");
    }

    Terkadang cara manual itu lebih baik (lebih aman) dibandingkan cara otomatis. Belum lagi jika si penulis tidak menghendaki jika URL yang dia tuliskan berubah menjadi sesuatu yang lain.
    Itu pendapat Saya. Pengubah gambar secara otomatis memang bekerja pada kode di atas, tapi pengubah URL video otomatisnya masih perlu di-finishing lagi. Masih perlu mencari tahu lagi :W

    Sekedus

    saya coba merubah sedikit regex untuk gambar (https dan svg) : http://jsfiddle.net/HTt3N/75/

    namun saat new line pada elemen di hapus menjadi seperti ini :
    <div id="comment-holder">
    http://www.google.com<br>http://wow.com<br>image.jpg<br>https://cdn.rawgit.com/tovic/dte-project/master/a/emo/top.gif<br>https://2.bp.blogspot.com/-PI8Zuo2jM4o/T2vhCXeHo5I/AAAAAAAACXQ/iQU5joOKp4o/s1600/my-comment-author.png<br>http://3.bp.blogspot.com/-xBYx0e1vSLo/TstBcU365uI/AAAAAAAABW4/iv3PiNxuUy0/s1600/colormap.png<br>https://caniuse.com/img/browserstack.svg
    </div>

    hasilnya gambar malah menyatu dalam satu tag jsfiddle :
    <img src="https://cdn.rawgit.com/tovic/dte-project/master/a/emo/top.gif&lt;br&gt;https://2.bp.blogspot.com/-PI8Zuo2jM4o/T2vhCXeHo5I/AAAAAAAACXQ/iQU5joOKp4o/s1600/my-comment-author.png&lt;br&gt;http://3.bp.blogspot.com/-xBYx0e1vSLo/TstBcU365uI/AAAAAAAABW4/iv3PiNxuUy0/s1600/colormap.png&lt;br&gt;https://caniuse.com/img/browserstack.svg" alt="">

    dimana letak kesalahannya dan bagaimana cara memperbaikinya?

    Taufik Nurrohman

    Ubah \S menjadi negasi [^\s] sehingga kamu dapat menambahkan karakter < ke dalam eksepsi agar pencocokan pola bisa terhenti sebelum mencapai <tag>:

    /(https?:\/\/[\w\-\.]+\.[a-z]{2,3}(?:\/[^<\s]*)?(?:[\w-.])+\.(?:jpg|png|gif|jpeg|bmp|svg))/ig

    Demo: http://jsfiddle.net/HTt3N/78

    Sekedus

    Terima kasih untuk jawabannya :)

    sudah saya terpakan dan berhasil Demo

    Unknown

    @Taufik Nurrohman Terima kasih bang saran-nya. Kalau forum yang bagus itu di mana bang ? kerena selama ini bebrapa forum cuma yang di bahas malah cheat point blank. Kalau status fb dan Group udah di ubek-ubek bang tapi masih kurang banyak. seharus-nya kata Otak bang taufik ini udah kayak sarapan Keju tiap hari saja (Pintar banget). yang harus dikelilingi elemen bukan yang Saya aja ndak lulus-lulus di w3school...

    Taufik Nurrohman

    @Suwardi Unggit Kebanyakan sih forum berbahasa Inggris. Siapkan saja Google Translate. Mengenai forum apa saja yang bisa dibaca ada banyak sekali (tidak harus ikut ke forum). Cukup tulis kata kunci di Google dengan tipe kata kunci berupa pertanyaan dalam bahasa Inggris. Misal: "How can I split each letter with regex?"
    Dan lain sebagainya.

    Unknown

    @Taufik Nurrohman Ckckcck betul juga bang beberapa waktu lalu juga aku nyoba ternyata error semua gambar yang ada di area komen holder :D

    Unknown

    @Taufik Nurrohman Oke terima kasih bang saran-nya. udah saya terapkan dan tadi baru dapat multiple backgrounds and borders with css yang saya cari, mungkin itu langkah awal yang baik :D :D

    Anonim

    Mas kalau saya misalnya ingin memasukan kode emoticon di post pasti semua kode tersebut akan di rubah oleh JS ya?

    Terus kalau saya ingin menunjukkan kepada pengunjung bagaimana cara menulis Emoticon bagaimana mas? Saya sih pinginnya kayak punya kamu ini, waktu di klik gambar emoticon muncul beserta kode emoticonnya.

    Saya dari kemaren sampai pusing ndak bisa tidur cari JS buat gambar emot di klik muncul kodenya di source code blog kamu... Aku bingung semua JS yang aku lihat kok perasaan ndak ada yang buat itu ya.... Walaupun JS external, hehehhehehe yang ada malah Huge JS dan Some Json ajah? :'(

    Mohon bantuannya ya mas, karena saya sudah lelah dari kemaren cari tuh JS?

    Unknown

    Bang Sekalian kasi masukan lagi pada kode ini

    #comment-holder .cm-image {
    display:block;
    margin:0 auto 15px;
    outline:none;
    border:1px solid #ccc;
    background-color:white;
    -webkit-box-shadow:0px 1px 3px rgba(0,0,0,0.2);
    -moz-box-shadow:0px 1px 3px rgba(0,0,0,0.2);
    box-shadow:0px 1px 3px rgba(0,0,0,0.2);
    padding:5px;
    }

    TOlong tambahin css max-width bang soalx waktu dulu admin blog 7 blogger komen dengan menggunakan gambar yang sangat besar hasilx berantakan jadi kalau di tambahin max-width kan gak segede itu :)

    Taufik Nurrohman

    @system of blog Siap laksanakan!
    Sebenarnya kalau penulis komentar memakai URL gambar yang diunggah melalui blogspot bisa langsung diperkecil ukurannya melalui JavaScript. Lihat di sini:

    b = b.replace(/\/s(640|1600)/g, "/s400");

    Tapi pengecualian untuk gambar-gambar yang diunggah ke direktori lain selain Picasa, mereka harus diperkecil dengan CSS max-width.

    Unknown

    @Taufik Nurrohman betul bang aku udah liat kok maksud kode itu, :) dan gak mungkin juga semua orang mau masukin gambar yg di host di blogspot bisa saja dr web lain :)

    Anonim

    @Taufik Nurrohman Hehehehehehe udah jadi bang? :) Cek this out in my blog....? :) Hehhehhehehe B)

    Anonim

    @The7Bloggers Sekarang yang saya bingungkan mengapa kalau aku pasang related post itu tidak muncul mas, padahal feed post aku udah aku hidupin kok? :)

    Anonim

    @The7Bloggers Bang kenapa kalau aku mau kasih pesan form komentar emoticon kok kagak di rubah menjadi emo juga....? Alias masih dalam bentuk teks....

    Taufik Nurrohman

    @The7Bloggers Itu karena wilayah yang dimanipulasi cuma dibatasi pada #comment-holder:

    repText('comment-holder');

    Kalau mau mengaktifkan emotikon di bagian formulir komentar, tambahkan ini:

    repText('threaded-comment-form');

    Anonim

    @Taufik Nurrohman Mas masalah artikel terkait sudah terselesaikan tapi sekarang timbul masalah baru yaitu mengapa setelah aku pasang artikel terkait emoticonnya kalau di klik kok tidak muncul kodenya? :( Konflik ya....?

    Anonim

    @Taufik Nurrohman Kira-kira bisa di perbaiki tidak mas? :) Aku udah coba pisah pisah kodenya tetep ndak berhasil?

    Oya mas thread komentar blogger asli bisa tidak di buat kayak punya blog kamu ini yang gunakan #hash URL?

    Taufik Nurrohman

    @The7Bloggers Nanti lama-lama juga ketemu ^o^
    Semua komentar blogspot punya permalink:

    Klik saja pada tanggal terbit komentarnya, permalink ada di situ :)

    Unknown

    Mas Taufik Kok q malah gk muncul ya kyk mas taufik di blog q tolong di cek lock21[dot]blogspot[dot]com :D

    Muhammad Irham

    di blogku ngak bisa kang taufik, nih ada gambar beginian

    Anonim

    Mas Taufik,
    scriptnya kok gak fungsi yah kalo komen di static page??

    Taufik Nurrohman

    @Muhammad Irham Kode memang harus dibungkus dengan <i rel="pre">, tapi kontennya harus diparse dulu. Terutama tag HTML. Coba pencet tombol di atas ^:D yang bertuliskan Konversi Kode di Sini! Itu bisa dipakai untuk generator standar JavaScript ini.

    Taufik Nurrohman

    @Naufal Hanif Rabbani Mungkin ada script khusus lain di halaman statis yang bikin error. Script di dalam tag kondisional halaman statis. Lagian ada juga ya, yang nulis komentar berupa kode di halaman statis? Halaman statis itu kan bukan artikel?

    Anonim

    iya mas, bukan..
    tapi alhamdulillah kok sudah bisa saya atasi, makasih ya mas :)

    http://a-nx.blogspot.com/p/link-exchange.html

    Anonim

    kalo mau menambah paragraf dan class button seperti agan gmn yah :(

    Taufik Nurrohman

    @Itz Me Amar Nggak bisa mas, nggak masuk ke dalam daftar manipulasi. Kalaupun mau membuat seperti itu mungkin harus menambahkan manipulasi, misalnya: <b rel="button">Tombol</b> lalu buat sendiri JavaScript-nya supaya bisa mengubah elemen <b rel="button">Tombol</b> menjadi <button>Tombol</button>
    Cek komentar Muhammad Irham di atas ^:D

    Muhammad Irham

    ~x( kang di template saya ngak ada perubahan sedikitpun ~x(

    Muhammad Irham

    @Taufik Nurrohman wah saya malu nyebutin blog saya di sini, blog yang mungkin paling simpel dan paling berat yang pernah mas taufik temui

    koderator.blogspooooooooooooooooooooooooooooooooooooooooot.com

    Muhammad Irham

    gimana nih kok ngak di tanggepin?

    Taufik Nurrohman

    Sudah lama Saya cek, tapi Saya periksa kode sumber di blogmu tidak ada kode seperti di atas.

    Muhammad Irham

    ya, karena udah saya hapus, krn sebelumnya udah ngak bisa

    Anonim

    Anonim

    Hi Admin, i found that size of png image isn't like jpg image using this script
    please help me

    Taufik Nurrohman

    It's because I have compress the images resolution for page load speed reasons.
    If you want to disable the image compression and display the original image size, you can remove this code from the script:

    b = b.replace(/\/s(640|1600)/g, "/s400");

    Ismail Sossé Alaoui

    Thanks Mr Taufik for the first reply, i had another problem: that youtube video doesn't work when i insert link using this script
    URL YouTube but it works using this
    [youtube]URL YouTube[/youtube]
    thanks to reply

    Taufik Nurrohman

    I forgot the last back slash. Now it should works. Check the improved code above, or: DEMO

    Anonim

    It doesn't work, i ask you please if you can correct me this script: b = b.replace(/<i rel="youtube">.*?'.*?<\/i>/gi, "");
    b = b.replace(/<i rel="youtube">http:\/\/youtu.be<\/i>/gi, "<iframe class='youtube' src='http://www.youtube.com/embed");
    b = b.replace(/<i rel="youtube">http:\/\/www.youtube.com\/watch\?v=<\/i>/gi, "<iframe class='youtube' src='http://www.youtube.com/embed/");
    b = b.replace(/&amp;feature=/gi, "?rel=0' '");
    b = b.replace(/<i rel="youtube">/gi, "?rel=0' frameborder='0' allowfullscreen><\/i>/</iframe>");

    Taufik Nurrohman

    It seems you're trying to modify the script from DuyPham and change the bracket symbol to a HTML tag. That's not enough. Changes the [youtube] pattern to <i rel="youtube"> doesn't mean that the problem is fixed. If I can guess, maybe your problem is because you put my Blogger comments manipulation script with another version of Blogger comments manipulation script together :\

    Ismail Sossé Alaoui

    I'm using Fellip Calvo system comment, and the of you script concerning Youtube video doesn't work. but one of DUY PHAM work for this aim i asked if you can correct your script or help me to make the script works
    . thanks

    Taufik Nurrohman

    It means that there is no problem with the code, just a few functions above it may make the function below not working. Regex is used to manipulate the characters, if you try to change the character A to B, then you should be able to find A first and then change it into B. But, if something above the function has transformed A into something else first, then the next function will not be able to find A and will not turn it into B.

    Here is an example of how regex can destroy my functions below ⇒ http://jsfiddle.net/tovic/MjWRM/2/
    You can't install all Blogger comments manipulation script from different version together in a blog. You have to choose one.
    It's just my guess :(

    Anonim

    kalo saya hanya ingin menambah fitur untuk memasukan gambar saja gmn mas??

    Taufik Nurrohman

    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <script type="text/javascript">
    //<![CDATA[
    // URL: https://plus.google.com/108949996304093815163/about
    function repText(id) {
    if (document.getElementById(id)) {
    var a = document.getElementById(id).innerHTML;
    a = a.replace(/<i rel="image">(.*?)<\/i>/ig, "<img class='cm-image' src='$1' alt='loading...' \/>");
    a = a.replace(/\[img\](.*?)\[\/img\]/ig, "<img class='cm-image' src='$1' alt='loading...' \/>");
    document.getElementById(id).innerHTML = b;
    }
    } repText('comment-holder');
    //]]>
    </script>
    </b:if>

    Unknown

    sedikit masukan sobat...
    kemarin saya coba utak-atik tambahin buat lagu2/flash

    b = b.replace(/\[embed\](.[^\]]*)\[\/embed\]/ig, "<embed class='musik' pluginspage='http://www.macromedia.com/go/getflashplayer' quality='high' src='$1' type='application/x-shockwave-flash' wmode='transparent' allowfullscreen='true'><\/embed>");

    kalau buat videonya saya ganti seperti ini saja, malah fungsinya gak cuman manggil video,,,

    b = b.replace(/\[frame\](.[^\]]*)\[\/frame\]/ig, "<iframe class='vrame' src='$1'><\/iframe>");

    Gak tau itu bener apa salah ya,, tapi kok bisa
    Mohon penjelasannya sobat

    budkalon

    AH!!!! Wah!!!!! Saya gak tahu penyebabnya tapi di saya juga bisa! :D

    IRIL SAGITA

    Kak, blog aku kok jadinya gini ya :

    pusing aku jadinya, contohnya di :

    http://www.tutorial-sagita.tk/2012/09/cara-membuat-halaman-error-404-blog.html

    Unknown

    Sama kaya saya permasalahnya, jadi tinggal tunggu dari masternya aja :)

    Oia bang, saya ijin sourch CSSnya class catatan blog ini diblog saya yah mas :) , maaf ijinnya belakangan :D

    Taufik Nurrohman

    Kontainer komentar blogmu bukan <div id='comment-holder'>, tapi <div class='cm_block'>. Jadi eksekusi kodenya nantinya seperti ini:

    repText('cm_block');

    Script ini cuma menerima ID, jadi elemen pembungkus daftar komentar harus dilengkapi dengan ID cm_block:

    <div class='cm_block' id='cm_block'>

    IRIL SAGITA

    Makasih kak, udah jadi and mantab.

    Unknown

    komentar saya masih <div id='comment-holder'> , kok konten gambarnya masih pesan error yah kayak pesan gambarnya iril yang di atas?

    Taufik Nurrohman

    Yang penting kodenya harus diletakkan setelah blok komentar (dalam hal ini adalah di atas </body>, yaitu posisi yang paling bawah dari halaman). Kalau tetap tidak jadi mungkin ada masalah yang lain.

    Unknown

    Wah bener bang, paket JScriptnya lupa kaga keajak. Hhah untung kaga ada masalah yang laen :)
    Saya kagak tau mau kasih apa baeknya blog DTE karena saya orang yang serba terbatas, jadi saya cuman bisa bilang Terima kasih banyak atas responnya.

    Unknown

    Mas kenapa emeticon-nya gk muncul ? kan saya pke kode diatas?
    tolong di cek ni blognya idblogzz[dot]blogspot.com

    Unknown

    Maksud saya gmana buat muncul seperti ini mas Taufik?

    Taufik Nurrohman

    Pada pengaturan pesan komentar, buat beberapa baris baru berupa emotikon:

     :p :D

    Sementara dua dulu. Kalau sudah jadi baru ditambah emot lainnya. Setelah itu tambahkan eksekusi baru lagi, setelah repText('comment-holder') sehingga jadi seperti ini:

    repText('comment-holder'); repText('comment-form'); repText('threaded-comment-form');

    Unknown

    makasih saya coba ni... :D

    Catur Apriyadi

    Mas Taufik Kendala saya sama :
    1.untuk menampilkan di atas komentar gmn? saya jg sudah tambahkan code
    repText('comment-holder'); repText('comment-form'); repText('threaded-comment-form'); Tapi tetap tidak muncul, gmn tuh mas?

    2. yang kedua gimana agar fungsi pre di komentar sama seperti yg di posting, jd warna kodenya ga cuma putih aja. padahal SyntaxHighlighternya jg sudah saya pasang

    Unknown

    Punya saya gk bisa muncul emoji nya mas :'(
    etsyteamnfcr(dot)blogspot.com

    Taufik Nurrohman

    Punyamu masih memakai markup komentar versi lama, jadi pakai eksekusi yang ini:

    repText('comments-block');

    NB: Kalau sudah pakai emotikon yang versi JQuery tidak perlu lagi memasang ini, nanti malah rusak.

    Anonim

    Semoga Bisa kakak..
    Coba ya

    Unknown

    Kenapa ya sob pas saya mengikuti jawaban yg mas jawab pada pertanyaannya mas Permalink Rizky Ramadhan (untuk memuncul Emo pada pesan komentar?) saya punya nggak muncul ya? mohon bantuannya sob

    Unknown

    Semua serba pake Variabel, jadi ringkas dan mudah dipahami ! :yaya:

    Kang Rian

    #great tutorial ! :-bd ( you can visit me back master !! http://blog.riandesign.web.id ) #seeyou :yaya: