Blogregény sablon készítése

Probléma

Elérkeztünk az első "vizsgához": egy blogregény sablonjának elkészítéséhez. Persze használhatnánk az egyik egyszerű sablont, és ezzel készen is vagyunk, de abban mi a pláne? Szabjuk személyre! Legyen csinos főoldal! Legyen chat! Legyen fejléc! Mi kellhet még...

Sajnos, vagy sem, de a munka dandárja rátok marad, mert nem értek a dizájnhoz. A technikai részletekkel együtt fogunk elszöszölni, de a kinézet, a csinosítás már a tietek. Nem találhatom ki helyettetek, ez érthető. Ígérem, a komolyabb munkákhoz szerzek egy sablontervet, de most erre nincs szükség. Nem lesz túl egyedi, ez igaz, semmi spéci szövegdoboz, különleges kinézet, viszont nem is ezen van a hangsúly.
Milyen speciális igények merülhetnek fel egy blogregény esetében? Kellenek a feltöltött fejezetek. Szerintem, de ez tényleg szubjektív, egy regényes blogon maga a regény a lényeg, tehát ez legyen az első, amivel az olvasó találkozik. Nem árt pár lap a háttér-információknak: szereplők, helyek, tárgyak, ki tudja, mi minden még. Képre igazából csak itt van szükség, a többi helyen zavarja az olvasást, kivétel az egyedi illusztrációkat, de még azokat is külön szabad választani. Jól jönne, ha a fejezetek nem fordított sorrendben jelennének meg, hanem Prológus (ha van), 1. fejezet, 2. és így tovább. Amennyiben vannak hírek, azokat viszont a blogokon megszokott fordított sorrendben kell felvetíteni, azaz a legutolsó jelenjen meg legfelül. Így az olvasó értesülhet arról, hogy azért nincs új fejezet, mert a szerző gépe elromlott, megbetegedett a hörcsöge, tanulnia kell, vagy egyszerűen csak beállt az írói blokk. Viszont a hírek ne keveredjenek sem a mellékinformációkat tartalmazó oldalakkal, sem a fejezetekkel. Remekül ki lehet zökkenteni valakit az olvasásból két régi fejezet között bent maradt hírjellegű bejegyzéssel, amiben a szerző épp egy vidám újságot oszt meg, mikor a szereplők épp teljes gőzzel szenvednek.

Megoldás menete

Érdemes egy privát új blogot kezdeni gyakorlásképpen, de már meglévő oldalak is könnyen átalakíthatóak. Mivel a dizájnelemeket nem nagyon piszkáljuk, a megoldás saját sablonnal is használható. Egyszerűen a személyre szabás lépéseit ki kell hagyni. Új blog esetében – nem kell aggódni, egy szerző száz önálló bloggal rendelkezhet, valószínűleg van hely egy újabbra – érdemes némi szöveget írni, hogy később a változtatások látszódjanak. Ha semmi nem jut eszedbe, javaslom egy Lorem ipsum...-ot, itt generálhatsz pár bekezdést. Szükséged lesz mondjuk két-három regényfejezetre, pár hír jellegű bejegyzésre és legalább egy oldalra, mondjuk a szereplőkről (ehhez nem feltétlenül kell szöveg).

A megoldás meglepően egyszerű lesz, csak sok utógondozást igényel. Egyszer majd visszanézünk, hogy automatizáljuk ezt, ám az komolyabb anyag.
Először minden bejegyzést meg kell címkéznünk, és a továbbiakban is aktívan kell használnunk ezt a beállítást. Ilyetén el tudjuk különíteni a híreket a fejezetektől, ami a sablon lényege. Utána létrehozunk egy új oldalt, ahol a fejezetekre mutató linkeket tároljuk – a nekünk megfelelő sorrendben. Ezt egyéni átirányításon keresztül megtesszük főoldalnak, így sehol nem lesz egy összefoglaló kép az összes bejegyzésről, tehát minden alkalommal, ha új fejezetet töltünk fel, a linkeket gondosan hozzá kell adnunk. A híreket egy új oldalra irányítjuk, méghozzá a Blogger egyik fantasztikus funkciója segítségével: a címkék alapján keresve. Az egyéb információkat tartalmazó lapokat egyszerűen egy oldallistában helyezzük el. Pár egyéb modult még hozzáadunk, például kiemelt bejegyzéseket, majd személyre szabjuk a Blogger által biztosított keretek között. Semmi kód! (Kivétel, ha chatre is szükségünk van. Azt nem biztosít a Blogger, így külső forrásból kell letöltenünk.)

