Hindari Penggunaan Widget Tanpa Edit HTML

Apakah Anda sedang berusaha memperbaiki template blog agar 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 kode CSS, javascript dan pemanggilnya pada satu tempat di gadget sidebar. Di Google cukup banyak yang memberikan 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 contoh 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/AVvXsEhdpLz7_taYDgp_4pkuHiahnMq9Vk6Tob2PfFzNLRWhvwMgWf_5QrNI9R9dyRd9weRS1kJELASg5jbkBuxrQTup-Amn5YC_KVIpsGfRW-7G7JrPPyqE8YFy0yaQMhvwpZkBGGlhq1WATFo/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/AVvXsEhFGxCHQOiGNfqR7kRAngjFeIlxwHu0QdSZjt_nKQJqnGoMqwbJscigh7j1aWW00SevSdlLihoFXqc1Uxf6EDSDcZ3XsJeVWUJCJEkNDyk9dIKlSM7tLOD_lU9X5YIyV7OI6IEU20f7XTg/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 kode CSS, javascript, dan pemanggilnya. Nah lalu bagaimana cara penerapannya agar widget ini bisa kita terapkan dan valid HTML5? Caranya agak sedikit ribet karena agar valid HTML5 ini, kita harus menyimpan kode CSS dan javascriptnya pada edit HTML, sedangkan pemanggilnya tetap pada gadget sidebar. 

Saya contohkan seperti pada kode di atas. Kode CSS adalah kode yang diapit diantara kode <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/AVvXsEhdpLz7_taYDgp_4pkuHiahnMq9Vk6Tob2PfFzNLRWhvwMgWf_5QrNI9R9dyRd9weRS1kJELASg5jbkBuxrQTup-Amn5YC_KVIpsGfRW-7G7JrPPyqE8YFy0yaQMhvwpZkBGGlhq1WATFo/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/AVvXsEhFGxCHQOiGNfqR7kRAngjFeIlxwHu0QdSZjt_nKQJqnGoMqwbJscigh7j1aWW00SevSdlLihoFXqc1Uxf6EDSDcZ3XsJeVWUJCJEkNDyk9dIKlSM7tLOD_lU9X5YIyV7OI6IEU20f7XTg/s1600/arrow_down.gif);background-repeat: no-repeat;background-position: right center;font-weight:bold;}

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

Kemudian kode javascriptnya yaitu kode yang diapit diantara kode <script type='text/javascript'> dan </style>. Bila ada kode js, silahkan satukan dengan kode 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 kode di atas pada edit HTML DI ATAS/SEBELUM kode </head>

Kemudian kode 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 embel-embel "Tanpa Edit HTML" silahkan lakukan cara-cara di atas untuk menghindari error pada validasi HTML5.

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

KA