Tabber เมนูแท็บที่ช่วยลดการใช้พื้นที่ sidebar

index copy


Tabber เป็น เมนูที่ได้รับความนิยมอีกอันหนึ่งเพราะช่วยประหยัด พื้นที่ด้านข้าง โดยเฉพาะผู้ที่ใช้ template แบบ 2 column เพราะถ้าหาก add gadget ไปมากๆ เข้า ก็จะดูรกหูรกตาและกินพื้นที่มาก




บทความนี้จะสอนวิธีติดตั้งเมนูชนิดนี้ซึ่ง มีทั้งสิ้น 3 ขั้นตอนดังนี้


ไปที่แผงควบคุม >> รูปแบบ >> แก้ไข HTML  >> ไม่ต้องขยายแม่แบบเครื่องมือ

ขั้นที่ 1 กำหนดรูปลักษณ์ด้วย CSS โดยค้นหาโค้ด ]]></b:skin> และวางโค้ดต่อไปนี้ไว้ก่อนหน้าโค้ดดังกล่าว


/* Tabber Edit by hackublog.blogspot.com */

@media projection, screen {
    .ui-tabs-hide {
        display: none;
    }
}

@media print {
    .ui-tabs-nav {
        display: none;
    }
}

/* Skin */
.ui-tabs-nav, .ui-tabs-panel {
    font-size: 12px;
}
.ui-tabs-nav {
    list-style: none;
    margin: 0;
    padding: 0 0 0 0;
}
.ui-tabs-nav:after { /* clearing without presentational markup, IE gets extra treatment */
    display: block;
    clear: both;
    content: " ";
}
.ui-tabs-nav li {
    float: left;
    margin: 0 0 0 3px;
    min-width: 60px; /* be nice to Opera */
}
.ui-tabs-nav a, .ui-tabs-nav a span {
    display: block;
    padding: 0 4px;
}
.ui-tabs-nav a {
    margin: 1px 0 0; /* position: relative makes opacity fail for disabled tab in IE */
     padding-left: 0;
    border: 1px solid #949494;
    border-bottom: none;
    font-family: Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    text-decoration: none;
    font-size: 12px;
    font-weight: bold;
    text-align: center;
    white-space: nowrap;
    outline: 0;
    background-color: #EEEEEE;
}
.ui-tabs-nav a {
    border: 1px solid #B4B4B4;
    border-bottom: none;
    position: relative;
    top: 1px;
    z-index: 2;
    margin-top: 0;
    background-color: #EEEEEE;
}

.ui-tabs-selected a {
    border: 1px solid #1e1e1e;
    font-color:#ffffff;
    border-bottom: none;
    position: relative;
    top: 1px;
    z-index: 2;
    margin-top: 0;
    background-color: #777777;
}
.ui-tabs-nav a span {
    width: 80px; /* IE 6 treats width as min-width */
    min-width: 80px;
    height: 24px; /* IE 6 treats height as min-height */
    min-height: 24px;
    padding-top: 6px;
}
*>.ui-tabs-nav a span { /* hide from IE 6 */
    width: auto;
    height: auto;
}
.ui-tabs-nav .ui-tabs-selected a span {
    padding-bottom: 1px;
}
.ui-tabs-nav a:hover, .ui-tabs-nav a:focus, .ui-tabs-nav a:active,
.ui-tabs-nav .ui-tabs-unselect a:hover, .ui-tabs-nav .ui-tabs-unselect a:focus, .ui-tabs-nav .ui-tabs-unselect a:active { /* @ Opera, we need to be explicit again here now... */
    cursor: pointer;
}
/*
.ui-tabs-disabled {
    opacity: .4;
    filter: alpha(opacity=40);
}*/
.ui-tabs-panel {
    border: 1px solid #B4B4B4;
    padding-left: 10px;
    background: #EEEEEE; /* declare background color for container to avoid distorted fonts in IE while fading */
}
div#sidebar div#tab-pop a, div#sidebar div#tab-rec a, div#sidebar div#tab-com a {
    color: #f60;
    font-weight: bold;
}
.ui-tabs-loading em {
    padding: 0 0 0 20px;
    background: url(loading.gif) no-repeat 0 50%;
}

/* Additional IE specific bug fixes... */
* html .ui-tabs-nav { /* auto clear, @ IE 6 & IE 7 Quirks Mode */
    display: inline-block;
}
*:first-child+html .ui-tabs-nav  { /* @ IE 7 Standards Mode - do not group selectors, otherwise IE 6 will ignore complete rule (because of the unknown + combinator)... */
    display: inline-block;
}




