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 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 "tag" pembuka dan "tag" 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 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 12px Monaco,"Courier New",Monospace;
word-wrap:normal;
white-space:pre;
background-color:black;
color:white;
padding:0.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 type='text/css'>
/* Add More Features to the Blogger Comments by Taufik Nurrohman */
img.emo {
display:inline-block;
vertical-align:middle;
}
#comment-holder .cm-youtube {
display:block;
border:none !important;
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: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;
max-width:96%;
height:auto;
width:auto\9;
}
#comment-holder code,
#comment-holder i[rel="code"] {
font:normal 12px Monaco,"Courier New",Monospace;
color:blue;
}
#comment-holder pre,
#comment-holder i[rel="pre"] {
display:block;
font:normal 12px Monaco,"Courier New",Monospace;
background-color:#333;
color:white;
padding:0.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 type="text/javascript">
//<\[\/img\]/ig, "<img class='cm-image' src='$1' alt='loading...' \/>");
// YouTube video
b = b.replace(/<i rel="youtube">http:\/\/www\.youtube\.com\/embed\/(.*?)<\/i>/ig, "<iframe class='cm-youtube' src='http://www.youtube.com/embed/$1'><\/iframe>");
b = b.replace(/<i rel="youtube">(http:\/\/youtu\.be\/|http:\/\/www\.youtube\.com\/watch\?v\=)(.*?)<\/i>/ig, "<iframe class='cm-youtube' src='http://www.youtube.com/embed/$2'><\/iframe>");
b = b.replace(/\[youtube\]http:\/\/www\.youtube\.com\/embed\/(.*?)\[\/youtube\]/ig, "<iframe class='cm-youtube' src='http://www.youtube.com/embed/$1'><\/iframe>");
b = b.replace(/\[youtube\](http:\/\/youtu\.be\/|http:\/\/www\.youtube\.com\/watch\?v\=)(.*?)\[\/youtube\]/ig, "<iframe class='cm-youtube' src='http://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=[0-9a-zA-Z-_]*/ig, "");
b = b.replace(/\/s(640|1600)/g, "/s400");
// Emoticons
b = b.replace(/\s:\)+/g, " <img class='emo' alt='emo' src='" + c + "smile.gif'\/>");
b = b.replace(/\s;\)+/g, " <img class='emo' alt='emo' src='" + c + "wink.gif'\/>");
b = b.replace(/\s:\(/g, " <img class='emo' alt='emo' src='" + c + "sad.gif'\/>");
b = b.replace(/\s=\(/g, " <img class='emo' alt='emo' src='" + c + "sadanimated.gif'\/>");
b = b.replace(/\s@@,/g, " <img class='emo' alt='emo' src='" + c + "rolleyes.gif'\/>");
b = b.replace(/\s:s/ig, " <img class='emo' alt='emo' src='" + c + "sullen.gif'\/>");
b = b.replace(/\s:(\\|\/)/g, " <img class='emo' alt='emo' src='" + c + "memble.gif'\/>");
b = b.replace(/\s:D/g, " <img class='emo' alt='emo' src='" + c + "haha.gif'\/>");
b = b.replace(/\s=D/g, " <img class='emo' alt='emo' src='" + c + "hihi.gif'\/>");
b = b.replace(/\s\^:D/g, " <img class='emo' alt='emo' src='" + c + "abovemehaha.gif'\/>");
b = b.replace(/\s\^(\_|)\^/g, " <img class='emo' alt='emo' src='" + c + "senyum-tulus.gif'\/>");
b = b.replace(/\s:'\(/g, " <img class='emo' alt='emo' src='" + c + "cry.gif'\/>");
b = b.replace(/\sT_T/ig, " <img class='emo' alt='emo' src='" + c + "tears.gif'\/>");
b = b.replace(/\sB\)/g, " <img class='emo' alt='emo' src='" + c + "cool.gif'\/>");
b = b.replace(/\s:Q/ig, " <img class='emo' alt='emo' src='" + c + "smoking.gif'\/>");
b = b.replace(/\s7:\(/g, " <img class='emo' alt='emo' src='" + c + "conf.gif'\/>");
b = b.replace(/\s:p/ig, " <img class='emo' alt='emo' src='" + c + "wee.gif'\/>");
b = b.replace(/\s:Oz+/ig, " <img class='emo' alt='emo' src='" + c + "sleep.gif'\/>");
b = b.replace(/\s7:O/ig, " <img class='emo' alt='emo' src='" + c + "angry.gif'\/>");
b = b.replace(/\s\\o\//ig, " <img class='emo' alt='emo' src='" + c + "applause.gif'\/>");
b = b.replace(/\s\\m\//ig, " <img class='emo' alt='emo' src='" + c + "metal.gif'\/>");
b = b.replace(/\s(<3|:\*)/ig, " <img class='emo' alt='emo' src='" + c + "love.gif'\/>");
b = b.replace(/\s0:\)+/ig, " <img class='emo' alt='emo' src='" + c + "angelgreen.gif'\/>");
b = b.replace(/\s\^o\^/ig, " <img class='emo' alt='emo' src='" + c + "angelwhite.gif'\/>");
b = b.replace(/\s:-a/ig, " <img class='emo' alt='emo' src='" + c + "vomit.gif'\/>");
b = b.replace(/\s\*fck\*/ig, " <img class='emo' alt='emo' src='" + c + "fuck.gif'\/>");
b = b.replace(/\sxV/ig, " <img class='emo' alt='emo' src='" + c + "demo.gif'\/>");
b = b.replace(/\sx\@/g, " <img class='emo' alt='emo' src='" + c + "marahbesar.gif'\/>");
b = b.replace(/\s\X\@/g, " <img class='emo' alt='emo' src='" + c + "arrgh.gif'\/>");
b = b.replace(/\s:-d/ig, " <img class='emo' alt='emo' src='" + c + "top.gif'\/>");
b = b.replace(/\s:-bd/ig, " <img class='emo' alt='emo' src='" + c + "topmarkotop.gif'\/>");
b = b.replace(/\s\~x\(+/ig, " <img class='emo' alt='emo' src='" + c + "ugh.gif'\/>");
b = b.replace(/\s:W/g, " <img class='emo' alt='emo' src='" + c + "explain.gif'\/>");
b = b.replace(/\s\'\'J/ig, " <img class='emo' alt='emo' src='" + c + "call.gif'\/>");
if (document.getElementById(id)) {
document.getElementById(id).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 |
0 komentar:
Posting Komentar