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 hingga 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 bersama-sama para Web design memodift tampilan widget tabbed, ada yang manual dengan cara menempatkan pribadi di sidebar biasanya menggunakan Jquery dan Javascript, nah untuk cara yang saya bahas ini yaitu menggunakan Javascript.

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

HTML/Javascript

Silahkan sahabat salin dan letakkan isyarat 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 isyarat yang ditandai a.style.marginbottom="-10px" itu fungsinya untuk mengatur jarak antara gadget dan tab, sahabat mampu sesuaikan jikalau mau.

Lalu bagaimana kalau mau membuat tabbed widget sidebar ke-2 dan seterusnya, hanya tinggal mengganti isyarat tabnav0 dirubah menjadi tabnav1 dan seterusnya dan contohnya menyerupai isyarat 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 isyarat CSS-nya disimpan pada edit HTML blog kemudian untuk membuat judul title jangan terlalu panjang semoga muat nantinya pada tabbed widget menyerupai tampilan gambar diatas. Baiklah sahabat semoga bermanfaat dan selamat mencoba.