ขั้นที่ 2 เป็นการเรียกใช้จาวาสคริปต์

ค้นหาโค้ด </head> และวางโค้ดต่อไปนี้ไว้ก่อนหน้า โค้ดดังกล่าว


<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>
//<![CDATA[

/*
* Tabs 3 - New Wave Tabs
*
* Copyright (c) 2007 Klaus Hartl (stilbuero.de)
* Dual licensed under the MIT (MIT-LICENSE.txt)
* and GPL (GPL-LICENSE.txt) licenses.
*
* http://docs.jquery.com/UI/Tabs
*/
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('(5($){$.7=$.7||{};$.2q.3=5(){6 b=1L 1t[0]==\'20\'&&1t[0];6 c=b&&1R.1P.2f.2c(1t,1)||1t;l b==\'z\'?$.k(2[0],\'3\').$3.z:2.L(5(){4(b){6 a=$.k(2,\'3\');4(a)a[b].2p(a,c)}D 2k $.7.3(2,c[0]||{})})};$.7.3=5(e,f){6 d=2;2.m=$.1u({},$.7.3.28,f);2.q=e;4(f.p===H)2.m.p=H;2.m.12+=\'.3\';$(e).13(\'2U.3\',5(b,c,a){4((/^p/).23(c))d.1n(a);D{d.m[c]=a;d.18()}}).13(\'2E.3\',5(a,b){l d.m[b]});$.k(e,\'3\',2);2.18(1c)};$.7.3.28={p:0,1m:y,12:\'1z\',w:[],S:H,1h:\'2m&#2l;\',J:y,1O:\'7-3-\',1g:{},R:H,1M:\'<F><a x="#{x}"><1f>#{1a}</1f></a></F>\',1v:\'<1J></1J>\',1o:\'7-3-35\',u:\'7-3-p\',1H:\'7-3-1m\',Q:\'7-3-w\',W:\'7-3-1r\',M:\'7-3-T\',Z:\'7-3-2Y\'};$.1u($.7.3.1P,{1B:5(a){l a.24&&a.24.V(/\\s/g,\'21\').V(/[^A-2L-2I-9\\-21:\\.]/g,\'\')||2.m.1O+$.k(a)},7:5(a,b){l{2D:2,m:2.m,2B:a,1r:b}},18:5(f){2.$v=$(\'F:2z(a[x])\',2.q);2.$3=2.$v.1k(5(){l $(\'a\',2)[0]});2.$8=$([]);6 e=2,o=2.m;2.$3.L(5(i,a){4(a.I&&a.I.V(\'#\',\'\'))e.$8=e.$8.14(a.I);D 4($(a).X(\'x\')!=\'#\'){$.k(a,\'x.3\',a.x);$.k(a,\'B.3\',a.x);6 b=e.1B(a);a.x=\'#\'+b;6 c=$(\'#\'+b);4(!c.z){c=$(o.1v).X(\'16\',b).t(o.W).2n(e.$8[i-1]||e.q);c.k(\'15.3\',1c)}e.$8=e.$8.14(c)}D o.w.1Q(i+1)});4(f){$(2.q).G(o.1o)||$(2.q).t(o.1o);2.$8.L(5(){6 a=$(2);a.G(o.W)||a.t(o.W)});2.$3.L(5(i,a){4(1x.I){4(a.I==1x.I){o.p=i;4($.P.11||$.P.2j){6 b=$(1x.I),1N=b.X(\'16\');b.X(\'16\',\'\');1w(5(){b.X(\'16\',1N)},2i)}2h(0,0);l y}}D 4(o.S){6 c=2g($.S(\'7-3\'+$.k(e.q)),10);4(c&&e.$3[c]){o.p=c;l y}}D 4(e.$v.E(i).G(o.u)){o.p=i;l y}});2.$8.t(o.M);2.$v.C(o.u);4(o.p!==H){2.$8.E(o.p).K().C(o.M);2.$v.E(o.p).t(o.u)}6 h=o.p!==H&&$.k(2.$3[o.p],\'B.3\');4(h)2.B(o.p);o.w=$.2e(o.w.2d($.1k(2.$v.U(\'.\'+o.Q),5(n,i){l e.$v.Y(n)}))).1K();$(2b).13(\'2a\',5(){e.$3.1l(\'.3\');e.$v=e.$3=e.$8=H})}29(6 i=0,F;F=2.$v[i];i++)$(F)[$.1I(i,o.w)!=-1&&!$(F).G(o.u)?\'t\':\'C\'](o.Q);4(o.J===y)2.$3.1b(\'J.3\');6 j,O,1e={\'34-33\':0,1G:1},1F=\'32\';4(o.R&&o.R.31==1R)j=o.R[0]||1e,O=o.R[1]||1e;D j=O=o.R||1e;6 g={1s:\'\',30:\'\',2Z:\'\'};4(!$.P.11)g.1E=\'\';5 1D(b,c,a){c.27(j,j.1G||1F,5(){c.t(o.M).1d(g);4($.P.11&&j.1E)c[0].26.U=\'\';4(a)1q(b,a,c)})}5 1q(b,a,c){4(O===1e)a.1d(\'1s\',\'1C\');a.27(O,O.1G||1F,5(){a.C(o.M).1d(g);4($.P.11&&O.1E)a[0].26.U=\'\';$(e.q).N(\'2X\',[e.7(b,a[0])],o.K)})}5 25(c,a,d,b){a.t(o.u).2W().C(o.u);1D(c,d,b)}2.$3.1l(\'.3\').13(o.12,5(){6 b=$(2).2V(\'F:E(0)\'),$T=e.$8.U(\':2T\'),$K=$(2.I);4((b.G(o.u)&&!o.1m)||b.G(o.Q)||$(2).G(o.Z)||$(e.q).N(\'2S\',[e.7(2,$K[0])],o.1n)===y){2.1j();l y}e.m.p=e.$3.Y(2);4(o.1m){4(b.G(o.u)){e.m.p=H;b.C(o.u);e.$8.1A();1D(2,$T);2.1j();l y}D 4(!$T.z){e.$8.1A();6 a=2;e.B(e.$3.Y(2),5(){b.t(o.u).t(o.1H);1q(a,$K)});2.1j();l y}}4(o.S)$.S(\'7-3\'+$.k(e.q),e.m.p,o.S);e.$8.1A();4($K.z){6 a=2;e.B(e.$3.Y(2),$T.z?5(){25(a,b,$T,$K)}:5(){b.t(o.u);1q(a,$K)})}D 2R\'22 2Q 2P: 2O 2M 2K.\';4($.P.11)2.1j();l y});4(!(/^1z/).23(o.12))2.$3.13(\'1z.3\',5(){l y})},14:5(d,e,f){4(f==1Z)f=2.$3.z;6 o=2.m;6 a=$(o.1M.V(/#\\{x\\}/,d).V(/#\\{1a\\}/,e));a.k(\'15.3\',1c);6 b=d.2H(\'#\')==0?d.V(\'#\',\'\'):2.1B($(\'a:2G-2F\',a)[0]);6 c=$(\'#\'+b);4(!c.z){c=$(o.1v).X(\'16\',b).t(o.W).t(o.M);c.k(\'15.3\',1c)}4(f>=2.$v.z){a.1W(2.q);c.1W(2.q.2C)}D{a.1Y(2.$v[f]);c.1Y(2.$8[f])}o.w=$.1k(o.w,5(n,i){l n>=f?++n:n});2.18();4(2.$3.z==1){a.t(o.u);c.C(o.M);6 g=$.k(2.$3[0],\'B.3\');4(g)2.B(f,g)}$(2.q).N(\'2J\',[2.7(2.$3[f],2.$8[f])],o.14)},19:5(a){6 o=2.m,$F=2.$v.E(a).19(),$1r=2.$8.E(a).19();4($F.G(o.u)&&2.$3.z>1)2.1n(a+(a+1<2.$3.z?1:-1));o.w=$.1k($.1V(o.w,5(n,i){l n!=a}),5(n,i){l n>=a?--n:n});2.18();$(2.q).N(\'2A\',[2.7($F.2N(\'a\')[0],$1r[0])],o.19)},1X:5(a){6 o=2.m;4($.1I(a,o.w)==-1)l;6 b=2.$v.E(a).C(o.Q);4($.P.2y){b.1d(\'1s\',\'2x-1C\');1w(5(){b.1d(\'1s\',\'1C\')},0)}o.w=$.1V(o.w,5(n,i){l n!=a});$(2.q).N(\'2w\',[2.7(2.$3[a],2.$8[a])],o.1X)},1U:5(a){6 b=2,o=2.m;4(a!=o.p){2.$v.E(a).t(o.Q);o.w.1Q(a);o.w.1K();$(2.q).N(\'2v\',[2.7(2.$3[a],2.$8[a])],o.1U)}},1n:5(a){4(1L a==\'20\')a=2.$3.Y(2.$3.U(\'[x$=\'+a+\']\')[0]);2.$3.E(a).2u(2.m.12)},B:5(d,b){6 e=2,o=2.m,$a=2.$3.E(d),a=$a[0],1T=b==1Z||b===y,17=$a.k(\'B.3\');b=b||5(){};4(!17||($.k(a,\'J.3\')&&!1T)){b();l}4(o.1h){6 g=$(\'1f\',a);g.k(\'1a.3\',g.1i()).1i(\'<1S>\'+o.1h+\'</1S>\')}6 c=5(){e.$3.U(\'.\'+o.Z).L(5(){$(2).C(o.Z);4(o.1h){6 a=$(\'1f\',2);a.1i(a.k(\'1a.3\')).1b(\'1a.3\')}});e.1p=H};6 f=$.1u({},o.1g,{17:17,1y:5(r,s){$(a.I).1i(r);c();b();4(o.J)$.k(a,\'J.3\',1c);$(e.q).N(\'2t\',[e.7(e.$3[d],e.$8[d])],o.B);o.1g.1y&&o.1g.1y(r,s)}});4(2.1p){2.1p.2s();c()}$a.t(o.Z);1w(5(){e.1p=$.2r(f)},0)},17:5(a,b){2.$3.E(a).1b(\'J.3\').k(\'B.3\',b)},15:5(){6 o=2.m;$(2.q).1l(\'.3\').C(o.1o).1b(\'3\');2.$3.L(5(){6 b=$.k(2,\'x.3\');4(b)2.x=b;6 c=$(2).1l(\'.3\');$.L([\'x\',\'B\',\'J\'],5(i,a){c.1b(a+\'.3\')})});2.$v.14(2.$8).L(5(){4($.k(2,\'15.3\'))$(2).19();D $(2).C([o.u,o.1H,o.Q,o.W,o.M].2o(\' \'))})}})})(22);',62,192,'||this|tabs|if|function|var|ui|panels||||||||||||data|return|options|||selected|element|||addClass|selectedClass|lis|disabled|href|false|length||load|removeClass|else|eq|li|hasClass|null|hash|cache|show|each|hideClass|triggerHandler|showFx|browser|disabledClass|fx|cookie|hide|filter|replace|panelClass|attr|index|loadingClass||msie|event|bind|add|destroy|id|url|tabify|remove|label|removeData|true|css|baseFx|span|ajaxOptions|spinner|html|blur|map|unbind|unselect|select|navClass|xhr|showTab|panel|display|arguments|extend|panelTemplate|setTimeout|location|success|click|stop|tabId|block|hideTab|opacity|baseDuration|duration|unselectClass|inArray|div|sort|typeof|tabTemplate|toShowId|idPrefix|prototype|push|Array|em|bypassCache|disable|grep|appendTo|enable|insertBefore|undefined|string|_|jQuery|test|title|switchTab|style|animate|defaults|for|unload|window|call|concat|unique|slice|parseInt|scrollTo|500|opera|new|8230|Loading|insertAfter|join|apply|fn|ajax|abort|tabsload|trigger|tabsdisable|tabsenable|inline|safari|has|tabsremove|tab|parentNode|instance|getData|child|first|indexOf|z0|tabsadd|identifier|Za|fragment|find|Mismatching|Tabs|UI|throw|tabsselect|visible|setData|parents|siblings|tabsshow|loading|height|overflow|constructor|normal|width|min|nav'.split('|'),0,{}))
//]]>
</script>

