Így neveld a blogodat

Probléma Talán alapozó cikk, talán gyakorlati kérdés: hogyan kezeli a Blogger a képeket? Korábban a Primadonna blogon futottam bele Leah cikkében , amiben a egy képfeltöltő portál hibájára panaszkodott. Hogy a probléma még mindig előfordul, és hol jelentkezik, azt nem tudtam megállapítani (nem találtam olyan blogot, amit ő készített és valami nem jelenne meg), de később egy másik blogon találtam egy hasonló furcsaságot: Eltűnt kép, elcsúfult dizájn Nem állítom, hogy Leah problémája ugyanilyen hibára vezethető vissza, mert nem beszéltem vele. (Fogok, de előbb be kell mutatkoznom, és mi sem jobb bemutatkozás, mint cikket írni valaki háta mögött?) Valószínű, hogy egyéb képmegosztási kérdés lehet, de felpiszkálta a fantáziámat. Máshol is láttam a fentebbihez hasonló Tinypic megoldásokat, ezért fel kellett tegyem a kérdést: biztosan jó módszer így beemelni a dizájn elemeket

Probléma Ebben a rövid cikkben egy kis CSS-t fogok bemutatni: hogyan lehet szöveggel körbefuttatni a képeket. Téglalap alakú képekről lesz most szó, bár egy későbbi cikkben kitérhetek arra is, hogyan lehet szabálytalan alakú képeket (vagy négyzetes, de átlátszósággal bíró, .png formátumú) képeket körbefuttatni. Mindenkit megnyugtatok: nem ennyire nehéz a téma, hogy ilyen sokat csúszott a cikk, egyszerűen ütemezési probléma merült fel. (Magyarán elfelejtettem, hogy nem írtam meg.) Megoldás elméleti háttere Egyszer már volt róla szó, hogy a tartalomért a HTML felelős, de a kinézetet a CSS állítja . (Az interaktivitást meg a JavaScript adja.) Ezért CSS-hez kell fordulnunk, mert ha csak simán egymás alá dobáljuk a szöveget és a képeket HTML-ben, akkor nem fogják körbeölelni egymást. Persze van egy másik megoldás is, ami Blogger-specifikus. A Szerkesztési nézetben is át lehet állítani, hogy a képet körbefussa a szövegünk, de kell hozzá egy kis ké

Probléma Ebben a cikkben egy picit belemegyünk a színelméletbe, hogy megértsük, hogyan kezelik a böngészők a színeket. A weben használt leggyakoribb színértékekről fogok beszélni: a nevesített színekről, a hex-kódokról, illetve kitérek az RGB(A) színrendszerre és annak egy változatára, a HSL(A)-ra is.

Ha már megosztottuk a blogot a nagyvilággal, mindenki érdeke, hogy az időben be is töltsön. Ha az olvasóink azért hagyják el félúton az oldalt, mert egy perc után is csak teker és nem tölti be a képeket, az nem jó jel. Mit tehetünk? Optimalizáljuk a betöltési sebességet! Ez nem csak az olvasóknak jó, hanem a keresőmotorok is szeretik, vagyis a Google is előrébb fogja rangsorolni az oldalt. Nézzük meg, mit tehetünk a jobb sebesség elérésének érdekében!

Probléma Van egy blogunk, és mindez szép és jó. De hogy tudjuk megosztani a nagyvilággal? Hogyan szerezhetünk olvasókat, mi módon értesíthetjük őket, ha felkerül egy újabb bejegyzés? Illetve mi magunk hogyan tudunk feljelentkezni egy blogra? Erről szól a mai cikk. Megoldás menete Többféle módon is megoszthatjuk a blogunkat. Az első a szociális média fületek használata, amibe nem mennék bele, mert ehhez Ti biztosan jobban értetek (én magam annyira introvertált vagyok, hogy nem is használom ezeket). Szóval Facebook, Twitter, Instagram, TikTok... oké, azért az valahol nagyon meta, hogy valaki a arról készít egy tizenöt másodperces videót, hogy a blogot fényképezi, de hé, ha ez hoz olvasót, akkor ezt. Ilyen megosztó linkeket automatikusan ad a Blogger, minden bejegyzés mellé kipakolja. De ez posztokat oszt csak meg, az egész oldalt nem. Ilyen esetben a megoldás viszonylag egyszerű és igen hasonló mindenhol. Fogjuk a blog webcímét (URL), és megosztj

