Gank Zone Blog? Join Now!
RSS Feed Facebook Twitter

Membuat Tabbed Panel

Share or Like on :


Membuat Tabbed Panel

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.




35 komentar

Kamis, 05 Juli, 2012

wow..
banyak banget ?
apakah akan memberatkan blog ?

Terimakasih Darmawan Saputra atas Komentarnya di Membuat Tabbed Panel

wah panjang amat sob ,,,

Terimakasih Widget Simple Tab View untuk Blogspot atas Komentarnya di Membuat Tabbed Panel
Jumat, 06 Juli, 2012

waduh.... Ane blogger hape gan, susah ngopi scriptnya

Terimakasih pranamoelya atas Komentarnya di Membuat Tabbed Panel
Jumat, 06 Juli, 2012

@Darmawan Saputra tidak terlalu memberatkan sob, coba aja,..

Jumat, 06 Juli, 2012

@Widget Simple Tab View untuk Blogspot iya itu karena saya gak pake external javascript, javascript langsung saya masukkin ke widget tersebut

Jumat, 06 Juli, 2012

@pranamoelya pake aja opera mini mod 4.2 yang bisa apa aja.

Jumat, 06 Juli, 2012

wihh, keren gan..
izin pake ya gan..

Terimakasih Blog Dofollow Indonesia atas Komentarnya di Membuat Tabbed Panel
Jumat, 06 Juli, 2012

waduh tipnya bagus... tapi kok ruwet nih... saya ga mampu deh kali ini.... pasrah bukan programmer sih... :)

Terimakasih applausr atas Komentarnya di Membuat Tabbed Panel
Jumat, 06 Juli, 2012

mantap sob, baru tau saya ini namanya tab panel, hehe.. Coba dulu ah..thanks

Terimakasih Deni atas Komentarnya di Membuat Tabbed Panel
Sabtu, 07 Juli, 2012

@Blog Dofollow Indonesia silakan dipake aja sob

Sabtu, 07 Juli, 2012

@applausr iya sob memang membuat sebuah program itu memang susah,..

Sabtu, 07 Juli, 2012

@Deni iya ini silakan dicoba sob,..

Sabtu, 07 Juli, 2012

mantap sob..

Terimakasih Ali Maghfur atas Komentarnya di Membuat Tabbed Panel
Selasa, 10 Juli, 2012

Mantab artikelnya mas! :)

Terimakasih Admin Boladia atas Komentarnya di Membuat Tabbed Panel
Rabu, 11 Juli, 2012

bang cara buat kotak komentar seperti di blog ini gimana

Terimakasih Saham Gratis atas Komentarnya di Membuat Tabbed Panel
Selasa, 17 Juli, 2012

saya sih udah ada nih tutornya cuman gk make.. :D takut berat.. hahaha

Terimakasih UnlimitSoft atas Komentarnya di Membuat Tabbed Panel
Kamis, 19 Juli, 2012

mas saya belum donk di bagian ISI TABnya,, di bagian itu dikasih url pa dikasih apa? mohon pencerahanya ya mas.

Terimakasih teknologikomputer9 atas Komentarnya di Membuat Tabbed Panel
Senin, 23 Juli, 2012

@Saham Gratis nanti belum saya posting sob

Senin, 23 Juli, 2012

@teknologikomputer9 bisa dikasih popular post sob, atau komentar terakhir sob di isinya,..

Senin, 06 Agustus, 2012

Hehehe pada ngeri liat kodenya yang panjang ya. Mungkin emang lebih baik lib javasrciptnya jadiin eksternal file untuk didownload aja. Jadi implementasinya aja yang tampilkan dihalaman ini.

Terimakasih My Hut atas Komentarnya di Membuat Tabbed Panel
Rabu, 08 Agustus, 2012

Saya sudah coba, cuman kurang berhasil gan. Mohon petunjuk ya, ISI TAB itu diisi judul artikel apa URL nya? trim gan

Terimakasih Kampoeng Ikan Gondosuli atas Komentarnya di Membuat Tabbed Panel
Minggu, 19 Agustus, 2012

Msh kurng ngerti sih sob,Isi tab itu mksudnya apa?judul postingan kita??

Terimakasih wijaya rizky atas Komentarnya di Membuat Tabbed Panel
Sabtu, 25 Agustus, 2012

@wijaya rizky isi tab itu maksudnya konten yang akan ditampilkan pada tabbed panel tersebut, sobat bisa mengisinya dengan posting popular, posting terakhir, maupun komentar terakhir, cari aja di blog ini cara membuatnya

Sabtu, 25 Agustus, 2012