Megoldás

Induljunk ki abból az állapotból, amit fentebb felvázoltam: van egy oldal a szereplőknek, és van összesen öt bejegyzés. Ebből három a regényhez tartozik, kettő meg egyéb hír. Állítsunk be valami sablont, ami tetszik, igazából mindegy, a testreszabásban van egy kis különbség. Egyelőre az Egyszerű sablonok közül az első raktam be, de mivel bármikor változtatható, most nincs jelentősége. Az oldal tehát így néz ki a háttérben:

Bejegyzések és oldalak, illetve az utóbbi tartalma

Elrendezés

Sablonnal

Nem valami világrengetően izgalmas. Hogy én épp milyen címeket adok, vagy mi a szöveg, esetleg miféle címkékkel dolgozom, az esetleges. Mindenki azt használja, ami neki szimpatikus! Ha "fejezet" helyett a "regény" vagy "fejezetek" címke jobban tetszik, akkor azt. Ugyanígy később a személyre szabási és elrendezési lehetőségek száma is végtelen, csak azért követni a cikkben látottakat, mert én is így csináltam, pont a lényeget veszi el. Én csak az utat mutatom, azon neked kell végigmenned!

Elsőként készítsünk egy oldalt, amin a fejezetek lesznek. Ehhez kellenek a fejezetek linkjei, ami sokféleképpen megkapható. Az egyik módszer, hogy minden fejezetet megnyitunk szerkesztésre, majd oldalt a beállítások között az állandó linkre kattintva lekérjük a linkjét. (Ugyanitt át is állítható ez a link, ha a jelenlegi nem tetszik.) Megnyithatjuk megtekintésre is a bejegyzéseket, akkor az URL a felső sávban látható. Én csalni fogok, mivel tudom, hogy nem folytatom a dolgot, és közvetlenül kimásolom a blogból a kérdéses bejegyzések linkjét. (Megnyitom a blogot, kikeresem a fejezeteket, jobb klikk a címre, Hivatkozás címének másolása. Gyorsabb.)
Ezeket a linkeket olyan sorrendben helyezzük el, és olyan szöveggel, ami nekünk tetszik. Érdemes megtartani a sorszámozást, talán a fejezetcím sem árt. Lehet listában, lehet sorszámozott listában (megússzuk a külön sorszámozást, de gondot okoz pl. a prológus, vagy a 17. fejezet második része), lehet simán egymás alá írva. Úgy változtatjátok a megjelenést, ahogy tetszik, én maradok a minimálnál. Kaphatnak kis képeket (egyenként beszúrva), megváltozhat a betűtípus, a betűméret, -szín, a szöveg háttere, ami csak eszetekbe jut. A végső kép legyen egységes és passzoljon a blog későbbi színvilágához, elvégre ez lesz a főoldal!

Leendő főoldal (nem kell cím)

Borítókép opcionális, én raktam, plusz egy kis bevezetőt is. Ilyen, úgynevezett, placeholder, azaz helykitöltő képeket a placehold.it oldal ad, kiváló szolgáltatás, ha gyorsan adott méretű képre van szükségünk. Élesben persze valódi képre lenne szükség. Nem szükséges az oldalnak címet adni, de lehet neki.
Egy gyors pillantás az előnézetre, ha nagyjából megfelel, mehet a közzététel. Innen már nem sok van hátra, és foglalkozhatunk a dizájnelemekkel. Először megnézzük, mi az újonnan létrehozott oldalunk címe. Megtekintés és az URL-t kimásoljuk. Majd jöhet az egyéni átirányítás! A főoldalt kell az új oldalra irányítani, vagyis a következőre lesz szükségünk:

