Hindari Penggunaan Widget Tanpa Edit HTML

Hindari Penggunaan Widget Tanpa Edit HTML

Bola Hero Gawai

Hindari Penggunaan Widget Tanpa Edit HTML

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(http://1.bp.blogspot.com/-qtI_UsPdZwc/Tmzg5K8eADI/AAAAAAAABrU/ScrT9X8fBBY/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(http://2.bp.blogspot.com/-9If6SXYDklM/Tmzg4W8YwuI/AAAAAAAABrQ/XlCiTeVqtq0/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(http://1.bp.blogspot.com/-qtI_UsPdZwc/Tmzg5K8eADI/AAAAAAAABrU/ScrT9X8fBBY/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(http://2.bp.blogspot.com/-9If6SXYDklM/Tmzg4W8YwuI/AAAAAAAABrQ/XlCiTeVqtq0/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...

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

8 Comments Add Comment

biasanya ini sering dilakukan newbie, karena masih ribet dengan edit HTML. caranya juga estra gampang hehehe,, seperti yang saya ketahui dari keluhan maskolis tentang bannednya googlecode yang dalam keluhan maskolis, dan saya pun mendapatkan jawaban dari seorang blogging asal finland, ternyata googlecode yang kita simpan dihosting ggcode ada batas pemakaian, kalau lewati batas pemakaian, googlecode akan membanned id tersebut, jd tidak heran kalau maskolis sering kena samurai oleh mbak googlecode,... heheheh.. artikel di atas cukup bermanfaat.. nice bro

Balas

Iya mas sepertinya begitu, jika kita membagikan kode js yang disimpan di Googlecode, ada kemungkinan melewati batas pemakaian hehehe :D

Balas

alhamdulillah dah ane terapkan bang...BERHASIL....trims atas bagi2 ilmunya, dan mohon koreksi untuk blog ane karena ane masih newbie.. :)

Balas

Sama-sama mas... :)
Blognya bagus mas enak dilihat... :D

Balas

ternyata mas ini sama dengan saya tidak meremehkan Valid HTML5 juga, saya skrg masih sisa 3 error di blog personal nih..., salah satunya:
Line 24, Column 122: & did not start a character reference. (& probably should have been escaped as &.)
…n.css?targetBlogID=8366114361674429897&zx=f7cffeab-fc84-4343-a91c-41206cc33ba4…

Balas

alhamdulillah sangat mengena bwt sy kang, dr kmrn ini yg sy cari2... kang adhy, misal kita mau masukkan resent post/ popular post ke widget tsb, bagaimana cara masukin di tabnya? mohon dicontohkan agar kita2 lgsg paham endingnya (kyk filem2 india hehe)... maksi bgt kang _/\_

Balas

setau saya validasi kurang penting..heheheheehehee

Balas

memang betul :) namun jika kita bisa memvalidkannya kenapa tidak...
validasi bukan segalanya tapi validasi sebuah pilihan yang baik dan yang diutamakan tetaplah konten yang berkualitas.
Sekarang jika ada dua blog yang sama-sama memiliki konten yang berkualitas namun yang satu valid dan yang satu tidak, jika harus memilih maka saya akan memilih blog yang valid. Jangan sampai salah membandingkan seperti ini "lebih baik blog yang memiliki konten yang berkualitas daripada blog yang valid namun tidak memiliki konten yang berkualitas" jelas itu salah membandingkan seperti membandingkan si cantik dan si buruk rupa, coba bandingkannya antara si cantik saja dengan si cantik yang baik hati, jelas saya akan memilih si cantik yang baik hati. :)

Balas
Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×