Cikkajánló
Ez a tartalom regisztrációhoz kötött. Ha már regisztrált tag vagy, akkor a Bejelentkezés alatt tudsz belépni, ellenkező esetben regisztrálnod kell a tartalom megtekintéséhez.Regisztrált felhasználó belépéseFelhasználónévJelszó Emlékezzen rám  RegisztrációFelhasználónév*Email cím*E-mail cím újra*Honlap**Kötelezően
Hoztam egy újabb WordPress bővítményt kérésre, ami arra szolgál, hogy a sablonban bárhová betudtok szúrni közösségi ikonokat vagy szimpla ikonokat például a cikkekhez a dátum, cikkíró, kategóriák elé vagy
Most, hogy kicsit jobban rákattantam a Coppermine Galériára és annak trükkjeire, észrevettem, hogy nagyon-nagyon régen nem hoztam már .png képeket, bár készítgettem őket, csak nem lettek feltöltve, így most
Sosugary Gallery | Jennifer Lawrence téma Szövegdoboz | Kattintásra kijelöli és másolja a szöveget Ingyenes téma | Coppermine Gallery free theme Prémium téma | Sophie Turner WordPress theme WordPress | Letöltés számláló
Ö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.

 

 

 

 

 

 

lindadesign Hozzászólások
2 520 megtekintés

Hozzászólások