@DAUS ARRAFI isi tab itu maksudnya konten yang akan ditampilkan pada tabbed panel tersebut, sobat bisa mengisinya dengan posting popular, posting terakhir, maupun komentar terakhir, cari aja di blog ini cara membuatnya

Sabtu, 25 Agustus, 2012

@My Hut iya sob seperti itu juga bisa, namun untuk menghindari terjadinya kesalahan server javascript maka saya tempatkan selokasi sob,

Sabtu, 25 Agustus, 2012

@Kampoeng Ikan Gondosuli isi tab itu maksudnya konten yang akan ditampilkan pada tabbed panel tersebut, sobat bisa mengisinya dengan posting popular, posting terakhir, maupun komentar terakhir, cari aja di blog ini cara membuatnya

Sabtu, 15 September, 2012

untuk widget ini sangat aku butuhkan, izin copas gan. thanks

dan mohon konfirmasi di blog saya http://fajaralif.blogspot.com

Terimakasih Alif Fajar atas Komentarnya di Membuat Tabbed Panel
Jumat, 28 September, 2012

thanx infonya...:)

Terimakasih interior consultant atas Komentarnya di Membuat Tabbed Panel
Kamis, 04 Oktober, 2012

thanks infonya gan

Terimakasih yumant atas Komentarnya di Membuat Tabbed Panel
Rabu, 14 November, 2012

thanks infonya

Terimakasih rachmad tatawarna atas Komentarnya di Membuat Tabbed Panel
Selasa, 08 Januari, 2013

izin pakai gan..

Terimakasih Arise Rajagukguk atas Komentarnya di Membuat Tabbed Panel
Rabu, 09 Januari, 2013

silakan di pakai

Minggu, 28 September, 2014

Konten Adalah Raja Dan Backlink Adalah Ratunya... Kunjungi Artikel SEO Termurah Dengan Niche Terlengkap...

Terimakasih Ok Artikel atas Komentarnya di Membuat Tabbed Panel
Senin, 01 Desember, 2014

Sipzz gan, ijin copast.
Terus kalo mau bikin tab nya lebih dr 3 gimana ya caranya?.
Misal mau bikin 6/7 tab?.
Mkasii.

Terimakasih Fandelur Wijaya atas Komentarnya di Membuat Tabbed Panel
Selasa, 17 Februari, 2015

Perkenalkan Kami salah satu Penerbit Berita Info Menarik , dan info ini sengaja kami terbitkan Khusus bagi yang Pecinta togel / toggeller., dan disini Kami Telah menemukan AKI JAGAD yang Benar Benar bisa Meramal Nomor yang akan Tembus . Beliau Tidak Punya Blog / Web, Hanya saya Sebagai Pelanggang AKI JAGAD yang pernah melihat bukti nyata ( MITOS ) Sehingga saya memperkenalkan dia di Dunia maya, Jujur saya Merasa Berat Hati Kepada AKI JAGAD, Mungkin Dengan Jalan Seperti inilah saya Membalas Budi kepada AKI JAGAD, Memperkenalkan AKI JAGAD Ke DUNIA MAYA, Karena siapa tahu ada yang Butuh Bantuan dari AKI JAGAD. Nomor TLP: 085398722048. . Beliau Pernah Berpesan Kepada saya ” Tolong disampaikan kepada semua Para Pelanggang saya Atas Kesuksesannya , Hanya satu Pintaku jangan Lupa Berbagi Kepada Orang Miskin atau Kepada Masjid atau gereja yang sangat Memerulkan bantuan . Dan AKI JAGAD . Juga mengucapkan Selamat & Sukses kepada Bapak/Ibu , yang telah berhasil tembus / jp/ jebol / menang Angka Jitu SGP pemberian dari AKI JAGAD . Semoga Hasil kemenangan anda yang diterima bisa untuk menyelesaikan semua urusan & dapat dimanfaatkan untuk hal yang berguna untuk masa depan,AKI JAGAD hanya coba membantu sesuai dengan kemampuan yang AKI JAGAD miliki, selebihnya hanya kekuasaan tuhan yg membagikan rizki nya kepada bapak/ibu sekalian. diberitahukan juga kepada para togeller diseluruh dunia hususnya di indonesia, bahwa AKI JAGAD masih menerima pendaftaran member sampai batas waktu Yg Telah di Tentukan..atau klik di sini

Terimakasih Bocoran Togel atas Komentarnya di Membuat Tabbed Panel

Posting Komentar

Silahkan berkomentar pada blog ini dengan baik dan sopan. Jadilah Top Komentator Untuk Mendapatkan Backlink Gratis!!!

 
© Copyright 2012 - Gank-Zone Blog. Powered by Blogger.com and Gank-Zone
Gank Zone Blog