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

      @Suwardi Unggit saya kasih 1001 :p

    • 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

    • arimjie blog

      @Taufik Nurrohmandiskusi di blog mas taufik lebih bagusan, langsung sama masternya..

    • 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

        Mungkin bisa dicoba yang ini stackoverflow

      • 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?

    • Taufik Nurrohman

      @The7Bloggers Itu emotikon versi lama kok. Cek di Emotikon Blogger Otomatis dengan JQuery

    • 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....?

    • Taufik Nurrohman

      @The7Bloggers Hmmm... jadi puyeng @@,

    • 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 diapa-apakan.

    • Anonim

      @Taufik Nurrohman

      kok saya kaya begitu :(

    • 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(

    • Taufik Nurrohman

      @Muhammad Irham Di blog yang mana??? :\

    • 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 :(

    • Chandra

      BINGUNG KANG

    • 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:

    Komentar telah ditutup.