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:

At Sunday, January 15, 2012 at 3:37:00 PM GMT+7, Blogger Hadi Safa'at said...

mantaf infonya, ini blog super keren

 
At Tuesday, July 10, 2012 at 1:09:00 AM GMT+7, Blogger Unknown said...

mas, script nya ditaruh dimana ya??

 
At Tuesday, July 10, 2012 at 9:56:00 AM GMT+7, Blogger Taufik Nurrohman said...

@Ibnu Hazar Di atas </head> atau di atas </body>. Umumnya begitu.

 
At Tuesday, July 17, 2012 at 6:39:00 PM GMT+7, Blogger Yusril Ibnu Maulana said...

baru tahu fungsi //<![CDATA[ , dikirain itu hanya sebuah comment saja (di js kan commentnya memang memakai tag // kan ?) hehehe. pabtes aja setiap saya mau menghapus //<![CDATA[ (tujuannya sih agar blog lebih cepat...) malah error.. hehehehe
Thanks infonya..,sangat berguna bagi saya yang sedang mencari ilmu

 
At Sunday, December 2, 2012 at 8:32:00 AM GMT+7, Blogger Unknown said...

oh, ok dah ngingetin mas.. :-bd

 
At Saturday, March 2, 2013 at 12:50:00 PM GMT+7, Blogger obengkumana said...

sekitar 2 hari lalu saya mengalami sprti itu. script yang tdk jalan pada sebuah template hasil download. penulisannya reda "aneh". Karena blm tau artikel ini, saya hanya coba2 dengan membandingkan template hasil kreasi mas taufik. akhirnya bs jalan. tks :-bd

 
At Sunday, July 21, 2013 at 7:11:00 PM GMT+7, Blogger Unknown said...

sehabis edit-edit template.
http://3.bp.blogspot.com/-6XaBRUGFnYE/UettzaBxDEI/AAAAAAAAAFs/zosEgJzFfJo/s1600/eror.png

setiap login blogger kata-kata "bX-blabla" berbeda2, gimana ya?

 
At Monday, July 22, 2013 at 6:46:00 PM GMT+7, Blogger Taufik Nurrohman said...

Biasanya itu terjadi karena kita logout di tab lain, lalu mencoba menyimpan perubahan di tab yang aktif dengan akun yang sama.

 
At Tuesday, July 23, 2013 at 5:38:00 AM GMT+7, Blogger Unknown said...

wah sepertinya benar mas, memang pas itu buat jaga-jaga saya buka 2 tab, kelupaan back up templatenya sementara kode sudah dipaste semua.

 
At Wednesday, July 31, 2013 at 2:46:00 PM GMT+7, Blogger Unknown said...

tapi saya saat berkomentar menggunakan openID, tidak bisa karena adanya kesalahan seperti itu mas? gimana ya mengatasinya?

. Bantu Blogger mengatasi kesalahan blablablablabla bX-blabla ?

 

Post a Comment

<< Home