Napravite Multi-tabbed Widget za Blogger

Korisna stvar pogotovo ako imate puno toga a zna se da je mesto ovoj "spravici" u sajdbaru tako da vam štedi neprocenjivo mesto. Ako dobro baratate Java ili Html programima, onda možete vrlo lako i lepo da uradite "Custom" varijante. Mada ću vam pokazati sad kako da uradite neke proste.

Live Demo

1. Nadjite  </head> uvek koristite CTRL + F za lakše pronalaženje

2. Sledeći kod dodajte odmah iznad:

<script type='text/javascript'> //<![CDATA[ function tabtampil_oom(TPID, id) { var Tabtampil = document.getElementById(TPID); var TTs = Tabtampil.firstChild; while (TTs.className != "TTs" ) TTs = TTs.nextSibling; var TT = TTs.firstChild; var i = 0; do { if (TT.tagName == "A") { i++; TT.href = "javascript:tabtampil_ubah('"+TPID+"', "+i+");"; TT.className = (i == id) ? "Active" : ""; TT.blur(); } } while (TT = TT.nextSibling); var Halamans = Tabtampil.firstChild; while (Halamans.className != 'Halamans') Halamans = Halamans.nextSibling; var Halaman = Halamans.firstChild; var i = 0; do { if (Halaman.className == 'Halaman') { i++; if (Halamans.offsetHeight) Halaman.style.height = (Halamans.offsetHeight-2)+"px"; Halaman.style.overflow = "auto"; Halaman.style.display = (i == id) ? 'block' : 'none'; } } while (Halaman = Halaman.nextSibling); } function tabtampil_ubah(TPID, id) { tabtampil_oom(TPID, id); } function tabtampil_inisial(TPID) { tabtampil_oom(TPID, 1); document.write('');} //]]> </script>

3. Sada idite u "Layout" i dodajte Gadget HTML/JavaScript i tu stavite ovaj kod:

<style type="text/css">
    div.TabTampil div.TTs
    {height: 24px; overflow: hidden; }
    div.TabTampil div.TTs a:hover, div.TabTampil div.TTs a.Active
    { background-color: #c33cbc; }
    div.TabTampil div.Halamans
    { clear: both; border: 1px solid #c3c1c1; overflow: hidden; background-color: #ffffff;}
    div.TabTampil div.Halamans div.Halaman
    { height: 100%; padding: 0px; overflow: hidden; }
    div.TabTampil div.Halamans div.Halaman div.Alas
    { padding: 3px 5px; }
    div.TabTampil div.TTs a
    { border-left:1px solid #c3c1c1; border-right:1px solid #c3c1c1; border-top:1px solid #c3c1c1; border-bottom:0px solid #c3c1c1; float: left;
    display: block; width: 95px; text-align: center; vertical-align: middle; height: 24px; padding-top: 3px; text-decoration: none; font-family: "Arial", Serif;
    font-size: 13px; font-weight: 930; color: #000000}
    </style>
    <form action="tabtampil.html" method="get">
    <div id="TabTampil" class="TabTampil">
    <div style="width: 300px;" class="TTs"> <a>Tab  title</a> <a>Tab title</a> <a>Tab title</a></div>
    <div style="width: 300px; height: 300px;" class="Halamans">
    <div class="Halaman">
    <div class="Alas">
    <br/>


    Enter your tab code here


    </div>
    </div>
    <div class="Halaman">
    <div class="Alas">
    <br/>


    Enter your tab code here


    </div>
    </div>
    <div class="Halaman">
    <div class="Alas">
    <br/>


    Enter your tab code here


    </div>
    </div>
    </div>
    </div>
    </form>

    <script type="text/javascript">tabtampil_inisial('TabTampil');</script>

Sada uradite "Custom" varijantu

1. Promenite boju "Tab"  #c33cbc u bilo koju, imate color generator ovde i izaberite boju.

2. #ffffff je kod za belu boju, to je pozadina, ako želite neku drugu, isto vam predlažem da koristite Color Code Generator.

3. Zamenite Enter your tab code here sa kodom widgeta koji imate, znači, može bilo koji widget, kod se nalazi na kraju textbara, objašnjenje postoji u jednom od predhonih textova mada ako ne znate, objasniću.

4. Tab  title - Dodajte vaš naziv, samo... ponekad može da smeta i da predugačak naziv "uništ" widget pa zato koristite normalna imena npr, Label, Tags itd.

5. U zavisnosti od širine sajdbara ( Sidebar) možete dodati još jedan "Tab" ili nažalost oduzeti pa vam ostaju dva ili tri ako podesite dobro dimenzije.

To je sve. Nadam se da je pomoglo jer nije teško.