Főoldal állandó átirányítása

A főoldal a legtöbb weboldal (és alapértelmezetten a Blogger összes oldala) esetében egy perjel a szokásos URL végén. Ezt be kell írnunk, különben nem történik semmi. Az új főoldal URL-jéből csak a vége kell, azaz az oldalcime.blogspot.hu utáni részek. Pipa, hogy állandó átirányítás legyen, és módosítások mentése. Egy elem lesz így az egyéni átirányítások listájában.
Most nézzük meg, mi jön be, ha az oldal megtekintésére nyomunk.

Az új főoldal

Hurrá! A teljes URL-t egy kis dobozban beillesztettem felülre. (Nem szeretném a gépem egyéb beállításait közszemlére tenni, ahogy azt sem, hogy hatvan lappal dolgozom egyszerre, nyolc megnyitott programmal, és hogy néz ki a Blogger navigációs csík nálam, így azokat mindig levágom.) Na jó, de hol lehet a többi dolgot megnézni? Oké, a fejezeteket mindig megírjuk, megtekintés, URL másolása, beillesztés a főoldalra link címeként, de a hírek? Voltak híreink! És a szereplők!
Semmi pánik, csak egy kis türelem! Most áttérünk az Elrendezés menüre, ám ehhez érdemes kitalálni, milyen elrendezésre lesz szükségünk. Az oldalakra mutató linkek legyenek a felső sávban? Oldalt? Melyik oldalt? Az oldalpanel legyen egyszerű, vagy összetett? Egy vagy több lábléc-sávra van szükségünk? Ez a ti döntésetek, én, mint mindig, most is a minimálisra törekszem, hogy átlátható legyen a blog.
Tehát előbb a Személyre szabás menüjében beállítjuk a nekünk megfelelő elrendezést.

Kiválasztunk egy elrendezést

Oké, jöhet végre az Elrendezés menü. Az én javaslatom: a Blogarchívum kiszedése. Rákattintasz a modulra, Szerkesztés, Eltávolítás. Nem lesz rá szükségünk, de ha tetszik, maradjon. A következő lépés egy új modul beszúrása oda, ahol az oldalak listáját szeretnéd látni.

Oldallista modul beszúrása

Természetesen lehet oldalt is, csak én kiszedtem az oldalpaneleket. Az oldalak listájánál egy kis trükkre van szükségünk:

Oldalak listájának beállítása

Először hagyjuk bent a pipát a Főoldal előtt, és a szükséges egyéb oldalak (nálam a Szereplők) is kapjanak egyet. A főoldal helyettesítésére létrehozott, nálam névtelen oldalt viszont ne pipáljuk ki! Oldalt látható a listasorrend, ha nem megfelelő, húzással tudjuk rendezni az elemeket.
A következő lépés egy külső link hozzáadása. Nem külső lesz, ne aggódjunk miatta.

A hírek oldalának hozzáadása

És itt jön a trükk! Oldalcímnek adjunk valamit, amit meg szeretnénk jeleníteni. A hírekhez logikus a Hírek, nem? Az URL viszont speciális! Ha belső linkre hivatkozunk, az oldal a saját címét ismeri, és ahhoz hozzáfűzve keresi az adott linket, amit beírtunk. Ez mindenhol így van, tehát elég a vezető perjellel beírni pl. egy adott bejegyzés pontos címét, az jelenne meg, ha rákattintunk a linkre. De mi ezt a furcsa URL a képen?
A Blogger lépes listázni a bejegyzéseket az egyes címkék szerint. Ha láttál már olyan oldalt, ahol az egyes címkék is fel vannak tüntetve, akkor azokra rákattintva hasonló linkre érkezhetsz. A /search/label/címke_neve az adott címkével ellátott összes blogbejegyzést listázza. Így a Hírek link alatt – minő meglepő – az összes hírként címkézett posztot láthatjuk. Fantasztikus! Pont erre volt szükségünk! (Természetesen ha te nem hír címkével láttad el a híreket, a saját címkéd nevét használd.) Emiatt, bár több címkével is elláthatunk egy bejegyzést (egyszerre amúgy hússzal), érdemes a regény fejezeteit és a híreket külön kezelni. Tehát a "Hatodik fejezet + egy kis infó" poszt helyett legyen külön hatodik fejezet (a regényhez, fejezetként megcímkézve), és külön egy kis infó (hírként megcímkézve).

