Paket JavaScript Fitur Manipulasi Komentar Blogger
Tabel Konten
- Perhatian Pertama: Rusaknya DOM (?)
- Penggunaan Tag HTML Asli
- Progressive Enhancement
- Mengatur Tampilan Melalui CSS
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.
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:
Temukan kode ini:
</head>
Salin kode CSS ini dan letakkan di atasnya:
<b:if cond='data:blog.pageType == "item"'>
<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 == "item"'>
<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=':'(' 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='''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):
Perintah | Format |
---|---|
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 emotikon | Beberapa 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
you
mas cara agar ketika klik emotikon muncul input kodenya gmn? saya coba utak atik pake kode ini v gagal
you
Taufik Nurrohman
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:-).
Taufik Nurrohman
Unknown
gimana mas agar link admin tidak terkena block juga???
contohnya seperti punya mas ini: Teks Tautan
Taufik Nurrohman
⇒ /2011/08/membedakan-tampilan-komentar.html
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:
IRIL SAGITA
Kalau pingin manipulasi ini juga work di notifikasi komentar gimana caranya kak ?
Taufik Nurrohman
Kurang lebihnya mirip dengan ini → /2012/11/recent-comments-widget-for-blogger-with.html?showComment=1414412973377#c4819522075277822754
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
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):
Bachrul Arief F
alhamdulillah,sudah berhasil mas,,makasih banyak atas bantuannya :) :okey :hore
Unknown
mas, pas saya masukin kode yang posisinya d atas kode "body" itu dan ingin save templatenya kok malah error ya?
Taufik Nurrohman
Error bagaimana?
→ /2013/01/bagaimana-cara-bertanya-yang-baik-di.html
Taufik Nurrohman
Oh iya maaf. CDATA–nya lupa ditutup pas ngedit kemarin.
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?
Taufik Nurrohman
Seharusnya tinggal ganti ID saja jadi
comment-holder
.Unknown
pak untuk nambahi menyisipkan tautan aman dengan kode [url] seperti blog ini bagaimana pak?
Taufik Nurrohman
→ /2012/07/no-live-links.html
Dibaca saja diskusi-diskusi di bawahnya.
Unknown
pak kalau emoticon facebook penguin <(\") regexnya gimana yah?
Taufik Nurrohman
Irfan Muhammad Ghani
mas kalau buat yang kayak ginian gimana?
Taufik Nurrohman
Situs keblokir.
Irfan Muhammad Ghani
atau buat kayak gini aja ya
b = b.replace(/\[update\](.*?)\[\/update\]/ig, "<div class='update'>$1<\/div>");
Unknown
gk bisa bro :(
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(/<i rel="
harus tetap seperti yang sebelumnya mas, seperti inib = 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>");
Taufik Nurrohman
Jadikan protokol sebagai opsional →
(?:https?:)?
Pastikan setidaknya ada satu karakter di dalam lingkup braket dan itu bukan spasi →
\S(.*?)
Demo: https://regex101.com/r/xY9aN3/3