Blogkészítési Tippek XI. - Gomb készítés

Gondolom sok helyen látjátok, hogy egy akció gomb mennyire profin van megcsinálva. Árnyékolva van, váltogatja a színét, átvisz egy másik oldalra. Nos, ebben a cikkben megmutatok Neked egy utat, hogy hogyan készíthetsz hasonlóan profi gombokat a blogodra, akár különböző grafikával is. Tehát egy oldalon belül akár két három különböző dizájnnal rendelkező akció gombot is szerepeltethetsz. Pofon egyszerű.


Első lépésként Kattints az alábbi gombra!




Amint rákattintottál egy profi online gomb szerkesztő felületen találod magadat. Itt érdemes eljátszani a rendszerrel és ezáltal megismerni azt.  A biztonság kedvéért egy képen összeszedtem, hogy mi mire jó. Tanulmányozd egy kicsit és utána neki látunk a saját gombod elhelyezéséhez a blogodon.


Amikor beállítottad a számodra megfelelő dizájnt kattints a "Generate CSS" gombra. Ekkor egy csúnya és hosszú kódsort kapunk. Ezt kell elsőnek elhelyeznünk a blogunkon. 

TIPP! Mindig csinálj biztonsági másolatot! Egy egyszerű txt fájlba mentsd el a kódot és nevezd el úgy, hogy ha később esetleg kell megtaláld!

1.) Első lépésként menj a bloggod szerkesztőjének "Sablon" majd "Személyre szabás" gombjára. 


Majd itt a "Speciális" almenüpontra. Ekkor megjelenik előtted egy fejér rész ahova be kell másolnod az imént kapott CSS kódot! Ha ez meg van, kattints az "Alkalmazás a blogon" feliratú gombra majd menj vissza bloggerbe és keresd meg azt az oldalt vagy bejegyzést a szerkesztőben ahol szeretnéd megjeleníteni a gombodat. 

2.) Lépésként a gomb szerkesztő felületen zárd be a CSS ablakát és kattints a "Generate HTML" gombra. Ekkor egy rövid egysoros kódot kapsz ami így néz ki:

<a href='#' class='button'>én gombom</a>


Ezt el kell helyezned annak az oldalnak vagy cikknek a html kódjában ahol megszeretnéd jeleníteni a gombot. Ezt úgy tudod megcsinálni, hogy amikor bemész ebbe az oldalba vagy cikkbe, a szerkesztő bal felső részénél kattints a "HTML" feliratú gombra. Ekkor egy eléggé ijesztő kódot fogsz látni, kivéve ha még nem írtál semmit. Akkor üres lesz. Ebben a nézetben másold be a rövid kódsort. 

A kettőskereszt helyére kell bemásolnod azt a linket ahova szeretnéd, hogy a gombod átirányítsa az olvasót. Az "én gombom"  felirat helyére akármit beírhatsz a lényeg, hogy maradj a kacsacsőrök között. 

3.) Mentsd el és már láthatod is a gombodat megjelenni a cikkedben vagy oldaladon. 

Említettem, hogy egyszerre akár több különböző kinézetű gombot is megjeleníthetsz egy cikken vagy oldalon. Ehhez mindegyikhez külön-külön CSS kódot kell generálnod a gomb készítőben és mindegyiket be kell raknod a "Személyre szabás" -nál a "Speciális" részhez. Itt jön azonban a turpisság. Mint láthatod a CSS kódot úgy kezdődik, hogy:

.button
És mindegyik CSS-nek több része is. Ott van a hover (fedett) és a pressed (megnyomott) rész is. Ezek között kell különbséget tenned. Vagyis ha három gombot akarsz különböző stílusjegyekkel, akkor az elsőt át kell hogy nevezd pl.
.button3 ra és a hozzátartozó hovert és pressed részeknél is meg kell ezt tenned.
A következő résznél pedig legyen .button2 és így tovább.
Ha ezeket beállítottad  már csak arra kell figyelned, hogy a cikk vagy oldal HTML kódjában a gomb kódrészletében a "class" után következő részt a megfelelő névre nevezd át. Ettől függ, hogy melyik gomb dizájn fog megjelenni a blogodon.
 Remélem ez érthető, de biztos vagyok benne, hogy amint megcsinálom a videót ehhez a cikkhez egyértelmű lesz minden. Addig is bármilyen kérdésetek van, írjatok nyugodtan!



Megjegyzések