Cikkajánló
Mielőtt megörülnétek, nem, nem lett a G-Portálon ilyen funkció. Ezt magunknak kell elkészíteni. Viszont, mivel sok mindenki használja a szélső sávban a címkéket felsorolás jellegűen, így készítettem egy tök
Sziasztok. Nem nagyon szoktam ilyesmit csinálni, de muszáj megosztanom veletek Virág egyik nagyon jó kis szövegdobozát. Tisztára beleszerettem. Nagyon tetszik és tök egyedi :) És még van az oldalán
Ahogy tegnap írtam ma meghoztam a régóta feltöltésre váró .png képeket.  :) Ezek az albumok frissültek vagy születtek meg ma:   Kelly Rowland // 25 darab Lana Parrilla //
Instagram doboz weboldalra Project dobozok és egy Elit csere effekt Elit csere effekt szöveggel és képekkel Lana Del Rey és Kylie Jenner G-Portálos témák Maisie Williams G-Portálos téma
2017. július. 11.



@nina


 

A cikk 2017. 07. 10-én frissült, mert az előző leírás már elavult volt és az oldal nem jött be, vagy maga a kód nem jelenítette meg az Instagram dobozt. De most végre találtam egy másik oldalt, ahol szuper jó Insta box-ot lehet generálni és azt kitenni például egy rajongói oldalra. Nem hiszem, hogy sok szót kell írnom az űrlap kitöltéséről. Szerintem mindenki megtudja maga azt csinálni ;) Ha mégis elakadnátok, kérdezzetek nyugodtan és majd segítek.

 

Ezen a weboldalon lehet a dobozt létrehozni:

https://instawidget.net/generate

 

Csak simán töltsétek ki az űrlapot, aztán ha készen vagytok, akkor a végén kattintsatok a Preview buttonra. Ez után jobb oldalon ott lesz a doboz és alatta a kód. Ha tetszik a végeredmény, akkor a kész kódot csak be kell illeszteni az oldalatokra oda, ahova a dobozt szeretnétek tenni. Javaslom, hogy egy <center></center> tag közé tegyétek a kódot, így mindig minden modulban középre igazítva fog megjelenni a doboz.

 

<center>
ide jön a doboz kódja
</center>

lindadesign Hozzászólások
327 megtekintés

Hasznosabb kódokat már jó régen nem hoztam, így ma összedobtam három féle új script-et. A kódok előnézeti képei láthatóak a kiemelt képen. Kettő darab project dobozt készítettem. Ebből az egyik már megvolt, csak a CSS részét írtam át és egy nagyon kicsit változtattam az egészen. A másik egy új doboz, ami nekem most nagyon tetszik. A képre kell vinni az egeret ahhoz, hogy a project leírása megjelenjen. A többi részleges adat látható alapból a dobozban. És ha már tegnap hoztam egy elit csere effektet, ma is készítettem egyet. Ez most sima szöveges csak, nem tartalmaz képeket, de igazán mutatós lehet a honlapokon. Plusz, mivel már jó sok elit csere effekt van az oldalon, így a Scripts menüben létrehoztam egy új almenüt, amiben csak ezek az effektek vannak :) Az új kódokat innen eléritek:

 

Scripts – Szövegdobozok – Project doboz 19.

Scripts – Szövegdobozok – Project doboz 20.

Scripts – Elit csere effektek – Képeffekt elit cseréknél 17.

lindadesign Hozzászólások
473 megtekintés

Kaptam már kérdést arról, hogy hogyan lehet azt megcsinálni, hogy az elit cserék szöveggel vannak kiírva és amikor rávisszük az egeret, akkor a szöveg helyett képeket mutat. Nos mivel nem láttam sehol sem ilyen elit csere kódot, így írtam egy egyszerűt. Valószínű, hogy más megoldás is van rá, de nekem ez volt a legkézenfekvőbb megoldás és egyszerű is a használata, ha valaki némileg már ért a kódoláshoz is. De ha elakadtok, akkor nagyon szívesen segítek benne :) Akkor lássuk a demót és a kódot:

 

Div kód

 

