Cikkajánló
Ez a weboldal akkor jó, ha például nem tudod a fejléced alapján eldönteni, hogy milyen színeket használj a design-hoz. Csak fel kell töltened a fejléced, kicsit várni és online
A mai napra végre sikeresen bekódoltam kettő darab G-portálra való blogos kinézetet. Előre már vannak készen kinézetek, amiket elképzelek, csak a bekódolásuk várat magára, mert nem mindig van rá
Elkészültek kérésre a leírások. Egy kérés volt igazából a Sosugary Coppermine galériához, de ebből kifolyólag eszembe jutott még kettő hasznos leírás, így azokat is megcsináltam. :) Amit kértetek leírás,
Prémium téma | Ellie Goulding G-Portálos téma WordPress | Bejegyzés nem jelenik meg a főoldalon Gal Gadot G-Portálos téma Emilia Clarke G-Portálos téma Cole Sprouse G-Portálos téma
Kattintásra lenyíló szövegdoboz

 

Kattintásra lenyíló szövegdoboz

 

Ha valaki kettőt szeretne, akkor kicsit módosítani kell a kódot:
Keresd meg ezt a részt ebben a .js fájlban: /js/kattintasra-lenyilo-szovegdoboz-02.js
 

animatedcollapse.addDiv('textbox', 'fade=1,speed=400')


ez alá mehet több, csak a textbox szót kell átírni, pl:
 

animatedcollapse.addDiv('textbox', 'fade=1,speed=400')
animatedcollapse.addDiv('valami', 'fade=1,speed=400')
animatedcollapse.addDiv('lenyilo', 'fade=1,speed=400')


Aztán át kell írni a másik kódot is:
 

<div align="center">
<div id="animated-collapsible-box">
<div id="animated-collapsible-head">
<p style="text-align: center;">
<a href="#" rel="toggle[valami]" style="">Kattintásra lenyíló szövegdoboz</a></p>
<div class="animated-collapsible-text">
<div fade="1" id="valami" speed="400" style="display: none;">
Ide jön a tartalom, amit a rejtett dobozba lehet írni. Jöhet bele kép, szöveg, Chat, Facebook doboz vagy bármi más is :)
<p style="text-align: center;">
<img alt="" src="http://aranymeli.gportal.hu/portal/aranymeli/image/gallery/1414232751_66.png" style="width: 370px; height: 254px;" /></p>
</div></div></div></div></div>


A kiemelt részeket kell átírni.


Javascript kód
A .js fájlokat innen tudod lementeni, feltölteni a tárhelyedre és cserélni benne az URL címet a sajátodra.
kattintasra-lenyilo-szovegdoboz.js
kattintasra-lenyilo-szovegdoboz-01.js
kattintasra-lenyilo-szovegdoboz-02.js
 

<script type="text/javascript" src="/js/kattintasra-lenyilo-szovegdoboz.js">
</script><script type="text/javascript" src="/js/kattintasra-lenyilo-szovegdoboz-01.js">
</script><script type="text/javascript" src="/js/kattintasra-lenyilo-szovegdoboz-02.js">
</script>


Szövegdoboz kódja
 

<div align="center">
    <div id="animated-collapsible-box">
        <div id="animated-collapsible-head">
            <p style="text-align: center;">
                <a href="#" rel="toggle[textbox]" style="">Kattintásra lenyíló szövegdoboz</a>
            </p>
            <div class="animated-collapsible-text">
                <div fade="1" id="textbox" speed="400" style="display: none;">
            <p>
                &nbsp;
            </p>
Ide jön a tartalom, amit a rejtett dobozba lehet írni. Jöhet bele kép, szöveg, Chat, Facebook doboz vagy bármi más is :)
<p style="text-align: center;">
<img alt="" src="/images/scripts/szovegdobozok/008/002.png" style="width: 370px; height: 254px;" /></p>
</div>
            </div>
        </div>
    </div>
</div>


CSS kód
 

<style type="text/css">
#animated-collapsible-box { /* az egész doboz */
   background-color: #000000;
   width: 400px;
   padding: 5px;
}
#animated-collapsible-head a:link, #animated-collapsible-head a:visited, #animated-collapsible-head a:hover { /* a fejléc */
   font-family: Book Antiqua;
   font-size: 17px;
   font-weight: normal;
   color: #ffffff !important;
   background-color: #e41e69;
   text-align: center;
   padding: 5px;
}
.animated-collapsible-text { /* tartalom */
   color: #ffffff !important;
   background-color: transparent;
   text-align: justify;
   width: 400px;
}
</style>

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

Hozzászólások