Neko

Demó látható a bal oldali sávban Az év weboldala modulban.

Kód
Így, ahogy van az egészet másold ki és illeszd be oldalad egyszerű moduljának forráskód nézetébe oda, ahol használni fogod majd a modult. Írd át a dobozban lévő tartalmat és készen is vagy. A benne lévő CSS kódot is átírhatod, ha értesz hozzá ;)

<div align="center">
    <div class="modul">
        <ul class="tabs-widget tabs-widget-widget-themater_tabs-2-id">
            <li>
                <a href="#widget-themater_tabs-2-id1">Modul 1</a></li>
            <li>
                <a href="#widget-themater_tabs-2-id2">Modul 2</a></li>
            <li>
                <a href="#widget-themater_tabs-2-id3">Modul 3</a></li>
            <li>
                <a href="#widget-themater_tabs-2-id4">Modul 4</a></li>
        </ul>
        <div class="tabs-widget-content tabs-widget-content-widget-themater_tabs-2-id" id="widget-themater_tabs-2-id1">
            <div class="widget">
                <table align="center" border="0" cellpadding="10" cellspacing="0">
                    <tbody>
                        <tr>
                            <td>
                                <div class="tartalom">
                                    Ide jöhet bármilyen tartalom vagy kép vagy akármi ebbe a modulba. Ugyan úgy lehet kezelni, mint a rendes modulokat. Képet, linket bármit tehetsz ide.<br />
                                    Az egész kódot illeszd be oldalad egyszerű moduljának forráskód nézetébe oda, ahol használni szeretnéd ezt az összetett dobozt, írd át a tartalmat, változtass a CSS kódon, ha akarsz és okéz le. Készen is vagyunk.</div>
                                <div class="tartalom">
                                    &nbsp;</div>
                                <div class="tartalom" style="text-align: center;">
                                    <img alt="" src="//aranymeli.gportal.hu/portal/aranymeli/image/gallery/1385887858_35.gif" style="width: 90px; height: 128px;" /> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; <img alt="" src="//aranymeli.gportal.hu/portal/aranymeli/image/gallery/1385887865_05.gif" style="width: 117px; height: 148px;" /></div>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <ul>
                </ul>
            </div>
        </div>
        <div class="tabs-widget-content tabs-widget-content-widget-themater_tabs-2-id" id="widget-themater_tabs-2-id2">
            <div class="widget">
                <table align="center" cellpadding="10" cellspacing="0" class="raceResults">
                    <tbody>
                        <tr>
                            <td>
                                <div class="tartalom">
                                    Ez a modul jelenleg 4 modult tartalmaz, de tehetsz bele többet is és ki is vehetsz belőle, ha sokallod. Ennek a leírása lejjebb olvasható az oldalon.<br />
                                    &nbsp;</div>
                                <div class="tartalom" style="text-align: center;">
                                    <font class="magz"><img alt="" src="//aranymeli.gportal.hu/portal/aranymeli/image/gallery/1376233219_73.gif" style="width: 98px; height: 121px;" /></font></div>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <ul>
                </ul>
            </div>
        </div>
        <div class="tabs-widget-content tabs-widget-content-widget-themater_tabs-2-id" id="widget-themater_tabs-2-id3">
            <div class="widget">
                <table align="center" cellpadding="10" cellspacing="0" class="raceResults">
                    <tbody>
                        <tr>
                            <td>
                                <div class="tartalom">
                                    Minta modul. Bármi mehet bele. Chat, Twitter, Facebook dobozok is :) Tele teheted elit csereképekkel is vagy akármivel :)</div>
                                <div class="tartalom">
                                    &nbsp;</div>
                                <div class="tartalom" style="text-align: center;">
                                    <img alt="" src="//aranymeli.gportal.hu/portal/aranymeli/image/gallery/1376814088_94.gif" style="width: 94px; height: 60px;" /></div>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <ul>
                </ul>
            </div>
        </div>
        <div class="tabs-widget-content tabs-widget-content-widget-themater_tabs-2-id" id="widget-themater_tabs-2-id4">
            <div class="widget">
                <table align="center" cellpadding="10" cellspacing="0" class="raceResults">
                    <tbody>
                        <tr>
                            <td style="text-align: center;">
                                <img alt="" src="//aranymeli.gportal.hu/portal/aranymeli/image/gallery/1385888783_79.gif" style="width: 93px; height: 122px;" />&nbsp; &nbsp; <img alt="" src="//aranymeli.gportal.hu/portal/aranymeli/image/gallery/1385888776_36.gif" style="width: 91px; height: 132px;" /> &nbsp; &nbsp; <img alt="" src="//aranymeli.gportal.hu/portal/aranymeli/image/gallery/1385889044_69.gif" style="width: 79px; height: 132px;" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
                        </tr>
                    </tbody>
                </table>
                <ul>
                </ul>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" src="//aranymeli.gportal.hu/portal/aranymeli/upload/285733_1387957538_05900.js"></script><script type="text/javascript" src="//aranymeli.gportal.hu/portal/aranymeli/upload/285733_1387957536_01497.js"></script><script type="text/javascript" src="//aranymeli.gportal.hu/portal/aranymeli/upload/285733_1387957536_08556.js"></script><script type="text/javascript" src="//aranymeli.gportal.hu/portal/aranymeli/upload/285733_1387957535_03268.js"></script><script type="text/javascript" src="//aranymeli.gportal.hu/portal/aranymeli/upload/285733_1387957529_06483.js"></script>