<div id="elitbox">
<a class="pictext" href="/" target="_blank">elit csere</a> <a class="pictext1" href="/" target="_blank">link csere</a> <a class="pictext2" href="/" target="_blank">affi csere</a> <a class="pictext3" href="/" target="_blank">társ csere</a>
<br>
<a class="pictext" href="/" target="_blank">elit csere</a> <a class="pictext1" href="/" target="_blank">link csere</a> <a class="pictext2" href="/" target="_blank">affi csere</a> <a class="pictext3" href="/" target="_blank">társ csere</a>
</div>

 

Minden új cserénél új ilyen sort kell a végéhez hozzáadni, és mindig megszámozni a következő sorszámmal.
<a class=”pictext2” href=”itt a perjel helyére jön az oldal linkcíme” target=”_blank”>elit csere</a>
Egymás után annyi ilyet kell egymás mellé tenni, amennyi kép lesz egy sorban. Ezután egy <br> taggal sortörést kell csinálni és új sorban jöhetnek a következő képek, ahogy a DIV minta kódban is látjátok fentebb.

 

CSS kód

 

<style type="text/css">
@import url('https://fonts.googleapis.com/css?family=Fira+Sans+Condensed:400,600&subset=latin-ext');
#elitbox {
margin: 0px auto;
width: 470px;
height: 210px;
}
a.pictext, a.pictext1, a.pictext2, a.pictext3 { /* a szöveg kinézete, elhelyezkedése */
font-family: 'Fira Sans Condensed', sans-serif;
font-size: 13px;
font-weight: 400;
color: #ffffff;
text-align: center;
background: #CFC8E6;
outline: 1px solid #ffffff;
outline-offset: -5px;
padding: 37px 10px 0 10px;
width:80px;
height:63px;
float: left;
margin-left: 5px; /* a két ikon közötti távolság */
margin-bottom: 5px;
}
/* a képek URL címei külön-külön */
a.pictext:hover {
font-size: 0px;
background:url(/images/scripts/image-effects/003.png);
}
a.pictext1:hover {
font-size: 0px;
background:url(/images/scripts/image-effects/005.png);
}
a.pictext2:hover {
font-size: 0px;
background:url(/images/scripts/image-effects/002.png);
}
a.pictext3:hover {
font-size: 0px;
background:url(/images/scripts/image-effects/004.png);
}
</style>

 

A CSS kódban ebben a sorban vannak a szöveg kinézetei és elhelyezkedése. Háttérszíne, stb.
a.pictext, a.pictext1, a.pictext2, a.pictext3 { /* a szöveg kinézete, elhelyezkedése */
Minden új a.DIV alkalmával ide is be kell írni az új pictext-et az új sorszámával vesszővel elválasztva!!!!!!!!!!!!

 

Az a.pictext:hover részhez pedig egy új ugyanilyen sort kell másolni, csak minden új sorban az aktuális kép URL címét kell bemásolni!!!!!!!!!!!!!!!!!!!!!!! A számsort sem szabad minden újnál elfelejteni, hogy tudjon mihez hivatkozni a hover effekt.
a.pictext3:hover {
font-size: 0px;
background:url(/images/scripts/image-effects/004.png);
}

lindadesign Hozzászólások
335 megtekintés

Mára elkészítettem még kettő darab G-Portálos kinézetet. Valahogy mostanában ehhez van kedvem. Mondjuk nem tudom, hogy Kylie Jenner mennyire lehet nagy szám nálunk, de tetszenek a fotósorozatai, így az egyik kinézetnél rá esett a választásom a fejlécet illetően. Amiben egyértelműen a fotósorozatok most is cserélhetőek saját képekre. Nagyon tetszik az a betűtípus is, amit ehhez a kinézethez választottam ki. Nem tudom eddig miért nem találtam rá, de egy darabig fogom használni. Olvasható, az oldalon jól mutat és mégsem Arial vagy Anaheim, amiket már annyira unok, bár azok is jól mutatnak a honlapokon. A két új kinézetet itt tudjátok megnézni avagy letölteni: G-Portál – G-Portálos teljes kinézetek

 

 

lindadesign Hozzászólások
350 megtekintés

A mai napra egy újabb G-Portálos kinézetet készítettem. Maisie Williams-nek nagyon szeretem ezt a fotósorozatát, így rá esett a választásom, hogy ő fog a fejlécre kerülni, amiben most is, mint mindig cserélhetőek a képek. Ahogy a CSS kód is átírható, ha esetleg nem tetszik nektek a rózsaszín kinézet. A szokásos helyen megnézhető és letölthető a téma: G-Portál – G-Portálos teljes kinézetek

 

lindadesign Hozzászólások
276 megtekintés

2017. július. 04.

Sziasztok! Azt hiszem megint jó régen nem jelentkeztem, így gyorsan összedobtam egy G-portálos kinézetet. Egyszerű, letisztult, átlátható lett és nem túl színes. A fejléchez van .psd fájl is, így a Taylor-os képeket le lehet cserélni benne másik képekre is. Akár blogképekre is. A napokban még hozok majd, ha minden jól megy pár G-Portálos témát, mert szerintem eléggé hasznos dolgok ezek azoknak, akik kevésbé értenek még a G-Portálhoz. A téma innen tölthető le vagy nézhető meg nagy méretben:

 

G-Portál – G-Portálos teljes kinézetek (mindig legalul kell keresni a legfrissebb kinézeteket!)

 

lindadesign Hozzászólások
257 megtekintés

2017. május. 28.

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á időm vagy kedvem. A mostani kettőből az egyik (a méhecskés) igazi nyárias kinézetet kapott. Jó vidám színeket választottam amivel szerintem egy tök jó blogos kinézetet sikerült létrehoznom. Igazi vidámak a színek benne. A másikon inkább a lila/fekete/fehér színek dominálnak, de az is jól néz ki :) Persze ízlések és pofonok ugyebár… A fejlécek cserélhetőek, ha az nem tetszik nektek.

 