Probléma Az előző részben végigvettük, hogyan lehet gombhatású linket létrehozni. Ezen cikket megelőző alapozóban pedig szó esett a CSS változó elemek használatáról. Most kísérletet teszünk arra, hogy ezt a két tudást vegyítve egy könnyen adaptálható, programozói tudás nélkül is testreszabható gombot készítsünk. Megoldás menete Az eddig elkészített kód bonyolult, "fecsegő". Nagyon sok ismétlést tartalmaz, ezért szikárabbá tesszük. Béna angol szóviccel élve: kiszárítjuk. Ez a programozás egyik kedvenc technikája, a "Don't Repeat Yourself", azaz "Ne ismételd önmagad" rövidítéséből jön ( DRY, angolul "száraz" ). Ennek ellentettje a WET, azaz "Write Everything Twice" ("Írj mindent kétszer"), mások szerint pedig "We Love/Like Typing" ("Imádunk gépelni") stílusú kód. Sajnálom, tudom, hogy eddig nem készített fel titeket senki erre, de a programozóknak ritka rossz a humorérzéke. Ennél csak borz

Probléma Megesik, hogy az oldalon található linkek túl "laposak", jobb lenne, ha helyettük gombok jelennének meg. Ilyenek lehetnek az előző/következő oldalakra, bejegyzésekre mutató linkek, esetleg más modulok alján a "Küldés" gombok. Jól kinéző gombot készíteni azonban bonyolultabb, mint elsőre látszik! A cikk első felében elkészítünk egy sima, nem változtatható színű gombot, majd egy kis alapozás után megtanuljuk, hogy tegyük személyre szabhatóvá. Megoldás menete A gomb legfontosabb tulajdonsága, hogy térhatású. (Mindazonáltal készíthetünk lapos felületűt is.) Ezt leginkább az árnyékok manipulálásával és a gomb háttérszínének ügyes változtatásával tudjuk elérni (mivel a monitor még mindig sík, tényleges 3D tárgyat nehéz lenne létrehozni). A cél, hogy egy folyamatos színátmenetet hozzunk létre, mintha a fény felülről jönne. A felület egy része fényes, a többi árnyékos, illetve az egész gomb árnyékot vet. Ha ráhúzzuk az egeret, kissé kifényesedhet, jelezve,

Probléma Egy kép többet mond ezer szónál. De mi van, ha elég egy ikon? Melyik figyelemfelkeltőbb: "Kattints ide, ha lájkolnál!", vagy ? Rengeteg ingyen elérhető ikon-készlet létezik, ezek között sok csak az alapokat adja ingyen, a kiegészítő karakterek fizetősek. Hobbi bloggereknek ez nem pálya, komoly cégeknek lehet ilyenre szüksége. A legnépszerűbb választások a különféle nagy CSS keretrendszerek részei, amikről egyelőre nem beszélünk, elő fognak még kerülni. A lényeg egyelőre, hogy elérhetőek külön, de más, webdizájnt segítő csomagokkal együtt is. Ez gyakran meghatározza, melyik készletet használjuk, mivel általában az illeszkedik legjobban a stílusba, amit eleve kapunk. Ha nincs keretrendszer, nem gond, kiválasztjuk az egyiket, valahogy elérjük az ikonokat, és már használhatjuk is. Az én kedvenc választásom a Font Awesome csomag, ami az egyik legnagyobb, teljesen ingyenesen elérhető ikon-készlet. Hatalmas bázissal bír még a Bootstrap Glyphicon , de a nagyja fizető

Probléma Az iniciálék igazán akkor erősek, ha más betűtípussal írjuk őket. A böngészők alapértelmezetten igen kevés, úgynevezett, "web-safe" fontot támogatnak, főleg a különleges betűtípusok terén kicsi a választék. Ha egyéni kinézetre van szükségünk, magunknak kell utánajárnunk és beillesztenünk a kódba. Megoldás menete Senkit se ijesszen el a cím háttere, a cikk azért kapott "közepes" besorolást, mert sok pepecseléssel jár egy igazán egyedi font beillesztése, de nem nehéz. Főleg, ha van Dropbox felhasználónk. Az elméleti háttér egyszerű: egy helyen belenyúlunk a kódba, és manuálisan hozzáadjuk a kérdéses betűtípust, majd átnavigálunk oda, ahol használni akarjuk, és az előző cikkben látott font vagy font-family tulajdonságnál beállítjuk az adott szövegre vagy betűre. Több lehetőségünk van, attól függően, web-safe fontot akarunk beágyazni, Google Fontokat használunk, vagy valami még ennél is egyedibbre van szükségünk – akár magunk szerkesztette fo