<style type="text/css">
.modul { /* a teljes egész modul szélessége */
    width: 330px;
}
.tabs-widget {
    list-style: none;
    list-style-type: none;
    margin: 0 0 0px 0;
    padding: 10px;
    height: 40px;
}

.tabs-widget li {
    list-style: none;
    list-style-type: none;
    margin: 0 0 0 5px;
    padding: 0;
    float: left;
}

.tabs-widget li:first-child {
    margin: 0;
}

.tabs-widget li a { /* menücímek kinézete */
    color: #333333;
    background: #f2f2f2;
    padding: 10px 14px;
    font-family: Arial;
    font-weight: bold;
    display: block;
    text-decoration: none;
    font-size: 12px;
    line-height: 12px;
    box-shadow: 1px 1px 1px #999999;
}

.tabs-widget li a:hover { /* menücímek kinézete, ha ráviszed az egeret */
    background: #CC463C;
    color: #eaeaea;
}

.tartalom { /* szöveg kinézete a modulokban */
    color: #9F9F9F;
    font-family: Trebuchet ms;
    font-size: 13px;
    line-height: 16px;
    text-align: justify;
}</style>

Leírások

Maga a menü rész ez:

   <li>
                <a href="#widget-themater_tabs-2-id1">Modul 1</a></li>
            <li>
                <a href="#widget-themater_tabs-2-id2">Modul 2</a></li>
            <li>
                <a href="#widget-themater_tabs-2-id3">Modul 3</a></li>
            <li>
                <a href="#widget-themater_tabs-2-id4">Modul 4</a></li>

Ha még akarsz hozzá tenni akkor egy teljes menüsort másolj ki és illeszd az utolsó alá.
(Egy teljes menüsor kiemelve)
A modulok linkelése a kódban ez: #widget-themater_tabs-2-id4
Ha még egy modult akarsz hozzá tenni, akkor a linkben az utolsó számot is meg kell változtatnod egyel nagyobbra.

Példa kód új sorral:

   <li>
                <a href="#widget-themater_tabs-2-id1">Modul 1</a></li>
            <li>
                <a href="#widget-themater_tabs-2-id2">Modul 2</a></li>
            <li>
                <a href="#widget-themater_tabs-2-id3">Modul 3</a></li>
            <li>
                <a href="#widget-themater_tabs-2-id4">Modul 4</a></li>
  <li>
                <a href="#widget-themater_tabs-2-id5">Modul 5</a></li>

Ha el szeretnél venni belőle inkább egy modult, akkor értelemszerűen egy sort ki kell törölnöd.

De attól, mert egy új modult hoztunk létre maga a modul még nem fog látszani a kódban. Ahhoz a tartalmi részt is másolni kell. Tartalmi részek kijelölve a fenti kódban!

Ez egy tartalmi rész kódja:

   <div class="tabs-widget-content tabs-widget-content-widget-themater_tabs-2-id" id="widget-themater_tabs-2-id2">
            <div class="widget">
                <table align="center" cellpadding="10" cellspacing="0" class="raceResults">
                    <tbody>
                        <tr>
                            <td>
                                <div class="tartalom">
                                   !!!!!!!!!!!!!!!!!!!!Ide írod a tartalmat, de az egész kódrész kell ahhoz, hogy egy új modult tudjál másolni a többi alá!!!!!!!!!!!!!!!!!!!!</div>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <ul>
                </ul>
            </div>
        </div>

Ha bemásoltad az új modult, akkor a kódban amit kiemeltem részt: id2 át kell írnod a számot ugyan arra, mint amit a modul linkjében is megadtál. Nekem az új modul linkem ez:

<li>
                <a href="#widget-themater_tabs-2-id5">Modul 5</a></li>

Így a tartalmi részben az id2 helyett id5 lett.

Igazából egyáltalán nem bonyolult, csak át kell tudni látni a kódot.
Elmagyarázni így írásban annál nehezebb :(

Ha véletlenül elrontottad az oldalad a kóddal itt a leírás, hogyan hozd helyre:
//aranymeli.gportal.hu/gindex.php?pg=35318106&nid=6287801

Súgó Még nincs hozzászólás.

Frissítés

Csak regisztrált felhasználók írhatnak hozzászólást.