Membuat Tabbed Panel

Share or Like on :

Baiklah kali ini saya akan share cara membuat tabbed panel yang akan mempercantik tampilan blog sobat. Sudah pada tahu semua kan apa itu tabbed panel? Yaitu widget yang ada di sidebar blog ini, lihat gambar. Dalam tabbed panel itu saya isi dengan Posting acak, posting populer, dan komentar terakhir.

Sobat juga bisa mengisi nya dengan isi yang sama dengan saya di atas, atau sobat juga bisa menambahkan sendiri isi yang ingin sobat tambahkan. Langsung saja ini dia caranya untuk membuat tabbed panel :

1. Buka akun blogger sobat, pergi ke Tata Letak (tampilan blogger baru).
2. Tambahkan Gadget HTML/ Javascript.
3. Copy paste script di bawah ini ke dalam isi widget tersebut.

   <!-- TabbedPanelsStart -->
   <script type="text/javascript">
   var Spry;
   if (!Spry) Spry = {};
   if (!Spry.Widget) Spry.Widget = {};
   Spry.Widget.TabbedPanels = function(element, opts)
   {
   this.element = this.getElement(element);
   this.defaultTab = 0;
   this.bindings = [];
   this.tabSelectedClass = "TabbedPanelsTabSelected";
   this.tabHoverClass = "TabbedPanelsTabHover";
   this.tabFocusedClass = "TabbedPanelsTabFocused";
   this.panelVisibleClass = "TabbedPanelsContentVisible";
   this.focusElement = null;
   this.hasFocus = false;
   this.currentTabIndex = 0;
   this.enableKeyboardNavigation = true;
   Spry.Widget.TabbedPanels.setOptions(this, opts);
   if (typeof (this.defaultTab) == "number")
   {
   if (this.defaultTab < 0)
   this.defaultTab = 0;
   else
   {
   var count = this.getTabbedPanelCount();
   if (this.defaultTab >= count)
   this.defaultTab = (count > 1) ? (count - 1) : 0;
   }
   this.defaultTab = this.getTabs()[this.defaultTab];
   }
   if (this.defaultTab)
   this.defaultTab = this.getElement(this.defaultTab);
   this.attachBehaviors();
   };
   Spry.Widget.TabbedPanels.prototype.getElement = function(ele)
   {
   if (ele && typeof ele == "string")
   return document.getElementById(ele);
   return ele;
   }
   Spry.Widget.TabbedPanels.prototype.getElementChildren = function(element)
   {
   var children = [];
   var child = element.firstChild;
   while (child)
   {
   if (child.nodeType == 1)
   children.push(child);
   child = child.nextSibling;
   }
   return children;
   };
   Spry.Widget.TabbedPanels.prototype.addClassName = function(ele, className)
   {
   if (!ele || !className || (ele.className && ele.className.search(new RegExp("\\b" + className + "\\b")) != -1))
   return;
   ele.className += (ele.className ? " " : "") + className;
   };
   Spry.Widget.TabbedPanels.prototype.removeClassName = function(ele, className)
   {
   if (!ele || !className || (ele.className && ele.className.search(new RegExp("\\b" + className + "\\b")) == -1))
   return;
   ele.className = ele.className.replace(new RegExp("\\s*\\b" + className + "\\b", "g"), "");
   };
   Spry.Widget.TabbedPanels.setOptions = function(obj, optionsObj, ignoreUndefinedProps)
   {
   if (!optionsObj)
   return;
   for (var optionName in optionsObj)
   {
   if (ignoreUndefinedProps && optionsObj[optionName] == undefined)
   continue;
   obj[optionName] = optionsObj[optionName];
   }
   };
   Spry.Widget.TabbedPanels.prototype.getTabGroup = function()
   {
   if (this.element)
   {
   var children = this.getElementChildren(this.element);
   if (children.length)
   return children[0];
   }
   return null;
   };
   Spry.Widget.TabbedPanels.prototype.getTabs = function()
   {
   var tabs = [];
   var tg = this.getTabGroup();
   if (tg)
   tabs = this.getElementChildren(tg);
   return tabs;
   };
   Spry.Widget.TabbedPanels.prototype.getContentPanelGroup = function()
   {
   if (this.element)
   {
   var children = this.getElementChildren(this.element);
   if (children.length > 1)
   return children[1];
   }
   return null;
   };
   Spry.Widget.TabbedPanels.prototype.getContentPanels = function()
   {
   var panels = [];
   var pg = this.getContentPanelGroup();
   if (pg)
   panels = this.getElementChildren(pg);
   return panels;
   };
   Spry.Widget.TabbedPanels.prototype.getIndex = function(ele, arr)
   {
   ele = this.getElement(ele);
   if (ele && arr && arr.length)
   {
   for (var i = 0; i < arr.length; i++)
   {
   if (ele == arr[i])
   return i;
   }
   }
   return -1;
   };
   Spry.Widget.TabbedPanels.prototype.getTabIndex = function(ele)
   {
   var i = this.getIndex(ele, this.getTabs());
   if (i < 0)
   i = this.getIndex(ele, this.getContentPanels());
   return i;
   };
   Spry.Widget.TabbedPanels.prototype.getCurrentTabIndex = function()
   {
   return this.currentTabIndex;
   };
   Spry.Widget.TabbedPanels.prototype.getTabbedPanelCount = function(ele)
   {
   return Math.min(this.getTabs().length, this.getContentPanels().length);
   };
   Spry.Widget.TabbedPanels.addEventListener = function(element, eventType, handler, capture)
   {
   try
   {
   if (element.addEventListener)
   element.addEventListener(eventType, handler, capture);
   else if (element.attachEvent)
   element.attachEvent("on" + eventType, handler);
   }
   catch (e) {}
   };
   Spry.Widget.TabbedPanels.prototype.onTabClick = function(e, tab)
   {
   this.showPanel(tab);
   };
   Spry.Widget.TabbedPanels.prototype.onTabMouseOver = function(e, tab)
   {
   this.addClassName(tab, this.tabHoverClass);
   };
   Spry.Widget.TabbedPanels.prototype.onTabMouseOut = function(e, tab)
   {
   this.removeClassName(tab, this.tabHoverClass);
   };
   Spry.Widget.TabbedPanels.prototype.onTabFocus = function(e, tab)
   {
   this.hasFocus = true;
   this.addClassName(this.element, this.tabFocusedClass);
   };
   Spry.Widget.TabbedPanels.prototype.onTabBlur = function(e, tab)
   {
   this.hasFocus = false;
   this.removeClassName(this.element, this.tabFocusedClass);
   };
   Spry.Widget.TabbedPanels.ENTER_KEY = 13;
   Spry.Widget.TabbedPanels.SPACE_KEY = 32;
   Spry.Widget.TabbedPanels.prototype.onTabKeyDown = function(e, tab)
   {
   var key = e.keyCode;
   if (!this.hasFocus || (key != Spry.Widget.TabbedPanels.ENTER_KEY && key != Spry.Widget.TabbedPanels.SPACE_KEY))
   return true;
   this.showPanel(tab);
   if (e.stopPropagation)
   e.stopPropagation();
   if (e.preventDefault)
   e.preventDefault();
   return false;
   };
   Spry.Widget.TabbedPanels.prototype.preorderTraversal = function(root, func)
   {
   var stopTraversal = false;
   if (root)
   {
   stopTraversal = func(root);
   if (root.hasChildNodes())
   {
   var child = root.firstChild;
   while (!stopTraversal && child)
   {
   stopTraversal = this.preorderTraversal(child, func);
   try { child = child.nextSibling; } catch (e) { child = null; }
   }
   }
   }
   return stopTraversal;
   };
   Spry.Widget.TabbedPanels.prototype.addPanelEventListeners = function(tab, panel)
   {
   var self = this;
   Spry.Widget.TabbedPanels.addEventListener(tab, "click", function(e) { return self.onTabClick(e, tab); }, false);
   Spry.Widget.TabbedPanels.addEventListener(tab, "mouseover", function(e) { return self.onTabMouseOver(e, tab); }, false);
   Spry.Widget.TabbedPanels.addEventListener(tab, "mouseout", function(e) { return self.onTabMouseOut(e, tab); }, false);
   if (this.enableKeyboardNavigation)
   {
   var tabIndexEle = null;
   var tabAnchorEle = null;
   this.preorderTraversal(tab, function(node) {
   if (node.nodeType == 1 /* NODE.ELEMENT_NODE */)
   {
   var tabIndexAttr = tab.attributes.getNamedItem("tabindex");
   if (tabIndexAttr)
   {
   tabIndexEle = node;
   return true;
   }
   if (!tabAnchorEle && node.nodeName.toLowerCase() == "a")
   tabAnchorEle = node;
   }
   return false;
   });
   if (tabIndexEle)
   this.focusElement = tabIndexEle;
   else if (tabAnchorEle)
   this.focusElement = tabAnchorEle;
   if (this.focusElement)
   {
   Spry.Widget.TabbedPanels.addEventListener(this.focusElement, "focus", function(e) { return self.onTabFocus(e, tab); }, false);
   Spry.Widget.TabbedPanels.addEventListener(this.focusElement, "blur", function(e) { return self.onTabBlur(e, tab); }, false);
   Spry.Widget.TabbedPanels.addEventListener(this.focusElement, "keydown", function(e) { return self.onTabKeyDown(e, tab); }, false);
   }
   }
   };
   Spry.Widget.TabbedPanels.prototype.showPanel = function(elementOrIndex)
   {
   var tpIndex = -1;
   if (typeof elementOrIndex == "number")
   tpIndex = elementOrIndex;
   else
   tpIndex = this.getTabIndex(elementOrIndex);
   if (!tpIndex < 0 || tpIndex >= this.getTabbedPanelCount())
   return;
   var tabs = this.getTabs();
   var panels = this.getContentPanels();
   var numTabbedPanels = Math.max(tabs.length, panels.length);
   for (var i = 0; i < numTabbedPanels; i++)
   {
   if (i != tpIndex)
   {
   if (tabs[i])
   this.removeClassName(tabs[i], this.tabSelectedClass);
   if (panels[i])
   {
   this.removeClassName(panels[i], this.panelVisibleClass);
   panels[i].style.display = "none";
   }
   }
   }
   this.addClassName(tabs[tpIndex], this.tabSelectedClass);
   this.addClassName(panels[tpIndex], this.panelVisibleClass);
   panels[tpIndex].style.display = "block";
   this.currentTabIndex = tpIndex;
   };
   Spry.Widget.TabbedPanels.prototype.attachBehaviors = function(element)
   {
   var tabs = this.getTabs();
   var panels = this.getContentPanels();
   var panelCount = this.getTabbedPanelCount();
   for (var i = 0; i < panelCount; i++)
   this.addPanelEventListeners(tabs[i], panels[i]);
   this.showPanel(this.defaultTab);
   };
   </script>
   <style type="text/css" media="screen">
   <!--
   .TabbedPanels{margin:0; padding:0; float:left; clear:none; width:100%;}
   .TabbedPanelsTabGroup{margin:0; padding:0;}
   .TabbedPanelsTab{
   position:relative;
   font-weight:bold;
   top:1px;
   float:left;
   padding:7px 10px;
   margin:0px 1px 0px 0px;
   font:bold 0.7em sans-serif;
   background-color:#DDD;
   list-style:none;
   border-left:solid 1px #CCC;
   border-bottom:solid 1px #999;
   border-top:solid 1px #999;
   border-right:solid 1px #999;
   -moz-user-select:none;
   -khtml-user-select:none;
   cursor:pointer;
   -moz-border-radius-topleft:10px;
   border-radius-topleft:10px;
   -moz-border-radius-topright:10px;
   border-radius-topright:10px;}
   .TabbedPanelsTabHover{
   background-color:#CCC;}
   .TabbedPanelsTabSelected{
   background-color:#fff;
   border-bottom:1px solid #fff;}
   .TabbedPanelsTab a{
   color:black;
   text-decoration:none;}
   .TabbedPanelsContentGroup{
   clear:both;
   border-left:solid 1px #CCC;
   border-bottom:solid 1px #CCC;
   border-top:solid 1px #999;
   border-right:solid 1px #999;
   background-color:#fff;
   padding-left:5px;
   width:330px;
   -moz-border-radius-bottomleft:5px;
   border-radius-bottomleft:5px;
   -moz-border-radius-topright:5px;
   border-radius-topright:5px;
   -moz-border-radius-bottomright:5px;
   border-radius-bottomright:5px;}
   .TabbedPanelsContent{
   padding:4px;}
   .TabbedPanelsContentVisible{
   }
   .VTabbedPanels .TabbedPanelsTabGroup{
   float:left;
   width:10em;
   height:20em;
   background-color:#EEE;
   position:relative;
   border-top:solid 1px #999;
   border-right:solid 1px #999;
   border-left:solid 1px #CCC;
   border-bottom:solid 1px #CCC;}
   .VTabbedPanels .TabbedPanelsTab{
   float:none;
   margin:0px;
   border-top:none;
   border-left:none;
   border-right:none;}
   .VTabbedPanels .TabbedPanelsTabSelected{
   background-color:#EEE;
   border-bottom:solid 1px #999;}
   .VTabbedPanels .TabbedPanelsContentGroup{
   clear:none;
   float:left;
   padding:0px;
   width:30em;
   height:20em;}
   -->
   </style>
   <div id="TabbedPanels1" class="TabbedPanels">
   <div class="TabbedPanelsTabGroup">
   <div class="TabbedPanelsTab" tabindex="0"><h3>JUDUL TAB 1</h3></div>
   <div class="TabbedPanelsTab" tabindex="0"><h3>JUDUL TAB 2</h3></div>
   <div class="TabbedPanelsTab"><h3>JUDUL TAB 3</h3></div>
   </div>
   <div class="TabbedPanelsContentGroup">
   <div class="TabbedPanelsContent">
   ISI TAB 1
   </div>
   <div class="TabbedPanelsContent">
   ISI TAB 2
   </div>
   <div class="TabbedPanelsContent">
   ISI TAB 3
   </div>
   </div>
   </div>
   <script type="text/javascript">
   <!--
   var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
   //-->
   </script>
   <!-- TabbedPanelsEnd -->

4. Kalau sudah simpan widget tersebut.

Keterangan :

JUDUL TAB silakan diisi dengan judul tiap tab, misal Latest Post, Popular Post atau Comment.

ISI TAB silakan diisi dengan isi tiap tabbed panel tersebut.

Selesai sudah pembuatan widget Tabbed Panel, jika ada yang kurang jelas silakan ditanyakan lewat komentar.

Diposting oleh Wawan Siswanto di Kamis, Juli 05, 2012