Közösségi média ikonok elhelyezése a Bloggerben | Kódolás és fényképmegosztó weboldal nélkül

Orbán Szilvi | június 24, 2014
Régóta szerettem volna elhelyezni az oldalsávban egy ilyen kis készletet, hogy még könnyebben elérhetőek legyenek a különböző platformok, ahol jelen vagyok. A neten találtam is rengeteg oldalt - többnyire angol nyelven -, de mindenhol az volt az első, hogy kell hozzá egy képmegosztó weboldal (ilyen pl. a Photobucket, Flickr, stb.). Na bumm, és mi van, ha én nem szeretnék ezzel bíbelődni? A másik része pedig a kódolás. Noha én már kicsit jobban értek hozzá (nem vagyok profi), ennek ellenére szerettem volna már végre ezt is kikerülni, ugyanis a napokban mást sem csináltam csak kódokat böngésztem, jegyzeteltem, módosítottam. Aztán végre rám mosolygott a szerencse és találtam egy oldalt, ahol a szerző egy videó keretében mutatja meg, hogy hogyan lehet kikerülni a kódolást és a képmegosztó weboldal bevonását. A dolog sokkal egyszerűbb, mint gondoltam :) Igaz ezzel is meggyűlt a bajom az elején és kihullott néhány hajszálam, de rájöttem a technikára és tizedjére már egy perc alatt megvoltam vele :) S hogy ti megspóroljátok a szenvedést vele, leírom, hogy hogyan is kell csinálni ;) 
Az eredeti videót ITT találjátok, akár ez alapján is megcsinálhatjátok, aki ért angolul könnyen eligazodik rajta (eléggé szájbarágósan csinálja), de az én szegényes angolommal is könnyen megértettem, hogy mit akar. 

Szóval az első dolgunk az, hogy keressünk egy nekünk tetsző és a bloghoz illeszkedő közösségi média készletet. Én INNEN töltöttem le, de ITT is találtok egy szettet különböző színekben. Megjegyzem, hogy lehet találni különböző effektekkel rendelkező készletet is, de ezt sajna nem tudom, hogy működik-e ezzel a módszerrel. Én egy sima, mezei készletet választottam, nem volt szükségem semmilyen különleges effektre, az amúgy is csak lassíthatja a blogot. 
Ha már megvan a készlet és le is töltöttük, ha szükség van rá, méretezzük át őket egy képszerkesztő programmal. Én 36px-esre méreteztem át, ez felelt meg a legjobban, de akár hagyhatjátok ugyanabban a méretben, mint amiben letöltöttétek.


Ezután a bloggerben menjünk az Új bejegyzésre, mintha egy új posztot írnánk, de később nem fogjuk publikálni. Az írás módban legyünk és ne a HTML módban. Menjünk a kép beillesztésére (kis kép ikon) a menüsorban. 

Töltsük fel azokat az ikonokat, amiket használni szeretnénk (egy készletben lehetnek olyan ikonok is, amiket itt Magyarországon nem szoktunk használni, illetve nem biztos, hogy mindre szükségünk van). Az összeset töltsük fel, de majd csak egyenként illesszük be a bejegyzésbe! A videóban egyszerre illeszti be az ikonokat, de nekem ez nem vált be, mert csak felidegesített, ugyanis nem tudtam úgy egymás mellé pakolni őket, ahogy én szerettem volna. Nekem az vált be, hogy egyenként illesztettem be őket, szépen sorban egymás után. 


1. Kiválasztom pl. a Facebook ikont, és beillesztem. Mivel a képet eleve linkként illeszti be a blogger, így most egyelőre leveszem róla a linket, hogy könnyebb legyen mozgatni.


2. Ezután ütök egy szóközt. Ha kicsit több helyet szeretnénk hagyni köztük, akkor üssünk le több szóközt. 



3. Ezután kiválasztom a következő ikont, amit szintén beillesztek, és az egérrel a lehető legközelebb viszem az előz ikonhoz. Róla is leveszem a linket, így azonnal a rendes helyére fog kerülni. 

4. Szintén ütök annyi szóközt, amennyire szükség van.
5. Az előző 4 lépést megismétlem annyiszor, ahány ikont szeretnék használni. 


Szerencsére a blogger eleve középre illeszti be a képeket, s mivel az oldalsávban is úgy néz ki a legjobban, ha középen van, így ezzel nincs dolgunk, nem kell formáznunk. 

