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 memakai sebuah widget yang penerapannya tanpa melalui edit HTML. 

Biasanya widget ini memasukan instruksi CSS, javascript dan pemanggilnya pada satu daerah di gadget sidebar. Di Google cukup banyak yang menawarkan tutor cara menciptakan 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 berdasarkan pengalaman saya, sehabis kita cek validasi HTML5 di W3C cukup banyak error yang disebabkan oleh widget ini.

Sebagai referensi saya ambil sebuah tutor cara menciptakan hidangan 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/AVvXsEgoTfmvn4mZriz1Si7iDlLup76MvBqt-TbuYjz_FC-Q5DJtUA5Z4kLX3HHWZxWzO7el2eN7MfCUZUh5DLCZGss7NB34jDVufY5t6v6-oW0YTgJPO31l45QE6StQK5YZ4mU2ALriTtQDpFU/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/AVvXsEidHLHP71r44XyygoZwcxFiajJmNSGk16L_d11K2F99nqkSwd187tbImfCrII4GOhirPRR9E2v0YSn3VDD2svvZudv7C0ZC5uLkd9WtXxvs4Kpz6npqeWXsZUmL75doCd7zU4rtB2BK00Q/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 instruksi CSS, javascript, dan pemanggilnya. Nah kemudian bagaimana cara penerapannya biar widget ini sanggup kita terapkan dan valid HTML5? Caranya agak sedikit ribet lantaran biar valid HTML5 ini, kita harus menyimpan instruksi CSS dan javascriptnya pada edit HTML, sedangkan pemanggilnya tetap pada gadget sidebar. 

Saya contohkan menyerupai pada instruksi di atas. Kode CSS ialah instruksi yang diapit diantara instruksi <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/AVvXsEgoTfmvn4mZriz1Si7iDlLup76MvBqt-TbuYjz_FC-Q5DJtUA5Z4kLX3HHWZxWzO7el2eN7MfCUZUh5DLCZGss7NB34jDVufY5t6v6-oW0YTgJPO31l45QE6StQK5YZ4mU2ALriTtQDpFU/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/AVvXsEidHLHP71r44XyygoZwcxFiajJmNSGk16L_d11K2F99nqkSwd187tbImfCrII4GOhirPRR9E2v0YSn3VDD2svvZudv7C0ZC5uLkd9WtXxvs4Kpz6npqeWXsZUmL75doCd7zU4rtB2BK00Q/s1600/arrow_down.gif);background-repeat: no-repeat;background-position: right center;font-weight:bold;}

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

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

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

Semoga sanggup dimengerti dan bermanfaat... Selamat berkreasi...

Sumber https://www.kompiajaib.com/

Share this post