Hindari Penggunaan Widget Tanpa Edit HTML

Apakah Anda sedang berusaha memperbaiki template blog biar valid HTML5? Saya ada satu tips untuk mengurangi error pada validasi HTML5. Yaitu jangan menggunakan sebuah widget yang penerapannya tanpa melalui edit HTML. 

Biasanya widget ini memasukan arahan CSS, javascript dan pemanggilnya pada satu kawasan di gadget sidebar. Di Google cukup banyak yang menunjukkan tutor cara membuat sebuah widget tanpa edit HTML.

Memang untuk menerapkannya ke blog kita cukup gampang, hanya meng-copy seluruh kodenya dan mem-paste-nya pada gadget HTML/javascript di tata letak atau layout, maka jadilah widget yang kita inginkan pada blog kita. Namun menurut pengalaman saya, setelah kita cek validasi HTML5 di W3C cukup banyak error yang disebabkan oleh widget ini.

Sebagai pola saya ambil sebuah tutor cara membuat menu accordion tanpa edit HTML dari Maskolis.

<style type="text/css">
#accordion{width:100%;margin:auto;border:0px solid white}
#accordion h2{padding:5px 10px;background-color:#ccc;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-kY6ptMdMmV_sfnucHzGVNo595fTtzDRCPP6GRnQf1Gy0KjVGpAk6GS3X_qjQ4uwoQ_cTSr18rLsC2GmVUsAD-ni4J9FagAUZfyIgeFaSnGq35d_O9rGZR7Wq7dwm4dxaQjxpHntq6QA/s1600/arrow_right.gif);background-repeat: no-repeat;background-position: right center;color:#000;font:normal 11px Tahoma;border-bottom:1px solid #FFF;cursor:pointer;}
#accordion .content{font:normal 11px Arial;padding:5px 10px;background:#eee;}
#accordion .content ul {list-style:none;margin:0 0 0;padding:0 0 0;}
#accordion .content li {background-image: url(); background-repeat: no-repeat;background-position: left center;margin:0;padding:2px 0 3px 0;text-indent:0px;border-bottom:1px dotted #ccc;line-height:1.3em;}
#accordion .content li a:hover {text-decoration:none;color:#000;}
#accordion h2.active{background-color:#bbb;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcvyUreW2vfESRr3ymiKALMsIVIAtY5sDkfEkejFhHo6MpwMP-CHJe6qFhHoy7cFfy-Bjs_3iIqVv3xsSJCUIygneJSOwNMZ-0i5x2_SXlAvzb7QLPrSNbWmjS8zt2-WM8VasWVnO2ykk/s1600/arrow_down.gif);background-repeat: no-repeat;background-position: right center;font-weight:bold;}
</style>
<script type="text/javascript" src="http://yourjavascript.com/121511228073/accordion-menu.js"></script>
<script type='text/javascript'>
$(function() {
$('#accordion .content').hide();
$('#accordion h2:first').addClass('active').next().slideDown('slow');
$('#accordion h2').click(function() {
if($(this).next().is(':hidden')) {
$('#accordion h2').removeClass('active').next().slideUp('slow');
$(this).toggleClass('active').next().slideDown('slow');
}
});
});
</script>
<div id="accordion">
<h2>Title 1</h2>
<div class="content">
Isi konten 1
</div>
<div id="accordion">
<h2>Title 2</h2>
<div class="content">
Isi konten 2
</div>
<div id="accordion">
<h2>Title 3</h2>
<div class="content">
Isi konten 3
</div>
<div id="accordion">
<h2>Title 4</h2>
<div class="content">
Isi konten 4
</div>
<div id="accordion">
<h2>Title 5</h2>
<div class="content">
Isi konten 5
</div>
</div></div></div></div></div>