Egy kis testreszabás még, és ígérem, már nincs sok. A navbar modult én kikapcsoltam, és beállítottam egy fejlécképet, de a címet is fent hagytam. Majd látjátok, miért.

Fejléc beállítása

 A kész blog egyelőre ilyen:

A blog még nem teljes állapotában

Igen, a Prológus linkje kicsit elcsúszott, azt megigazítottam. És látható, miért ragaszkodtam a fejlécben a címhez... Nem erőltettem meg magamat a képekkel. A linkeket végigkattintva: a hírek alatt a hírek, a fejezetek a helyükön, a szereplők oldala az, aminek kell lennie... Imádnivaló. Majdnem készen vagyunk.

Na, már tényleg csak egy apróság a tökéletes élményért. Oké, hogy akinek van Blogger profilja, be tudja állítani, mely blogokat kíván követni, és látja, mikor van friss írás, meg fel is lehet jelentkezni RSS/Atom-hírcsatornán, de ha van egy fontos hír, miért ne jeleznénk külön? Ehhez állítsunk be egy kiemelt bejegyzést: adjunk hozzá egy Kiemelt bejegyzés modult.

Kiemelt bejegyzés beállítása

Tetszőlegesen testreszabható, mi jelenjen meg és mi ne. Beállítjuk az egyik hírt kiemeltnek – ezt rendszeresen kell majd frissíteni, ha újabb fontos hír érkezik (pl. feltöltésre került a 19. fejezet).

Innen már nincs sok: a blogbejegyzések szerkesztésénél beállítjuk, hogyan szeretnénk, ha megjelennének a posztok. Én kiszedtem a dátumot, az időt, a címkéket, a helyet, és csak a szerzőt hagytam meg. Sajnos az előző és következő bejegyzésekre mutató linkeket nem lehet ilyen egyszerűen átállítani, pedig az lenne az igazi. Sebaj, majd később.

Mi jöhet még? Ami tetszik! Bármely modult hozzáadhattok, én egyelőre ennyinél megállnék. Érdemes lehet valamiféle kapcsolatfelvételi lehetőséget biztosítani, mondjuk egy névjegy megjelenítésével, feliratkozást, talán chatet. Utóbbihoz sok jó tutorial van a magyar neten is, ez egy elég katonás leírás. (Nagy előnye, hogy a Források között eleve ott van az oldal, de erre linkre kattintva is van chatről szóló képes leírás.)

Nincs más, mint előre: a személyre szabás. Ezt is kire-kire rábízom, én ezt hoztam össze:

A végleges kinézet

Összefoglalás

A "vizsga" során felépítettünk egy teljes regényekre szabott blogsablont, ami működik egyedi sablonokkal, illetve a Blogger saját személyre szabás funkciójával egyaránt. Alkalmazható új, de egy kis címkézés után már üzemelő blogoknál is. A teljes blog itt tekinthető meg. (Megjegyzéseket letiltottam.)

Ez komoly munka volt! Szusszanjunk kicsit. A következő két cikkben HTML és CSS alapozásról lesz szó. Elhagyjuk kicsit a Blogger felületét, hogy gyakoroljunk, de nemsokára visszatérünk.

Ha végigverekedtétek magatokat a tutorial cikken, örömmel veszem, ha megjegyzésben vagy levélben megosztjátok velem a kész oldalak linkjeit! Jó lenne látni, mit alkottatok! Hadd legyek én is büszke rátok: szívesen kiteszem a linkeket a Források oldalon.