Egyébként bocsi, ha túl szélesre sikerül a kinézet, de én már annyira nem tudok benne maradni a keskeny oldalakban, hogy nagyon nem. Így azon korrigáljatok, ha ti túl szélesnek találjátok, bár szerintem az ilyen oldalak jobban néznek már manapság ki, mint azok, amik 1000 vagy akár csak 800 pixelbe vannak nyomorítva.

 

Itt tudjátok megnézni és letölteni a témákat: G-Portál – G-Portálos teljes kinézetek

 

 

lindadesign Hozzászólások
593 megtekintés

2017. május. 26.

Én ezt a weboldalt a munkahelyemen használom eléggé sűrűn. Ez arra jó, ha tetszik egy adott betűtípus vagy pont ugyanarra van szükségünk, akkor ezen az oldalon meg lehet azt keresni. Van, hogy nem pont azt találja meg az oldal amit keresünk, hanem a hozzá leghasonlóbbat, és olyan is van, hogy a közelébe sincs a kinézet a keresett betűtípuséhoz, de nekem eddig bevált és mindig megtalálta azt, amit kerestem. Általában olyan betűtípusokat talál meg, amik fizetősek, de ha a fizetősre rákeresünk a Google-ben a nevére és mögé még oda biggyesztjük, hogy free, akkor 85% az esély, hogy megtaláljuk és le tudjuk tölteni. Mondjuk nálunk a melóban vannak fizetős betűtípusok is, de egy ideje már mi is az ingyeneset szoktuk lementeni.

 

Az oldal használata pedig felettébb egyszerű. Erre az oldalra kell elmenni: https://www.myfonts.com/WhatTheFont/
Itt a Tallózásra kattintva ki kell választani a betűtípus képét. Ügyelni kell rá, hogy a háttér fehér legyen a szöveg pedig fekete. Példa kép:

 

 

Ha a képet kiválasztottuk, akkor kattintsunk a Continue-ra. A következő oldalon beadja a választott szövegünket betűnként. Ha valahova nem a megfelelő betűt írta automatikusan az oldal, azt javítsuk ki. Ahol csak egy pont van, azzal nem kell foglalkozni! Az a rubrika legyen inkább üres. Kijavítás után újra Continue a zöld nyílra.

 

 

Aztán megérkezik a lista, ahol kiadja az oldal a leghasonlóbb betűket :) Megadja a betűtípus nevét is, amire rákeresve már könnyű dolgunk van! A Google a barátunk :)

 

lindadesign Hozzászólások
451 megtekintés

2017. május. 24.

Igazából ezzel a kicsike programmal azt lehet letesztelni, hogy kisebb vagy nagyobb felbontásban az oldalatok kinézete vagy azon elhelyezett menük, galéria képek, üdvözlő üzenetek nem-e csúsznak el más felbontásokban. A programot telepíteni sem kell. Innen letöltitek és elindítjátok. Igazából egy vagy kettőféle felbontás beállítása bőven elég a saját felbontásotokon kívül, mert ha egy kisebb vagy egy nagyobb felbontásban jól mutat az oldal vagy éppen el van csúszva, akkor az a saját felbontásotokon kívül minden más felbontásban elcsúszik vagy jól mutat.

 