Ha megvannak az ikonok, nincs más dolgunk, mint ellátni őket a megfelelő linkekkel. Megkönnyíthetjük a dolgunkat, ha előre megnyitjuk az összes oldalt a böngészőnkben, így nem megy el az idő feleslegesen míg minden oldalt egyenként megnyitunk. CTRL+C kombinációval másoljuk ki az elérhetőséget (URL-t).



Kattintsunk a megfelelő ikonra, majd adjuk hozzá a linket. Én szeretem, ha minden link új lapon nyílik meg, én ki szoktam ezért pipálni azt is. Ugyanezt ismételjük meg a többi ikonnál is. Ezután érdemes egy mentést csinálni, nehogy kárba vesszen fáradozásunk. :) De NE publikáljuk!


Ezután váltsunk át HTML módba. Ha sok <br /> -t látunk a végén, akkor töröljük ki és csak egyet hagyjunk meg. Jelöljük ki az egészet (CTRL+A kombinációval), majd másoljuk ki. Akár be is zárhatjuk ezt az oldalt, de nyitva is hagyhatjuk. Mivel én most csak a Facebookhoz adtam linket, így nálam csak egynél van webcím (homályos rész), de nálatok mindegyiknél ott lesz, ne ijedjetek meg, hogy nektek másképp néz ki. :))



Menjünk vissza a Tervezőbe és válasszuk ki az Elrendezés menüpontot és adjunk hozzá egy új modult, mégpedig a HTML/JavaScript modult.


A felugró ablakba illesszük be a kimásolt kódot. Nem kötelező neki nevet adni, de pl megadhatjuk, hogy: Itt követhetsz, Elérhetőségek, stb. Mentsük el. A kész modult húzzuk oda, ahol el szeretnénk helyezni, nézzük meg előnézetben, hogy jól mutat-e és ha minden rendben, akkor mentsük el az elrendezést. A végeredmény (nem ugyanazokkal az ikonokkal, mint amit fentebb példaként csináltam) a blogom oldalsávjában látható :) 

Leírva sokkal hosszadalmasabbnak tűnik, mint amilyen kevés idő kell neki valójában, de ha pontosan úgy csináljátok, ahogy le van írva, akkor hamar megvan. 

Kinek melyik a szimpatikusabb? Ez vagy a kódolásos + képmegosztó weboldalas? Sikerült érthetően megfogalmaznom? Aki kipróbálta, annak sikerült?

