Blogkészítési Tippek IV. Rész - Lap tetejére gomb!

Folytatom tehát az okítást a design-ok terén. Átgondoltam és átkereszteltem a cikksorozatot "Honlapkészítési Tippek"-ről "Blogkészítési Tippek"-re. Ennek egyszerű oka van. A blogom felépítését és elemeinek elkészítését mutatom be, így ez a relevánsabb kifejezés. Remélem senki nem haragszik meg érte. 

Az előző részben megmutattam, hogy miként tudtok Facebook Like Box-ot vagy Like Gomb-ot elhelyezni a blogotokon. Most folytatom tovább a blogom szétcincálását és megmutatom nektek, hogy miként kell "Lap Tetejére" gombot csinálni. Ez egy nagyon hasznos gomb aminek az a funkciója hogy rákattintásával az olvasó azonnal az oldal tetején találja magát. Nálam ezt a blogom jobb oldalán találjátok. Fekete alapon fehér nyíl. Nyugodtan ki lehet próbálni, ha legörgettek az oldal aljára vagy felére, majd a rákattintotok a nyílra, azonnal a lap tetején találjátok magatokat. Ezért is hívják ezt "Lap Tetejére" gombnak.

Az elhelyezése rendkívül egyszerű. Az elrendezésre kattintva hozzá adsz egy modult. Ez esetben a "HTML/Javascript modul lesz az amire szükségünk van. Kattints rá majd a szöveg részbe másold be ezt a linket:

<a href="#"><img src="https://googledrive.com/host/0B-S4pH3OnKgvcDdoa0ZiLTNDY2s/1416201730_aiga_uparrow_inv-128.png" border="0"  align="right" alt="lap tetejére" title="Ugrás a lap tetejére" style="bottom:0px; right:60px; z-index:100; position:fixed; width:45px; height:45px;  "/></a>

Címnek nem kell semmit sem beírnod, így nem fog fölöslegesen megjelenni sehol sem egy nem oda illő szöveg. Ettől azonban még a modul el fog foglalni némi helyet. 

Ezzel a módszerrel pontosan ugyanolyan gombod lesz mint amilyen nekem is van. Sok mindent lehet azonban állítani rajta. Megmutatom, hogy miket!

Tudjátok cserélni a képet. Ehhez azonban azt a képet valahonnan seedelnetek kell .Ezt megtehetitek a Google Drive alkalmazásból, ami minden gmail fiókkal rendelkező felhasználónak van. Keressetek rá Google-ben, jelentkezzetek be a gmail címetekkel és jelszavatokkal majd töltsetek fel egy képet. 

Ezt így tehetitek meg:

Ha rákattintottatok a feltöltés ikonra válasszátok a "Fájlok" menüpontot. Így egyesével ki tudjátok választani a kipróbálni kívánt képeket. Feltöltés után még van egy nagyon fontos dolog amit meg kell tenni mielőtt beillesztenénk a forráskódba a kép url kódját. Nyilvánosan meg kell osztani a képet. Persze ezt is megmutatom. Amint feltöltődött, vagy feltöltődtek a képek válasszunk ki egyet és kattintsunk a sorára jobb egérgombbal. Majd kattintsunk a megosztás menüpontra!

Ekkor felugrik egy ablak amely alapvető megosztási lehetőségeket ajánl fel neked. Ez azonban nem elég. Keresd meg a felugró ablak jobb alsó sarkában a "Haladó" gombot és kattints rá. Bátran, nem történik majd semmi különös, csupán egy picit bonyolultabb kezelő felületet látsz majd magad előtt. 

Itt találsz majd a felső sorban - valószínüleg előre kékkel kijelölve - egy megosztási url-t. Ez azonban nem az amire szükséged van. 

A Google+ és egyéb ikonok alatt több beállítási lehetőség is van. A legfelső sorban kell átállítanod a hozzáférést nyilvánosra. Ezt majd minden fájlal meg kell tenned kivéve akkor, ha egy mappába teszed őket és a mappa eleve nyilvánosra van állítva. 

Erre azért van szükség, hogy ne csak Te vagy azok lássák a képet akiknek hozzáférésük van, hanem bárki aki a blogodra téved. 

Ezek után a kép csere gyerek játék. Nyomj a kék "KÉSZ" gombra. Kattints a kiválasztott kép neve mellé a saját sorában bal egérgombbal. Ekkor már ott kellene lennie halvány betűkkel, hogy "Megosztva". Ekkor a képernyő jobb oldalán megjelenik egy szürkés oszlop a tetején két menüponttal. Neked a "Részletek"-re lesz szükséged. Katt rá! Itt láthatod a képet, a leírást ha van hozzá, a dátumot, hogy milyen mappában van és a tárhelyet ahol található. Ez az ami kell majd a "TÁRHELY"!! Itt egy kék linket találsz amit ki kell hogy másolj teljes egészében. Majd beillesztened a fent mutatott kódba a megfelelő helyre. IDE:

A szürkével kiemelt rész helyére kell bemásolnod a linkedet és máris kicserélted "Lap Tetejére" gombod képét. Persze csak mentés után. Remek képeket találhatsz ezen az oldalon: Pixabay

Ez egy olyan oldal ahonnan a képeket bejelentkezés után ingyenesen letöltheted és látod azt is, hogy esetleg van-e rajta bármiféle jogdíj! Ez fontos, figyelj rá!

Mostmár csak a stíluson tudsz változtatni. A kódba nyugodtan belenyúlhatsz amivel a következő változtatásokat érheted el

border: ezzel keretet adhatsz a képednek, pixelekben mérve

align: ez a kép helyét jelöli, hogy jobb vagy bal oldalon legyen. nálam "right" , tehát jobb oldalon van, ha Te balra szeretnéd, akkor írd ezt át "left"-re

alt: ehhez ne nyúlj!

title: Ez mutatja meg a gomb funkcióját, ha ráviszed az egeredet és nem kattintasz. Ez a címe a gombnak.

style: ehhez se nyúlj!

right: 60 px - ez mutatja a képernyő szélétől való távolságot! Lehet vele játszani, észrevehető a változás!

A z-index és a position funkciókat egyelőre ne bolygassuk! Ezektől marad a gomb a képernyő alján folyamatosan. 

width: ezzel állíthatod a kép szélességét

height: ezzel állíthatod a kép magasságát! Természetesen mindkettő pixelekbe (px) nézi az értéket.

Bátran lehet változtatgatni az értékeket! Semmi sem visszafordíthatatlan! Ha esetleg nem működik, csak töröld a modult és kezd elölről, de még jobb ha rá jössz a hibára és kijavítod!!

Amennyiben kérdésed adódott, felteheted a cikk alatt vagy privátban a Kapcsolat menüpontban! 

Most már videón is megtekintheted a "Lap tetejére" gomb elhelyezését a youtube-on! 

Megnézem a videót