Blogkészítési Tippek V. - Banner Slider készítése
Ebben a cikkben a blog jobb oldalán elhelyezkedő úgynevezett "Banner Rotator" vagy "Banner Slider" képforgató elkészítését fogom megmutatni. Ezzel olyan magától mozgó képgalériát tudtok csinálni amely folyamatosan váltogatja a képeket adott időközönként. Egy blogra ebből a fajtából összesen 5 darabot tudtok berakni. A későbbiekben azt is megmondom, hogy miért "csak" ennyit.
Galériánként 10 db képet tudtok berakni, és mindegyik képhez tudtok linket rendelni, illetve Alt szöveget megadni, amely az esetleges problémák fellépésekor jelenhet meg a kép helyett.
Ígérem sokkal egyszerűbb lesz mint, ahogy kinéz. Kezdésképp kattints az alábbi linkre:
Ez egy online html kód generátor ahol össze fogjuk állítani a banner rotatorodat! Angolul van az egész, de elsőre még azoknak is bonyolultabb lehet a használata akik jól beszélik a nyelvet. Elsőre lehet, hogy nem fogod észrevenni a generátort mert a lap alján található. Tekerj egy kicsit lejjebb. Kék téglalapban találod majd, a bal felső sarkában pirossal a következő felirat: "banner details"
Vagyis a banner részletei.
Mik ezek? Máris végig nézzük!
Bal oldalon fenn kiválaszthatod, hogy a képek mikor váltsák egymást!
"Automatically Refresh Image" vagyis a képek maguktól folyamatosan váltakoznak majd.
"New image with every page load" vagyis minden alkalommal amikor a látogató átkattint egy másik aloldalra, a galéria új képre vált.
A jobb felső sarokban a "how often" után beírhatod, hogy hány másodpercenként váltsák egymást a képek. Nem érdemes túl hosszú szünetet hagyni két kép között. Én a 4-8 másodpercet javaslom.
A következő "where do you want the page to open" kérdésnél beállíthatod hogy a képre kattintva a link miként nyíljon meg! Ha az elsőt választod akkor a látogató az adott oldalon belül kerül majd át oda ahova a link mutat, a másik két esetben pedig új lap nyílik meg a böngészőben és ott tölt majd be a megadott oldal.
Ezek után jön a bannerek szélessége (width) és magassága (height) beállítások. Ilyenkor pixelekben gondolkodjunk. Fontos, hogy automatikusan az összes képet ekkorában fogja megjeleníteni a slider, ezért aztán érdemes a képeket előre jól átgondoltan úgy megszerkeszteni, hogy akkorák legyenek amekkorára majd a slider-t is szeretnénk. Így ugyanis nem fog lemaradni egyetlen betű sem a képekről!
Talán kevésbé tűnik fontosnak a következő beállítás, pedig talán ez az amivel mindent elronthatunk. Említettem az elején, hogy egy blogunkba mindössze 5 db Banner Slider-t rakhatunk ezzel a módszerrel. Azért van ez így, mert a "Banner Rotator Number" gyakorlatilag egy sorszámot ad a Slide Show-nak ami alapján a képek beolvasása közben a rendszer megkülönbözteti, hogy melyik képnek melyikben kell megjelennie. Egyszóval ez felel azért, hogy a rendszer ne gubancolódjon össze. Tehát ennek fényében állítsuk be ezt a számot.
Innentől már csak két lépés van hátra! A képek beállítása és a Banner Slider/Rotator generálása!
Mint mondtam 10 db képet lehet egy Slider-be belerakni! Mindegyik képhez meg kell adni három értéket!
"url for link" ide azt a linket írd ahova majd a kép kattintásával eljut az érdeklődő! vagyis a Célt!
"url of image" ide kell a képnek a linkjét berakni! Érdemes a Google Drive-ot használni, ahogy azt már az előző cikkben részletesen leírtam! Katt IDE, ha még nem olvastad!
"alt text" Ez az a szöveg ami megjelenik a kép helyett ha esetleg valami hiba folytán -internet csatlakozás vagy böngésző beállítások - nem töltődne be!
Most már csak a Generálás maradt hátra!
Ha beállítottuk az összes képet, leellenőriztük és mindent rendben találtunk akkor nyomjuk meg a téglalap alján található sötétkék "Generate" gombot! (A "Reset" gombot csak akkor használjuk,ha szeretnénk az összes beállítást eltüntetni!)
A html kód autómatikusan generálódik és egy új lapon megnyíló oldalon a lap közepén találjuk! Lehet nagyon hosszú is, ezért kattintsunk bele és a Ctrl+A billentyűkombinációval jelöljük ki az egészet vagy használjuk az alsó "Select All" gombot. Ezek után másoljuk ki és illesszük be a megfelelő helyre a blogunkban!
Ha modulként szeretnéd akkor a blogger Elrendezések menüpontjában kattins az "Új modul hozzáadása" gombra és válaszd ki a HTML/JavaScript modult és másold be a kódot.
A következő "where do you want the page to open" kérdésnél beállíthatod hogy a képre kattintva a link miként nyíljon meg! Ha az elsőt választod akkor a látogató az adott oldalon belül kerül majd át oda ahova a link mutat, a másik két esetben pedig új lap nyílik meg a böngészőben és ott tölt majd be a megadott oldal.
Ezek után jön a bannerek szélessége (width) és magassága (height) beállítások. Ilyenkor pixelekben gondolkodjunk. Fontos, hogy automatikusan az összes képet ekkorában fogja megjeleníteni a slider, ezért aztán érdemes a képeket előre jól átgondoltan úgy megszerkeszteni, hogy akkorák legyenek amekkorára majd a slider-t is szeretnénk. Így ugyanis nem fog lemaradni egyetlen betű sem a képekről!
Talán kevésbé tűnik fontosnak a következő beállítás, pedig talán ez az amivel mindent elronthatunk. Említettem az elején, hogy egy blogunkba mindössze 5 db Banner Slider-t rakhatunk ezzel a módszerrel. Azért van ez így, mert a "Banner Rotator Number" gyakorlatilag egy sorszámot ad a Slide Show-nak ami alapján a képek beolvasása közben a rendszer megkülönbözteti, hogy melyik képnek melyikben kell megjelennie. Egyszóval ez felel azért, hogy a rendszer ne gubancolódjon össze. Tehát ennek fényében állítsuk be ezt a számot.
Innentől már csak két lépés van hátra! A képek beállítása és a Banner Slider/Rotator generálása!
Mint mondtam 10 db képet lehet egy Slider-be belerakni! Mindegyik képhez meg kell adni három értéket!
"url for link" ide azt a linket írd ahova majd a kép kattintásával eljut az érdeklődő! vagyis a Célt!
"url of image" ide kell a képnek a linkjét berakni! Érdemes a Google Drive-ot használni, ahogy azt már az előző cikkben részletesen leírtam! Katt IDE, ha még nem olvastad!
"alt text" Ez az a szöveg ami megjelenik a kép helyett ha esetleg valami hiba folytán -internet csatlakozás vagy böngésző beállítások - nem töltődne be!
Most már csak a Generálás maradt hátra!
Ha beállítottuk az összes képet, leellenőriztük és mindent rendben találtunk akkor nyomjuk meg a téglalap alján található sötétkék "Generate" gombot! (A "Reset" gombot csak akkor használjuk,ha szeretnénk az összes beállítást eltüntetni!)
A html kód autómatikusan generálódik és egy új lapon megnyíló oldalon a lap közepén találjuk! Lehet nagyon hosszú is, ezért kattintsunk bele és a Ctrl+A billentyűkombinációval jelöljük ki az egészet vagy használjuk az alsó "Select All" gombot. Ezek után másoljuk ki és illesszük be a megfelelő helyre a blogunkban!
Ha modulként szeretnéd akkor a blogger Elrendezések menüpontjában kattins az "Új modul hozzáadása" gombra és válaszd ki a HTML/JavaScript modult és másold be a kódot.
Ennyi, ha mindent jól csináltál, egy csodálatosan működő Banner Slider-ed van! Gratulálok hozzá! :)
IDE
kattintva megtekinthetsz egy működő bannert nagyobb méretben mint ami a blogom oldalsávjában van.
kattintva megtekinthetsz egy működő bannert nagyobb méretben mint ami a blogom oldalsávjában van.
Megjegyzések
Megjegyzés küldése