63 megjegyzés:

  1. Jaaajjjjj, kösziikösziiköszii!! :D Már rég kerestem, hogy hogy is kéne ezt megcsinálni!! Most végre én is elkészítem!!! :D kösziiiii :D

    VálaszTörlés
    Válaszok
    1. Igazán nincs mit, majd írd meg, hogy sikerült-e :)

      Törlés
    2. Sikerült!! :D Még egyszer kösziii :D :D http://dorottyasmink.blogspot.hu/

      Törlés
  2. Azt hiszem ez nagyon sokaknak hasznos lesz! :D

    VálaszTörlés
  3. Nagyon köszi!!! Érthető, világos és basszus pofon egyszerű. Leírva nem tűnik annak de az. Köszönjük még egyszer :))

    VálaszTörlés
  4. Kész is, nagyjából negyed óra volt az egész. Nem próbáltam a másik módszert, de ennél nem lehet egyszerűbb :)
    http://chlafe.blogspot.hu/

    VálaszTörlés
    Válaszok
    1. Az sem olyan bonyolult, s nem tudom meddig tartana, lehet, hogy gyorsabb megoldás, viszont ennél nem kell a kódokban elmerülni :) az igazi kihívást talán az ikonok egymás mellé varázsolása jelent, de a módszerem szerintem beválik mindenkinek :)

      Törlés
  5. Nagyon érthetően írtad le Szilvi! Ügyes vagy, azért látszik is a blogon, hogy nem kevés munkád van a kinézetében! :) Majd egyszer én is neki esek ezeknek a média ikonoknak, csak legyen hozzá időm, meg türelmem :)

    VálaszTörlés
  6. Köszönjük szépen, ismét hasznos volt! :))
    ( Ha szeretnéd megtekinteni ifjú padavanod szenvedéseinek eredményét - ugyanis a Drop down menüt és a közösségi ikonos menüt is a te leírásaid alapján készítettem belinkelem az oldalam: http://vallaldmagad.blogspot.hu/ )
    Szuperek ezek a blogos bejegyzések, akkor is ha nem ennek van a legnagyobb olvasóközönsége érthető okokból... :)

    VálaszTörlés
    Válaszok
    1. Hű nagyon jó lett a menüsor! Örülök neki, hogy hasznosnak bizonyult ez a két bejegyzésem és sikerült mindkettőt megcsinálni, ügyes vagy! :)

      Törlés
  7. Istenem.... Annyira jó, hogy vagy <3 :) PONT ezt kerestem égen-földön, hogyan lehet megcsinálni! Örülök, hogy megosztottad velünk részletesen! Neki fogok állni pár tétel tanulása után :)

    VálaszTörlés
  8. Valahogy én is így voltam vele :) de nem hagyott nyugodni a dolog és addig kutattam, míg nem találtam rá egy megoldást :) örülök, hogy hasznos volt ;)

    VálaszTörlés
  9. Érthető és tömör. Nagyon hasznos volt, köszönet érte :)))

    VálaszTörlés
  10. Régóta kerestem, hogyan lehet ezt megjeleníteni a blogon, nagyon sokat segített a bejegyzés, köszönöm, hogy megírtad! :)

    VálaszTörlés
    Válaszok
    1. Örülök, hogy hasznos volt és sikerült megcsinálni :)

      Törlés
  11. Szia. Köszi szépen a bejegyzést, pikk-pakk sikerült megcsinálnom. Egy kis bibi van nálam, nem tudom, hogy az e-mailes ikonnál milyen linket helyezzek el? Ahogy én gondoltam az nem vált be, az össze többi viszont teljesen jól működik. :)

    VálaszTörlés
    Válaszok
    1. Szia!
      Az emailnél a következőt kell beírni: mailto:email címed :)
      Örülök, hogy sikerült megcsinálni! :)

      Törlés
  12. Szia én eddig nem tudtam hogy kell és végre megtaláltam a blogod ahol részletesen le van írva :)) Köszönöm szépen! http://lauradiyblog.blogspot.hu/

    VálaszTörlés
    Válaszok
    1. Örülök, hogy hasznodra vált, megnéztem, jó lett :)

      Törlés
  13. Köszi köszi! Nagyon hasznos és átlátható volt, sikerült elkészíteni!
    http://ll-beauty.blogspot.hu/ :)

    VálaszTörlés
  14. Nagyon hasznos poszt, örülök, hogy valaki gondolt erre is! :)

    VálaszTörlés
    Válaszok
    1. Muszáj volt utánanéznem, mert ez így nekem sokkal egyszerűbb volt, de örülök, ha másnak is hasznos volt :)

      Törlés
  15. Köszönöm szépen! Most már nekem is van ilyenem :)

    VálaszTörlés
  16. Ezer köszönet érte!!!!!!

    VálaszTörlés
  17. Szia! Ask.fm-en írtad meg a linkjét ennek a posztodnak és nagyon hálás vagyok érte. Bár megtaláltam angolul a videót, de azért így magyarul könnyebb volt :) Szóval végül sikerült megcsinálnom, kicsi egyedi ikonokkal ugyan de kész lett. Köszönöm!

    VálaszTörlés
    Válaszok
    1. Méretezni át lehet, egy képszerkesztő progi kell hozzá :) Örülök hogy hasznos volt :)

      Törlés
  18. Nagyon köszönöm a leírást! Teljesen érthető volt. Elolvasni tovább tartott, mint megcsinálni. :) Igazán hálás vagyok ezért a cikkért!

    VálaszTörlés
  19. Régóta szerettem volna én is ilyen ikonokat, de egyszerűen sehol nem találtam jó leírást. Köszi a bejegyzést, a segítségeddel gyerekjáték volt megcsinálni! :)

    VálaszTörlés
  20. Szuper, nagyon köszi! Mennyivel feldobja a blogot:) És persze a követők számát is :D
    Nagyon jól leírtad, simán meg tudtam csinálni :)

    VálaszTörlés
  21. Köszönöm én is, sokat segítettél nekem :)

    VálaszTörlés
  22. Oh istenem, hogy mennyit kerestem ezt! :D Köszönöm a segítséget ♥

    VálaszTörlés
  23. Hihetetlen hasznos volt, köszönöm. Még egy igazi dummy (én) is meg tudta csinálni :) Örök hálám! :)

    VálaszTörlés
  24. Szia!
    Köszi! Nélküled elvesztem volna! :* <3

    VálaszTörlés
  25. Kedves Szilvi!
    Nagyon köszönöm én a leírást, sikerült!!:) még azt szeretném kérdezni, hogy a követők-rendszeres olvasást hogyan tudom beállítani? Eddig sehogy sem sikerült:/

    Köszönöm előre is ha segítesz!

    Viki

    VálaszTörlés
    Válaszok
    1. Szia! Örülök, hogy sikerült :)
      Ha jól értelmezem, akkor szeretnéd az oldalsávhoz hozzáadni a Rendszeres olvasók nevezetű modult, ugye? :) Ezt úgy tudod megtenni, hogy a Tervezőben rámész az Elrendezés fülre, azon belül jobb oldalt keresd meg a sidebar-right-1 részt (legalábbis nálam így van), ott válaszd ki, hogy Modul hozzáadása és a felugró ablakban keresd ki a További modulokat. Ott lesz majd a Rendszeres olvasók modul, csak hozzá kell adnod és készen is vagy vele. Remélem tudtam segíteni :)

      Törlés
  26. Igen, szuper, nagyon-nagyon köszönöm!! :) Még annyi, hogy neked nem szokta azt csinálni a bejegyzés írásnál, hogy hiába állítasz be egy betűtípust és méretet, önkényesen változtatgatja, illetve nem változtatja arra amelyikre szeretném...ez nem tudod esetleg miért lehet?

    VálaszTörlés
    Válaszok
    1. Nálam a mérettel szokott gond lenni, van, hogy beállítok egy méretet és mégsem úgy néz ki, ahogy kellene... de ezt nem tudom, hogy miért csinálja, ingyenes platform, így "megteheti", lehetnek kukacai :/ :D

      Törlés
  27. Köszönöm, közben rájöttem mi volt a gond! :) Az előzővel kapcsolatban azt nem tudod, hogyan lehet mobilsablonon is megjeleníteni a rendszeres olvasást?

    VálaszTörlés
    Válaszok
    1. Mobilsablonon szerintem nem lehet ilyen beállítani, bár nem is néztem még utána. A legjobb az lenne, ha responsive sablon lenne, és akkor ugyanúgy nézne ki mobilon is az oldal, mint a laptopon/tableten/PC-n, de nem szeretek új, letölthető sablonokkal kísérletezgetni, nincs rá időm, sajnos :/

      Törlés
  28. Nagyon régóta kerestem, hogy hogyan is kell ezt igazán, és pont ott leltem rá, ahol nem számítottam! :D Nagyon szépen köszönöm a segítséget!

    VálaszTörlés
  29. Szia
    Oh te jó ég, zseniális dolog, kipróbáltam! :D
    Nekem a link beszúrása, html másolása jött be, működött elsőre, pedig kicsit sem vagyok HTML-guru, de egyre jobban belejövök.
    Köszönöm, hogy leírtad. :)

    VálaszTörlés
    Válaszok
    1. Mostani fejjel és tapasztalattal szerintem már nekem is menne, de akkoriban, amikor ez a bejegyzés íródott még nehézséget jelentett :) Szerintem így sokkal egyszerűbb és egyben sokkal személyre szabhatóbb is :)

      Törlés
  30. Szia!
    Nagyon egyszerű és közérthető a leírásod. Könnyen és gyorsan ment. A korábbi oldalkinézetben is ezt használtam, majd miután stílust váltottam, eltűntek, de ezzel sikerült visszaállítanom. Nagyon szeretem a blogodat. Úgy írsz, ahogy én is szeretnék, ha egyszer nagy leszek.
    A menüsort is általad sikerült beállítanom, ahogy még sok mást is. Ha szeretnéd megnézni, akkor itt találod: http://horgoblog.blogspot.hu/.
    Még egyszer nagyon köszönöm.

    VálaszTörlés
    Válaszok
    1. Szia! Úgy örülök neki, hogy még hosszú idő elteltével is érkeznek ilyen hozzászólások ehhez a poszthoz, és hogy sikerült érthetően átadnom :) Megnéztem a blogod, bárcsak én is úgy udnék horgolni, mint te, én max. csak horKolni tudok :D
      Sajnos nincs annyi időm a blogra, mint szeretném, de mindig jól esnek az ilyen kedves szavak, de hidd el, még nekem is van hova fejlődnöm, annak ellenére is, hogy idén 5 éves lesz a blog :) Sok sikert a blogoláshoz! :)

      Törlés
  31. Szia! Köszi, szépen a videó tényleg szájbarágós, de a te leírásod alapján érthető volt. Sok helyen kerestem már, hogy hogyan is tudom ezt megvalósítani, de a legtöbb érthetetlen volt vagy kamu. Nagyon köszi, mégegyszer és további sok sikert a bloghoz!

    VálaszTörlés
    Válaszok
    1. Nagyon szívesen, örülök neki, hogy sikerült megcsinálni :)

      Törlés
  32. Köszi ez hatalmas segítség volt :) ♥

    VálaszTörlés