Ha elindítjátok a programot, akkor egy kis monitor megjelenik az óra melletti ikonok között a tálcán.

 

 

A program is megjelenik a monitor közepén. Arrébb lehet tenni vagy ha éppen nem kell, akkor a kis ikonra a tálcán egyszer rá kell kattintani és ideiglenesen eltűnik az ablak. Az ablakban alul ahol nálam a 6-os érték van, ott lehet beállítani, hogy mennyi felbontást akartok letesztelni. Nálam 6 van, de csak az 1366-osat használom. Vagy mindegy melyiket az eredetin kívül, ami nekem 1920.

 

 

 

A nyilakra kell kattintani és a legördülő menüben ki lehet választani a felbontást, amiben meg akarjátok nézni az oldalatokat. Ha a felbontást kiválasztottátok, akkor a jobb oldalon lévő kék monitorra kell kattintani, hogy megváltozzon a monitorotok felbontása. Nem kell megijedni, kicsit átalakul a felbontás, de így le lehet tesztelni, hogy van-e bárhol is elcsúszás az oldalon. Ha megnéztétek, akkor válasszátok ki az eredeti felbontást és javítástok a hibát, hogy minden felbontásban tökéletes legyen az oldalatok!

 

lindadesign Hozzászólások
348 megtekintés

2017. május. 23.

Hogy mi az az URL cím? Sok cikkemben írom, hogy pl. másoljátok ki az URL címet. Nekem ez tök egyértelmű, de lehet van olyan, akinek nem az. Szóval az URL cím röviden a link vagy hivatkozás. Az a link, amivel megjelenik egy kép vagy letölthető egy fájl, vagy maga az oldalatok címe is URL cím.

 

Például képeknél

 

 

Ennek a képnek, ami itt megjelenik ez az URL címe:
http://lindadesign-nonstop.hu/images/html-php/weboldalad-beinditasa/003.jpg
Ezt úgy lehet a képnél megnézni, hogy rá kell kattintani jobb egérgombbal a képre és kiválasztani a Képadatok megjelenítése lehetőséget (Mozilla Firefoxban) A többi böngészőben is hasonló a dolog.

 

Az a lényeg, hogy ha a tárhelyedre feltöltesz valamit (lehet G-Portál is), utána azt az elérhetőséget kell megadni a tartalomban is.

 

G-Portálon képeket általában Galériába töltünk fel. Ilyenkor feltöltés után a galériában rá kell kattintani a feltöltött képre. Az megjelenik nagyban és akkor lehet kimásolni az URL címét. Ugyanígy kell, ha a G-PorTÁRban egy fájlt töltötök fel letöltésre.

lindadesign Hozzászólások
226 megtekintés

Lehet sokan nem tudják, hogy a G-portálon van arra lehetőség, hogy ne egy adott szélső modulba vagy a szerkeszthető fejléc/lábléc modulba legyen beillesztve az oldal CSS kódja, hanem a “rendes” helyére. Miután teljesen elkészültetek az oldalatok kinézetével és a CSS kódjával, akkor a CSS kódot mentsétek el egy jegyzettömb fájlba. Két dologra kell ügyelni mentésnél

 


1. a CSS kódot UTF-8-ban mentsétek el

 


2. A CSS kód elejére és végére nem kell a CSS nyitó és lezáró rész csak a CSS

 

Ez után az oldalatok G-PorTÁR-jába hozzatok létre egy új albumot mondjuk CSS kódjaim címmel. Ha nincs még G-PorTÁRotok, akkor a Modulkezelőben létre lehet hozni. Létrehozás után az albumba pedig töltsétek fel a CSS kódot.

 

 

 

Ez után kattintsatok rá az aktuális CSS kód linkjére az albumban. Itt másoljátok ki a linkjét. Ezt a linket pedig a Vezérlőpult – Stílus és Felületben illesszétek be a megfelelő helyre. Ezután kattintsatok a Beállításra és készen is vagyunk. Az oldal felvette a CSS kód stílusát. Ez azért is jó, mert így a CSS kód hamar betölt az oldalon.

 

 

 

lindadesign Hozzászólások
244 megtekintés