<script type='text/javascript'>
$(function() {
    $(&quot;div#navmenu-wrapper &gt; ul &gt; li:first&quot;).css(&#39;margin-left&#39;, &#39;17px&#39;);
    $(&#39;#box-tabs &gt; ul&#39;).tabs();
    $(&quot;input#s&quot;).focus(function() {
        $(this).val(&#39;&#39;);
    });
    $(&quot;input#s&quot;).blur(function() {
        $(this).val(&#39;search&#39;);
    });
    $(&#39;div#tab-blogroll &gt; ul &gt; li:last&#39;).css(&#39;border-bottom&#39;,&#39;none&#39;);
    $(&#39;div#tab-categories &gt; ul &gt; li:last&#39;).css(&#39;border-bottom&#39;,&#39;none&#39;);
    $(&#39;div#tab-archives &gt; ul &gt; li:last&#39;).css(&#39;border-bottom&#39;,&#39;none&#39;);
});
</script>



ขั้นที่ 3 เป็นการกำหนดตำแหน่งและเรียกใช้ด้วย  HTML โดย


ค้นหาโค้ด

<div id='sidebar-wrapper'>

แล้วเลือกโค้ดใดโค้ดหนึ่งต่อไปนี้วางถัดจากโค้ดดังกล่าว

แบบที่ 1


<div class='box-tabs' id='box-tabs'>

        <ul>
            <li><a href='#tab-blogroll'><span>Comment</span></a></li>
            <li><a href='#tab-categories'><span>สมาชิก</span></a></li>
            <li><a href='#tab-archives'><span>แก้ตามใจชอบ</span></a></li>
        </ul>
        <b:section class='tab-blogroll' id='tab-blogroll' showaddelement='yes'>
<b:widget id='Feed111' locked='false' title='Recent Comments' type='Feed'/>
</b:section>
        <b:section class='tab-categories' id='tab-categories' showaddelement='yes'>
<b:widget id='Followers111' locked='false' title='' type='Followers'/>
</b:section>       
                <b:section class='tab-archives' id='tab-archives' showaddelement='yes'>
<b:widget id='HTML111' locked='false' title='' type='HTML'/>
</b:section>
</div>


แบบที่ 2


<div class='box-tabs' id='box-tabs'>
        <ul>
            <li><a href='#tab-blogroll'><span>แก้ตามใจ</span></a></li>
            <li><a href='#tab-categories'><span>สมาชิก</span></a></li>
            <li><a href='#tab-archives'><span>บทความทั้งหมด</span></a></li>
        </ul>
        <b:section class='tab-blogroll' id='tab-blogroll' showaddelement='yes'>
<b:widget id='HTML111' locked='false' title='' type='HTML'/>
</b:section>
        <b:section class='tab-categories' id='tab-categories' showaddelement='yes'>
<b:widget id='Followers111' locked='false' title='ผู้ติดตาม' type='Followers'/>
</b:section>       
                <b:section class='tab-archives' id='tab-archives' showaddelement='yes'>
<b:widget id='BlogArchive111' locked='false' title='คลังบทความของบล็อก' type='BlogArchive'/>
</b:section>
</div>


แบบที่ 3


<div class='box-tabs' id='box-tabs'>
        <ul>
            <li><a href='#tab-blogroll'><span>บทความล่าสุด</span></a></li>
            <li><a href='#tab-categories'><span>ป้ายกำกับ</span></a></li>
            <li><a href='#tab-archives'><span>บทความทั้งหมด</span></a></li>
        </ul>
        <b:section class='tab-blogroll' id='tab-blogroll' showaddelement='yes'>
<b:widget id='Feed111' locked='false' title='บทความล่าสุด' type='Feed'/>
</b:section>
        <b:section class='tab-categories' id='tab-categories' showaddelement='yes'>
<b:widget id='Label111' locked='false' title='ป้ายกำกับ' type='Label'/>
</b:section>       
                <b:section class='tab-archives' id='tab-archives' showaddelement='yes'>
<b:widget id='BlogArchive111' locked='false' title='คลังบทความของบล็อก' type='BlogArchive'/>
</b:section>
</div>


จากนั้นก็บันทึกแม่แบบ แล้วไปที่ “องค์ประกอบของหน้า” เลือกเพิ่ม gadget ใส่ใน Tabber ได้ตามใจครับ (ในที่นี้ผมติดตั้งบางอย่างไว้ให้แล้ว ถ้าไม่ชอบก็สามารถลบทิ้ง และ add เข้าไปใหม่ได้ครับได้ครับ)

Tabber


ตอนนี้มีความคิดเห็น : 5 ความคิดเห็น
หากคุณมีปัญหาหรือข้อสงสัยใดๆ สามารถสอบถามได้จากกล่อง comment ด้านล่างนี้ได้เลยครับ

  1. ไม่มีโค๊ดนี้ <div id='sidebar-wrapper'> น่ะค่ะ ต้องใส่ขั้นตอนที่ 3 ตรงไหนเหรอคะ

    http://series-entertain.blogspot.com/

  1. @ MingFC: หาโค้ดนี้แทนครับ

    <div class='column-right-inner'>
    <aside>

  1. ทำได้แล้วค่ะ ขอบคุณ คุณ Hackublog มากๆเลยนะคะ

  1. <div id='sidebar-wrapper'>
    <div class='column-right-inner'>

    ทั้งคู่ไม่มีอะคับหาแล้ว

    http://bannacai.blogspot.com/

  1. ของผมมีแต่ <div id='lsidebar-wrapper'> กับ <div id='rsidebar-wrapper'>

แสดงความคิดเห็น

ถ้าต้องการโพส HTML ให้แปลงโค้ดที่เครื่องมือด้านล่างนี้ก่อนครับ

สร้างบล็อก Facebook SEO บล็อก Linkwheel iMacros Link Wheel