Di situ terlihat ada arahan CSS, javascript, dan pemanggilnya. Nah lalu bagaimana cara penerapannya biar widget ini mampu kita terapkan dan valid HTML5? Caranya agak sedikit ribet karena biar valid HTML5 ini, kita harus menyimpan arahan CSS dan javascriptnya pada edit HTML, sedangkan pemanggilnya tetap pada gadget sidebar. 

Saya contohkan menyerupai pada arahan di atas. Kode CSS yakni arahan yang diapit diantara arahan <style type="text/css"> dan </style>

#accordion{width:100%;margin:auto;border:0px solid white}
#accordion h2{padding:5px 10px;background-color:#ccc;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-kY6ptMdMmV_sfnucHzGVNo595fTtzDRCPP6GRnQf1Gy0KjVGpAk6GS3X_qjQ4uwoQ_cTSr18rLsC2GmVUsAD-ni4J9FagAUZfyIgeFaSnGq35d_O9rGZR7Wq7dwm4dxaQjxpHntq6QA/s1600/arrow_right.gif);background-repeat: no-repeat;background-position: right center;color:#000;font:normal 11px Tahoma;border-bottom:1px solid #FFF;cursor:pointer;}
#accordion .content{font:normal 11px Arial;padding:5px 10px;background:#eee;}
#accordion .content ul {list-style:none;margin:0 0 0;padding:0 0 0;}
#accordion .content li {background-image: url(); background-repeat: no-repeat;background-position: left center;margin:0;padding:2px 0 3px 0;text-indent:0px;border-bottom:1px dotted #ccc;line-height:1.3em;}
#accordion .content li a:hover {text-decoration:none;color:#000;}
#accordion h2.active{background-color:#bbb;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcvyUreW2vfESRr3ymiKALMsIVIAtY5sDkfEkejFhHo6MpwMP-CHJe6qFhHoy7cFfy-Bjs_3iIqVv3xsSJCUIygneJSOwNMZ-0i5x2_SXlAvzb7QLPrSNbWmjS8zt2-WM8VasWVnO2ykk/s1600/arrow_down.gif);background-repeat: no-repeat;background-position: right center;font-weight:bold;}

Nah silahkan arahan di atas simpan pada edit HTML DI ATAS/SEBELUM arahan ]]></b:skin>

Kemudian arahan javascriptnya yaitu arahan yang diapit diantara arahan <script type='text/javascript'> dan </style>. Bila ada arahan js, silahkan satukan dengan arahan ini.

<script type="text/javascript" src="http://yourjavascript.com/121511228073/accordion-menu.js"></script>
<script type='text/javascript'>
$(function() {
$('#accordion .content').hide();
$('#accordion h2:first').addClass('active').next().slideDown('slow');
$('#accordion h2').click(function() {
if($(this).next().is(':hidden')) {
$('#accordion h2').removeClass('active').next().slideUp('slow');
$(this).toggleClass('active').next().slideDown('slow');
}
});
});
</script>

Nah silahkan simpan arahan di atas pada edit HTML DI ATAS/SEBELUM arahan </head>

Kemudian arahan pemanggilnya silahkan simpan di gadget HTML/JavaScript di tata letak atau layout.

<div id="accordion">
<h2>Title 1</h2>
<div class="content">
Isi konten 1
</div>
<div id="accordion">
<h2>Title 2</h2>
<div class="content">
Isi konten 2
</div>
<div id="accordion">
<h2>Title 3</h2>
<div class="content">
Isi konten 3
</div>
<div id="accordion">
<h2>Title 4</h2>
<div class="content">
Isi konten 4
</div>
<div id="accordion">
<h2>Title 5</h2>
<div class="content">
Isi konten 5
</div>
</div></div></div></div></div>

Demikian juga untuk widget-widget lain yang mempunya komplemen "Tanpa Edit HTML" silahkan lakukan cara-cara di atas untuk menghindari error pada validasi HTML5.

Semoga dapat dimengerti dan bermanfaat... Selamat berkreasi...