DTE :]

Saturday, January 14, 2012

Penolakan-Penolakan Blogger terhadap JavaScript dan URL

Penolakan Blogger terhadap JavaScript dan URL

Gambar di atas adalah beberapa contoh penolakan Blogger terhadap JavaScript dan URL yang Anda tambahkan di dalam tema baik dari dasbor yang lama maupun dasbor yang baru. Suatu saat mungkin Anda mengalami masalah-masalah tersebut hingga pada akhirnya Anda memutuskan untuk menyerah dan tidak melanjutkan apa yang harus Anda selesaikan.

Pertama-tama, perlu Anda ketahui bahwa saat Blogger menerima JavaScript, secara normal dia akan segera memparse semua kode ' (petik tunggal) menjadi ' dan " (petik ganda) menjadi " saat tema telah tersimpan.

Sebagai contoh, suatu saat mungkin Anda hendak menyisipkan kode seperti ini ke dalam tema:

$(function() {
    $('img').hover(function() {
        $(this).animate({opacity:"0.4"}, 1000);
    }, function() {
        $(this).animate({opacity:"1"}, 1000);
    });
});

Namun saat tema telah berhasil tersimpan, kode yang Anda sisipkan justru berubah menjadi seperti ini:

$(function() {
    $('img').hover(function() {
        $(this).animate({opacity:"0.4"}, 1000);
    }, function() {
        $(this).animate({opacity:"1"}, 1000);
    });
});

Itu bukan masalah. Script tersebut masih tetap bisa bekerja dengan baik dan simbol-simbol tersebut akan kembali berubah menjadi simbol petik seperti sebelumnya pada kode sumber blog yang sesungguhnya.

Namun saat Anda menyisipkan JavaScript dengan tag HTML di dalamnya, sering kali Anda gagal melakukan itu dan akan mendapatkan peringatan seperti pada gambar pertama. Sebagai contoh:

var list = "<li>Contoh Daftar 1</li>" +
           "<li>Contoh Daftar 2</li>" +
           "<li>Contoh Daftar 3</li>";
$('.post').append('<ul>' + list + '</ul>');

Jika Blogger mendapatkan script ini begitu saja, maka Blogger akan menampilkan penolakan yang sejenis seperti pada gambar pertama.

Chris, dalam artikelnya pernah mengatakan seperti ini:

IF you are using XHTML still and IF your JavaScript has HTML in it (or even just the < character, as might be needed in greater-than logic), you'll need these CDATA comments around the script IF you care about the script passing validation (you'll get an error like: document type does not allow element “div” here). AND IF, you are putting script literally between the opening and closing script tags, not linking to a script src.

That's a lot of IF's.

Jika Anda masih menggunakan XHTML dan jika JavaScript Anda mengandung kode HTML di dalamnya (atau bahkan hanya karakter < seperti yang mungkin diperlukan dalam fungsi logika “lebih besar dari”), Anda harus menambahkan komentar CDATA di sekitar script jika Anda peduli dengan validasi script (Anda akan mendapatkan pesan kesalahan seperti: Jenis dokumen tidak mengizinkan elemen “div” di sini). Dan, jika Anda menempatkan script apa adanya (script eksternal) antara pembukaan dan penutupan tag <script>, bukannya menghubungkan ke <script src="....

Solusi untuk meloloskan script Anda dari Blogger adalah seperti ini:

<script>
//<![CDATA[
var list = "<li>Contoh Daftar 1</li>" +
           "<li>Contoh Daftar 2</li>" +
           "<li>Contoh Daftar 3</li>";
$('.post').append('<ul>' + list + '</ul>');
//]]>
</script>

Blogger tidak akan menolak jika script yang Anda tuliskan berada di dalam komentar //<![CDATA[ ...

URL/Uniform Resource Locator

Selain JavaScript, Blogger biasanya juga akan menolak URL. Berikut ini adalah contoh URL yang akan ditolak Blogger:

http://www.blogger.com/rearrange?blogID=298900102869XXXXXX&widgetType=HTML&widgetId=HTML2&action=editWidget&sectionId=sidebar

Penolakan yang muncul biasanya seperti pada gambar ke dua. Untuk mengatasi masalah itu, cukup parse semua karakter & menjadi &amp;:

http://www.blogger.com/rearrange?blogID=298900102869XXXXXX&amp;widgetType=HTML&amp;widgetId=HTML2&amp;action=editWidget&amp;sectionId=sidebar

Pelajari: Memasukkan kode HTML dalam Posting

Catatan Tambahan

Jika Anda menuliskan kode di dalam tema, gunakan petik tunggal, jika Anda menuliskan kode di dalam posting/widget, gunakan petik ganda sebagai penanda nilai atau selektor. Ini hanya saran:

Dalam Tema

<a href='/p/daftar-isi.html' target='_blank'>Daftar Isi</a>
<script src='jquery.js'></script>
<script>
    alert('Ganteng!');
</script>

Dalam Posting/Widget

<a href="/p/daftar-isi.html" target="_blank">Daftar Isi</a>
<script src="jquery.js"></script>
<script>
    alert("Ganteng!");
</script>

Labels: , ,

10 Comments:

Post a Comment



<< Home