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

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?