Tudjuk nem a külső számít, de azért valamilyen szinten fontos, az kelti az első benyomást és valamilyen kép már kialakul a másikról bennünk. Tény, hogy lehet aztán kiderül, nem kellett volna a külső alapján ítélni, azonban az is tény, hogy az öltözködésünkkel, hajunkkal, sminkünkkel igyekezzük magunk kifejezni. Ugyanígy van szerintem a blogoknál is, ha az első pillantás nem szimpatikus lehet továbbkattintunk, pedig a tartalom nagyon is értékes és szerintem az is nagyon fontos, hogy a blog kinézete tükrözzön minket, stílusunk, ízlésünk! Próbálok egy kis segítséget nyújtani ebben a bejegyzésben, hogy olyan lehessen a blogotok, amilyet szeretnétek, mert van amikor tudjuk mit szeretnénk, de nem jön össze, nem tudjuk, hogy kéne nekiállni, utánakeresni.
Betűtípusok:
Több oldal is van, ahol különböző betűtípusokat tudunk letölteni. Akadnak oldalak, ahol ingyen: www.1001freefonts.com, www.fontsquirrel.com/fonts/list/popular, www.dafont.com. A legutolsót használom, ha jól emlékszem már általános óta. Rengeteg betűtípus van, órákon át lehet keresgélni. Az ingyenesek mellett vannak olyanok is, amikért fizetni kell, ilyet most nem linkelnék, ha valaki ilyet keres a font type dowload kulcsszóra a google nagyon sok oldalt kiad.
Ha letöltöttük a betűtípust, annyi a dolgunk, hogyha be van csomagolva kicsomagoljuk, majd bemásoljuk a vezérlőpult / megjelenés és személyre szabás / betűkészlet / betűtípusok előnézete... helyre és már használhatjuk is. Ha egy - egy képszerkesztő meg van nyitva miközben installáljuk a betűtípust, akkor valószínűleg újra kell indítanunk a programot, hogy ott is megjelenjen.
Blog hátterek
Sok blogon sima fehér vagy egyszínű háttér van, azonban nagyon jól tud kinézni és feldobja az oldalt egy-egy színesebb. Ha nem magunknak készítünk, akkor a neten is rengeteg szépet találni pl. a www.leelou-blogs.com/type/blog-backgrounds?style&color, www.shabbyblogs.com/design/blogger-backgrounds/ vagy www.thecutestblogontheblock.com/category/backgrounds/ oldalakon.
Blog sablonok
A bloggeren kb. 30 sablon található, amik között akadnak jók is. Ezeket kicsit alakítgatva egész jó kis kinézetet hozhatunk össze, már anélkül, hogy értünk is egy kicsit a html-hez, de ezeken azért általában van mit alakítani, ahhoz pedig már jó, ha egy kicsit (vagy nem is kicsit) értsünk a kódhoz. Ha ezekhez annyira nem értünk, akkor sincs gond, hiszen sablonból is van fenn tömérdek a neten és az ingyenesek között is remek darabokat találni. www.btemplates.com és www.mybloggerthemes.com oldalon rengeteg van.
Facebook like box, tetszik, megosztás gomb...
A Facebook saját oldalán - https://developers.facebook.com/docs/plugins?locale=hu_HU - bárki legenerálhatja a kódokat a saját Facebook oldalával, itt a közösségi modulok menüpontban (a link alapból oda mutat) található minden.
Amit én használok az a tetszik mező (like box), az oldalsávba tettem ki. Ennél meg kell adni a blogunk Facebook oldalát, megadhatjuk a szélességét, magasságát beállíthatjuk, hogy mutassa-e az emberek képeit és/vagy a blogposztjaink, legyen-e keret, fejléc. Ha elkészítettük a like box-unk, akkor a Get code megadja a kódot, amit majd a blog megfelelő részére kell betenni. Régen én a HTML5 kódot használtam, de most valamiért nem engedte, itt a sablon/ HTML szerkesztésére kell menni a blogon, majd ahogy írja is <body> után kell bemásolni a felső kódsort. (Gyors tipp a megtalálására: álljatok bele a kódba, nyomjatok egy ctrl+f-t és írjátok bele a body szót, így gyorsan meglesz hová kell írni). Az elrendezésnél egy alapmodult, a HTML/Javascript modult kell hozzáadni és ebbe másolni az alsó kódot. Ha nem az oldalsávba, hanem mondjuk egy bejegyzésbe akarjuk tenni, akkor oda kell bemásolni a kódot. Na így nem sikerült nekem most, de az IFRAME kóddal igen, ráadásul egyszerűbben. A HTML/Javascript modulba egyszerűen be kell másolni azt az egy kódot, amit kiad.
A többivel kapcsolatban nincs tapasztalatom, de minden szépen le van írva (angolul).
Instagram photo gallery widget
Többféle instagram-os "doboz" létezik, ezek közül most az általam használtat mutatom meg. Ha valaki másmilyenre vágyik, akkor Google-ben talál még jó párat. iconosquare.com/promote.php#blocWidget oldalon lehet legenerálni a kódot, itt is alakíthattok rajta kedvetekre, mint a Facebook like box-nál.
Az elkészült widget kódját ugyanúgy, a HTML/Javascript modulba kell bemásolni, és kész is.
Youtube
Többféle instagram-os "doboz" létezik, ezek közül most az általam használtat mutatom meg. Ha valaki másmilyenre vágyik, akkor Google-ben talál még jó párat. iconosquare.com/promote.php#blocWidget oldalon lehet legenerálni a kódot, itt is alakíthattok rajta kedvetekre, mint a Facebook like box-nál.
Youtube
Kevesebbeket érint, de azért leírom ezt is. A lenti kódot kell beilleszteni ahová szeretnénk, egyedül a GoogleDevelopers részt kell a csatornánk nevével helyettesíteni.
<script src="https://apis.google.com/js/platform.js"></script> <div class="g-ytsubscribe" data-channel="GoogleDevelopers"></div>
Facebook, instagram... elérhetőség ikonok (képek oldalsávba linkkel ellátva)
Ilyen ikonokat mi magunk is készíthetünk képszerkesztővel, de a google-be social media icons kereső szóra (vagy egyéb hasonló kereső szavakra) nagyon sokfélét kiad. Ezeket a képeket valahová fel kell töltenünk, hogy később az URL címükre tudjunk hivatkozni.
A már többször említett HTML/Javascript modult kell ismét használnunk és a következő kódot:
<a href="https://www.facebook.com/BeautySecretsFromNora">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhU1zJ3VPZ4vMeFFLCzDZcDqxMhG-RCet5BoUfpY58rQYViHQC7Z7xf4A7U4Ak8jUZxthyphenhyphenTG_gO8T_DsEyRqZT1BLRJq9cH4IW7hR7HufLnWBzbzkiGlqsPSvtMv9bgmIcCrZrfwQ04Qo7S/s1600/facebookicon.png" /></a>
A lilával jelölt részeket kell értelemszerűen kicserélni. Ahány ikonunk van, annyiszor ismételjük a kódot. Ezzel a kóddal tehetünk tehát be képet, és az első sorával adhatjuk meg a linket, hogy hová mutasson, de ezt el is hagyhatjuk, ha sima képet szeretnénk link nélkül.
Ehhez kapcsolódóan találtam egy olyat, amikor fennt a fejléc fölött jellennek meg ezek az ikonok: www.addthis.com/get/follow-header . Regisztrálni kell, de ingyenes.
Tipp: Ahhoz hogy, hogy középre legyen rendezve egy kép, szöveg, stb. használjuk a <div class="separator" style="clear: both; text-align: center;"> kódot az összes azt követő kód előtt.
Pár egyéb widget:
Pinterest - https://business.pinterest.com/en/widget-builder#do_pin_it_button
Bloglovin - http://www.bloglovin.com/en/widgets
Menüsor
Mostanra ti is kitalálhatjátok, hogy mit fogunk használni ehhez, csak úgy mint eddig a HTML/Javascript modult, csak az elrendezésnél most nem az oldalsávba kell húznunk, hanem a fejléc alá. A kód pedig a következő:
<ul class='menu' id='menu-mainmenu'>
<li><a href='#'>Menu1</a>
<ul class='sub-menu'>
<li><a href='#'>Sub-Menu1</a></li>
<li><a href='#'>Sub-Menu1</a></li>
</ul>
</li>
</ul>
A #-ek helyére kell betenni a linket, ahová a menü mutasson. Bloggeren úgy oldható meg a különböző posztok menükbe sorolása, hogy az adott menübe tartozó bejegyzéseket ugyanazon címkével látjuk el, és annak a linkjét írjuk ide. Pl. http://beautysecretsfromnora.blogspot.hu/search/label/outfit
A menüpontok neveit a Menu1 helyére kell beírni, az almenüpontokat értelemszerűen a Sub-Menu1 helyére. Akárhány menüpontot, illetve hozzájuk tartozó almenüpontot létrehozhatunk. Az első sor és az utolsó sort a fenti kódból írjuk fel és ezek közé tegyük a többit, azaz a <li><a href='#'>Menu1</a> kódot kell annyiszor ismételnünk ahány menüpontot szeretnénk. Amelyik menüponthoz pedig almenüt szeretnénk az alá a sor alá illesszük ezt a kódot:
<ul class='sub-menu'>
<li><a href='#'>Sub-Menu1</a></li>
<li><a href='#'>Sub-Menu1</a></li>
</ul>
Itt jelenleg két almenüpont van, ha kevesebbet szeretnénk töröljünk egy <li><a href='#'>Sub-Menu1</a></li> sort, ha többet akkor az ilyen sorok alá, az </ul> elé másoljunk be még annyit ebből a kódból: <li><a href='#'>Sub-Menu1</a></li>.
Példák:
Sima menü:
<ul class='menu' id='menu-mainmenu'>
<li><a href='link1'>Home</a>
<li><a href='link2'>TEST</a>
<li><a href='link3'>BEAUTY</a>
<li><a href='link4'>OUTFIT</a>
</ul>
Legördülő menü:
Itt tehát 4 menüpontunk van, home, test, beauty és outfit és a test menüpontból nyílik 3, az outfitből pedig 2 almenüpont.
ul class='menu' id='menu-mainmenu'>
<li><a href='link1'>Home</a>
<li><a href='link2'>TEST</a>
<ul class='sub-menu'>
<li><a href='Link21'>Hajápolási termékek</a></li>
<li><a href='Link22'>Sminktermékek</a></li>
<li><a href='Link23'>Arcápolási termékek</a></li>
</ul>
<li><a href='link3'>BEAUTY</a>
<li><a href='link4'>OUTFIT</a>
<ul class='sub-menu'>
<li><a href='Link41'>Elegáns</a></li>
<li><a href='Link42'>Hétköznapi</a></li>
</ul>
</ul>
You might also like / hasonló bejegyzések felajánlása blogbejegyzés alatt
Ha rátaláltok egy blogra, majd elkezditek követni, visszanézitek a régi bejegyzéseket? Egy darabig talán, de nem teljesen. Emiatt is hasznos lehet ha a bejegyzések alatt hasonló bejegyzéseket mutatunk az olvasóknak. Illetve ha egy új olvasó rátalál egy bejegyzésünkre, lehet ha elolvasta be is zárná az oldalunk, így viszont lehet valamelyik hasonló bejegyzésünk is felkelti a figyelmét. A www.linkwithin.com/learn oldalon könnyedén hozzá tudjátok ezt a modult adni a blogotokhoz.
A menüpontok neveit a Menu1 helyére kell beírni, az almenüpontokat értelemszerűen a Sub-Menu1 helyére. Akárhány menüpontot, illetve hozzájuk tartozó almenüpontot létrehozhatunk. Az első sor és az utolsó sort a fenti kódból írjuk fel és ezek közé tegyük a többit, azaz a <li><a href='#'>Menu1</a> kódot kell annyiszor ismételnünk ahány menüpontot szeretnénk. Amelyik menüponthoz pedig almenüt szeretnénk az alá a sor alá illesszük ezt a kódot:
<ul class='sub-menu'>
<li><a href='#'>Sub-Menu1</a></li>
<li><a href='#'>Sub-Menu1</a></li>
</ul>
Itt jelenleg két almenüpont van, ha kevesebbet szeretnénk töröljünk egy <li><a href='#'>Sub-Menu1</a></li> sort, ha többet akkor az ilyen sorok alá, az </ul> elé másoljunk be még annyit ebből a kódból: <li><a href='#'>Sub-Menu1</a></li>.
Példák:
Sima menü:
<ul class='menu' id='menu-mainmenu'>
<li><a href='link1'>Home</a>
<li><a href='link2'>TEST</a>
<li><a href='link3'>BEAUTY</a>
<li><a href='link4'>OUTFIT</a>
</ul>
Legördülő menü:
Itt tehát 4 menüpontunk van, home, test, beauty és outfit és a test menüpontból nyílik 3, az outfitből pedig 2 almenüpont.
ul class='menu' id='menu-mainmenu'>
<li><a href='link1'>Home</a>
<li><a href='link2'>TEST</a>
<ul class='sub-menu'>
<li><a href='Link21'>Hajápolási termékek</a></li>
<li><a href='Link22'>Sminktermékek</a></li>
<li><a href='Link23'>Arcápolási termékek</a></li>
</ul>
<li><a href='link3'>BEAUTY</a>
<li><a href='link4'>OUTFIT</a>
<ul class='sub-menu'>
<li><a href='Link41'>Elegáns</a></li>
<li><a href='Link42'>Hétköznapi</a></li>
</ul>
</ul>
You might also like / hasonló bejegyzések felajánlása blogbejegyzés alatt
Ha rátaláltok egy blogra, majd elkezditek követni, visszanézitek a régi bejegyzéseket? Egy darabig talán, de nem teljesen. Emiatt is hasznos lehet ha a bejegyzések alatt hasonló bejegyzéseket mutatunk az olvasóknak. Illetve ha egy új olvasó rátalál egy bejegyzésünkre, lehet ha elolvasta be is zárná az oldalunk, így viszont lehet valamelyik hasonló bejegyzésünk is felkelti a figyelmét. A www.linkwithin.com/learn oldalon könnyedén hozzá tudjátok ezt a modult adni a blogotokhoz.
Ha van még bármi kérdésetek, írjatok nyugodtan, ha tudok válaszolok rájuk.
Remélem hasznos volt számotokra ez a bejegyzés és szebbé, csinosabbá tudjátok tenni a blogotok!
beautysecretsfromnora@gmail.com
Köszönjük szépen. Pontosan ezeknek és ehhez hasonló dolgoknak a keresésével és beépítésével töltöttem az elmúlt napokat:) Ez a menüs dolog egy elsőre nekem kínai, de majd megnézem alaposabban. Te egyébként otthon vagy ebben a kódolásos dologban?:)
VálaszTörlésNem olyan bonyolult, mint amilyennek tűnik a menüs :)
TörlésHát annyira nem vagyok otthon, nem tanultam weblapszerkesztést, csak totál más nyelven programozni, talán ennek is köszönhetően valamennyire értem a kódot. Pl. magamnak írni egyet nem tudnék, de ha van egy azt elég jól alakítgatom.
Ez nagyon hasznos bejegyzés- jó hogy szántál rá időt (:
VálaszTörlésEnnek örülök :))
TörlésKöszönjük Nóri! ♥
VálaszTörlés♥
TörlésA bejegyzés nagyon jó, és hasznos.. De én nem tudtam megcsinálni sem a facebookot, se semmit:( Emiatt kicsit csalódott vagyok. Nálam a kódok okozzák a problémát..
VálaszTörlésÍrj rám, majd segítek :)
Törlésnagyon köszi a bejegyzést, egész nap a legördülő menü megalkotásával szórakozom.. bár még most sem sikerült, mert csak simán beteszi alá a pontokat, nem értem miért. :(
VálaszTörlésLehet nem minden sablonhoz lehet legördülő menüt csinálni, nem tudom. De azt hiszem rájöttem mi lehet a baj. Kijavítottam azt a részt, mert egy dologra nem figyeltem. Ha úgyse működik esetleg elküldöm az enyém mintának, hátha jó lesz.
TörlésKöszönjük <3
VálaszTörlés♥
TörlésNa ez talált! :) Nagyon köszi Nóri! :)
VálaszTörlésSzuper! Nagyon szívesen! :)
TörlésEzt a megjegyzést eltávolította a szerző.
VálaszTörlésEzt a megjegyzést eltávolította a szerző.
VálaszTörlésHú köszi Nóri! Ez nagyon hasznos bejegyzés volt.. sokat segítettél :)
VálaszTörlésSzuper, örülök, hogy hasznos volt. :)
TörlésKöszöööööönööööm! Nagyon jól elmagyaráztad..még én is, mint kezdő meg tudtam érteni...még kis nehézségeim vannak a címkékkel, de gondolom majd jobban működik, ha több bejegyzésem lesz. Annyira örülök, hogy sikerült a menüt beállítanom!
VálaszTörlésNagyon szívesen! Örülök, hogy érthető és hasznos lett! :)
VálaszTörlésAz utóbbi időben rengeteget szerkesztem a blogot mert pár nap múlva úgy érzem hogy kell valamit rajta csiszolnom és ezzel a bejegyzéssel végre sikerült a Facebook-ot kirakni úgy hogy ezer hálám <3
VálaszTörlésPuszi: Réka
jaj de jó ez a blog :) Épp a menüvel meg a kinézettel szerencsétlenkedem :D Köszi a segítséget.
VálaszTörlésjaj de jó ez a blog :) Épp a menüvel meg a kinézettel szerencsétlenkedem :D Köszi a segítséget.
VálaszTörlésEzt a megjegyzést eltávolította a szerző.
VálaszTörlésCsodálatos dolgokat írtál, és sokat segítettél, de nekem a legördülő menü sehogy sem akar összejönni. Nagyon sok oldalon kerestem lehetőségeket és nagyon ellenáll az oldalam. :/ Lehet, hogy a blogger nem akar együttműködni? :D
VálaszTörlésSzia!
VálaszTörlésA You might also like- dobozt szeretném a bejegyzések alá megcsinálni, és a feliratot kiírja de bejegyzést sajna nem jelenít meg alatta. Tudnál segíteni esetleg? :)
Szia! Ezeket a kódokoat ohva kell beírni? Elég kínai nekem ez így, sehigyse jön össze:(
VálaszTörlésSzia!
VálaszTörlésNagyon köszönöm ezt a bejegyzést, nagyon hasznos volt! A legördülő menüsort készítettem el ma, és végre a mobilnézetben is rendesen megjelenik! :)
Szerencsére a 'You might also like' rész benne van a blogom sablonjában, de például van az oldalsó ikonokra könnyebb megoldás is: én úgy készítettem el (egy blog segítségével), hogy egy bejegyzésbe beillesztettem a képeket, és hozzáadtam a linkeket - majd ennek a html kódját helyeztem el az oldalsávba. Meglepődtem, mivel tökéletesen jelent meg nálam is elsőre, pedig nagyon könnyen elrontom a dolgokat. :D
Viszont párszor biztosan visszatérek legalább ehhez a bejegyzésedhez! :)