Cara Membuat Widget Tabbed Sidebar Dengan JavaScript

Beragam cara dilakukan untuk mempercepat loading blog dan memaksimalkan ruang yang ada di widget blog, ada yang hanya menempatkan sedikit Widget, bahkan sampai dengan cara memodifikasi Templated Blog tersebut. 

Untuk dipostingan kali ini masih di bahas seputar Widget Blogger, yang akan di bahas Cara Membuat Widget Tabbed Sidebar Dengan JavaScript. Ada banyak cara sebenarnya para Web design memodift tampilan widget tabbed, ada yang manual dengan cara menempatkan langsung di sidebar biasanya menggunakan Jquery dan Javascript, nah untuk cara yang saya bahas ini adalah menggunakan Javascript.

Namun ada modifikasi cara ini yaitu dengan tidak menggunakan integrasi Jquery Library karena saya hanya sedikit memodifikasi kodenya agar pada tampilan tab-nya lebih flat, responsive tujuannya sih biar loading blog tidak berat dan simple terlihatnya. Untuk sobat yang mau mencobanya mari disimak bersama berikut ini Cara Membuat Widget Tabbed Sidebar Dengan JavaScript.

HTML/Javascript

Silahkan sobat salin dan letakkan kode ini di gadget HTML/Javascript sidebar dan simpan pada widget yang akan dibuat tab.

<style scoped="scoped">
#tabnav0,#tabnav0h{margin:0;display:none}
#tabnav0h{position:relative;top:0;height:0;border:0}
#tabnav0v{z-index:0;position:absolute;left:0;top:0;width:0;height:0;display:none}
#tabnav0{z-index:0;position:relative;padding:0;list-style:none;left:0;white-space:nowrap}
#tabnav0 li{float:left;text-align:center;padding:0;width:33.3%;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
#tabnav0 a{padding:12px 6px;display:block;color:#fff;text-decoration:none;font-size:16px;font-weight:500;background:#333;margin:2px 0 0}
#tabnav0 .here a{background-color:#111}
#tabnav0 .here a:active,#tabnav0 .here a:hover,#tabnav0 a:active,#tabnav0 a:hover{background:#666}
</style>
<script type='text/javascript'>
//<![CDATA[
var tabsID="tabnav0",tabnav0_count=3,tabnav0_tabtitles=[],tabnav0_hideH2=!0,tabnav0_hidechildH2=!0;
function tabnav0_avaa(t){for(var a=0;a<tabnav0_tabids.length;a++)document.getElementById(tabnav0_tabids[a]).style.display="none",tabsIDs[tabnav0_tabids[a]]&&(document.getElementById(tabsIDs[tabnav0_tabids[a]]).style.display="none"),document.getElementById("tab_"+tabnav0_tabids[a]).className="";toshow=document.getElementById(tabnav0_id).style.display,document.getElementById(t).style.display=toshow,tabsIDs[t]&&(document.getElementById(tabsIDs[t]).style.display=toshow),document.getElementById("tab_"+t).className="here",tabsIDs[tabnav0_id]=t}function addLoadEvent(t){var a=window.onload;"function"!=typeof window.onload?window.onload=t:window.onload=function(){a(),t()}}function tabnav0_inittabs(){var t="tabnav0",a=document.getElementById(t);a.style.display="block",a=a.parentNode.parentNode,a.style.marginBottom="-10px",tabnav0_id=a.id;for(var n=a.firstChild;n&&1!=n.nodeType;)n=n.nextSibling;n&&"H2"==n.nodeName&&(tabnav0_hideH2||""==n.innerHTML)?n.style.display="none":n&&"H2"==n.nodeName&&(document.getElementById("tabnav0v").style.top="38px");for(var e=0;e<tabnav0_count;e++){for(a=a.nextSibling;a&&1!=a.nodeType;)a=a.nextSibling;if(!a)break;tabnav0_tabids[e]=a.id}document.getElementById(t+"h").style.display="block",document.getElementById(t+"v").style.display="block";for(var d="",e=0;e<tabnav0_tabids.length;e++){for(a=document.getElementById(tabnav0_tabids[e]),a=a.firstChild;a&&1!=a.nodeType;)a=a.nextSibling;if(a&&"H2"!=a.nodeName)for(a=a.firstChild;a&&1!=a.nodeType;)a=a.nextSibling;a&&"H2"==a.nodeName&&(tabnav0_hidechildH2&&(a.style.display="none"),tabnav0_tabtitles[e]&&""!=tabnav0_tabtitles[e]||(tabnav0_tabtitles[e]=a.innerHTML)),tabnav0_tabtitles[e]&&""!=tabnav0_tabtitles[e]||(tabnav0_tabtitles[e]=tabnav0_tabids[e]),a=document.getElementById("tab_"+tabnav0_tabids[e]),d+='<li id="tab_'+tabnav0_tabids[e]+'"><a href="#" onclick="tabnav0_avaa(\''+tabnav0_tabids[e]+"');this.blur();return false;\">"+tabnav0_tabtitles[e]+"</a></li>"}document.getElementById(t).innerHTML=d,tabnav0_avaa(tabnav0_tabids[0])}if("undefined"==typeof tabsIDs)var tabsIDs=[];var tabnav0_id="",tabnav0_tabids=[];tabnav0_count&&(document.write('<div id="'+tabsID+'h"></div><ul id="'+tabsID+'"></ul><div id="'+tabsID+'v"></div>'),addLoadEvent(tabnav0_inittabs));
//]]>
</script>
<div style="clear:both;"></div>

