2018. 04. 24.Coppermine | Thumbnails képek méretének változtatása egyszerűen
2018. 04. 18.Videó | PNG készítése Photoshop-ban
2018. 04. 17.Coppermine | Eredeti kép megnyitása új lapon és nem új ablakban
2018. 04. 03.Képről szöveg másolása
2018. 04. 02.Coppermine Galéria költöztetése
Coppermine Gallery themes

Coppermine Gallery themes
80 napja
111 néző

WordPress themes

WordPress themes
81 napja
114 néző

G-Portál themes

G-Portál themes
81 napja
67 néző

Tumblr themes

Tumblr themes
81 napja
101 néző

Összetett szövegdoboz

Demó látható a lap alján!


Először is mentsd le a .js fájlokat, majd töltsd fel a tárhelyedre. Aztán az én .js kódjaimban cseréld le az URL címeket a te feltöltött .js fájljaid URL címével.
HTML/PHP oldalon: a megkapott és átírt .js fájlokat másold be oldalad <head> részébe
G-Portálon: a .js fájlokat a Médiatárba töltsd fel, aztán az átírt kódokat egy az egyben tedd bele egy jobb vagy bal oldali egyszerű modulba. Más ne legyen a modulban, csak a javascript kódok!


Javascript kódok letöltése
osszetett-modul-1
osszetett-modul-2
osszetett-modul-3
osszetett-modul-4
osszetett-modul-5


Javascript kódok
 

<script type="text/javascript" src="/js/osszetett-modul-1.js"></script>
<script type="text/javascript" src="/js/osszetett-modul-2.js"></script>
<script type="text/javascript" src="/js/osszetett-modul-3.js"></script>
<script type="text/javascript" src="/js/osszetett-modul-4.js"></script>
<script type="text/javascript" src="/js/osszetett-modul-5.js"></script>


A szövegdoboz kódja
Egy teljes kódrészt kijelöltem a kódban. Ez egy doboz teljes kódja. Ha több vagy kevesebb dobozt szeretnél a szövegdobozban, akkor értelemszerűen egy újabbat bemásolsz a régi alá vagy kitörlöd a teljeset a kódból.
 

<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ÖN AZ
ELSŐ DOBOZBA A TARTALOM. Lehet kép, szöveg, menü, bármi.</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">
                                    IDE JÖN AZ MÁSODIK DOBOZBA A TARTALOM. Lehet kép, szöveg, menü, bármi.</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">
                                   IDE JÖN AZ HARMADIK DOBOZBA A TARTALOM. Lehet kép, szöveg, menü, bármi.</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>
                                <div class="tartalom">
                                   IDE JÖN A NEGYEDIK DOBOZBA A TARTALOM. Lehet kép, szöveg, menü, bármi.</div>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <ul>
                </ul>
            </div>
        </div>
</div>
</center>


CSS kód
 

<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ás
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á. A modulok linkelése a kódban ez: 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 szövegdoboz kódjában! És a tartalmi kódban is jelölni kell az id részt, hogy a kód felismerje az új modult a szövegdobozban.


 

 

IDE JÖN AZ ELSŐ DOBOZBA A TARTALOM. Lehet kép, szöveg, menü, bármi.

 

 

   

 

 

LindaDesign NonStop – A Portálépítés birodalma

 

 

Menü- Menü – Menü
Vagy Affiliates csere is lehet.

 

 

 

 

 

 


2 665 megtekintés

Hozzászólások