Perhatikan kode yang ditandai a.style.marginbottom="-10px" itu fungsinya untuk mengatur jarak antara gadget dan tab, sobat bisa sesuaikan jika mau.

Lalu bagaimana kalau mau membuat tabbed widget sidebar ke-2 dan seterusnya, hanya tinggal mengganti kode tabnav0 dirubah menjadi tabnav1 dan seterusnya dan contohnya seperti kode di bawah ini.

<style scoped="scoped">
#tabnav1,#tabnav1h{margin:0;display:none}
#tabnav1h{position:relative;top:0;height:0;border:0}
#tabnav1v{z-index:0;position:absolute;left:0;top:0;width:0;height:0;display:none}
#tabnav1{z-index:0;position:relative;padding:0;list-style:none;left:0;white-space:nowrap}
#tabnav1 li{float:left;text-align:center;padding:0;width:33.3%;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
#tabnav1 a{padding:12px 6px;display:block;color:#fff;text-decoration:none;font-size:16px;font-weight:500;background:#333;margin:2px 0 0}
#tabnav1 .here a{background-color:#111}
#tabnav1 .here a:active,#tabnav1 .here a:hover,#tabnav1 a:active,#tabnav1 a:hover{background:#666}
</style>
<script type='text/javascript'>
//<![CDATA[
var tabsID="tabnav1",tabnav1_count=3,tabnav1_tabtitles=[],tabnav1_hideH2=!0,tabnav1_hidechildH2=!0;
function tabnav1_avaa(t){for(var a=0;a<tabnav1_tabids.length;a++)document.getElementById(tabnav1_tabids[a]).style.display="none",tabsIDs[tabnav1_tabids[a]]&&(document.getElementById(tabsIDs[tabnav1_tabids[a]]).style.display="none"),document.getElementById("tab_"+tabnav1_tabids[a]).className="";toshow=document.getElementById(tabnav1_id).style.display,document.getElementById(t).style.display=toshow,tabsIDs[t]&&(document.getElementById(tabsIDs[t]).style.display=toshow),document.getElementById("tab_"+t).className="here",tabsIDs[tabnav1_id]=t}function addLoadEvent(t){var a=window.onload;"function"!=typeof window.onload?window.onload=t:window.onload=function(){a(),t()}}function tabnav1_inittabs(){var t="tabnav1",a=document.getElementById(t);a.style.display="block",a=a.parentNode.parentNode,a.style.marginBottom="-40px",tabnav1_id=a.id;for(var n=a.firstChild;n&&1!=n.nodeType;)n=n.nextSibling;n&&"H2"==n.nodeName&&(tabnav1_hideH2||""==n.innerHTML)?n.style.display="none":n&&"H2"==n.nodeName&&(document.getElementById("tabnav1v").style.top="38px");for(var e=0;e<tabnav1_count;e++){for(a=a.nextSibling;a&&1!=a.nodeType;)a=a.nextSibling;if(!a)break;tabnav1_tabids[e]=a.id}document.getElementById(t+"h").style.display="block",document.getElementById(t+"v").style.display="block";for(var d="",e=0;e<tabnav1_tabids.length;e++){for(a=document.getElementById(tabnav1_tabids[e]),a=a.firstChild;a&&1!=a.nodeType;)a=a.nextSibling;if(a&&"H2"!=a.nodeName)for(a=a.firstChild;a&&1!=a.nodeType;)a=a.nextSibling;a&&"H2"==a.nodeName&&(tabnav1_hidechildH2&&(a.style.display="none"),tabnav1_tabtitles[e]&&""!=tabnav1_tabtitles[e]||(tabnav1_tabtitles[e]=a.innerHTML)),tabnav1_tabtitles[e]&&""!=tabnav1_tabtitles[e]||(tabnav1_tabtitles[e]=tabnav1_tabids[e]),a=document.getElementById("tab_"+tabnav1_tabids[e]),d+='<li id="tab_'+tabnav1_tabids[e]+'"><a href="#" onclick="tabnav1_avaa(\''+tabnav1_tabids[e]+"');this.blur();return false;\">"+tabnav1_tabtitles[e]+"</a></li>"}document.getElementById(t).innerHTML=d,tabnav1_avaa(tabnav1_tabids[0])}if("undefined"==typeof tabsIDs)var tabsIDs=[];var tabnav1_id="",tabnav1_tabids=[];tabnav1_count&&(document.write('<div id="'+tabsID+'h"></div><ul id="'+tabsID+'"></ul><div id="'+tabsID+'v"></div>'),addLoadEvent(tabnav1_inittabs));
//]]>
</script>
<div style="clear:both;"></div>

Petunjuk penting lainnya, saya sarankan untuk kode CSS-nya disimpan pada edit HTML blog kemudian untuk membuat judul title jangan terlalu panjang agar muat nantinya pada tabbed widget seperti tampilan gambar diatas. Baiklah sobat semoga bermanfaat dan selamat mencoba.