the Skinned! blog

A dolog alapja egy WordPress plugin, a Sociable, ebből nyertük ki az ikonokat és a linkek HTML-struktúráit, ez utóbbi nem volt könnyű, amúgy. Ezeknek a szeretni- és kattintanivaló kis szaroknak a segítségével olvasóitok egyetlen mozdulattal megoszthatják majd a nekik tetsző bejegyzést a számukra szimpatikus oldal segítségével. A következő howto segítségével a következő könyvjelzős és megosztós oldalak ikonjait tudjátok a bejegyzéseitek végére beilleszteni:

• Freeblog főoldalra ajánlás
• Facebook
• Google Bookmarks
• Netvibes feliratkozás
• Yahoo! Bookmarks
• MySpace
• Delicious
• LinkedIn
• Live Favorites
• Twitterre postázás
• Yahoo! Buzz Up
• Technorati
• StumbleUpon
• Digg
• Blogter alternatív címlapra ajánlás
• Linkter
• Reddit
• Book.Mark.Hu

(A Ma.gnolia bezárt, úgyhogy oda nem küldünk semmit.)

Szóval: hogyan applikáljuk bele a cuccot a sablonunkba?

Első lépés: fogod és a zárójeles linkre kattintva letöltöd az összecsomagolt ikonokat (sociable.zip), majd a blogod admin-felületére lépve a (Vezérlőpult/Intéző/)Feltöltés menüpontban betallózod gépedről a letöltött csomagot és feltöltöd a blogod gyökérkönyvtárába, azaz oda, hogy "[blogod neve] fájljai/". Ne feledd el bepipálni a "Tömörítsd ki" előtti négyzetet! Ha minden jól ment, akkor a gyökérkönyvtárban megjelenik egy "sociable" mappa, benne számos képfájllal.

Második lépés: megnyitod a sociable.txt fájlt ide kattintva, majd kijelölöd az egész tartalmát és egy erőteljes Ctrl+C-vel kimásolod.

Harmadik lépés: a blogod admin felületén elhaladsz a Vezérlőpult/Sablon/Új sablondarab menüponthoz, melyet elnevezel úgy, hogy "sociable" (idézőjelek nélkül), ha akarsz, megadsz hozzá leírást, a tartalomhoz pedig beilleszted a fenti txt-fájlból kimásolt cuccot. Ennek utána elmented és ha ügyes voltál, a sablondarabok között meg is jelenik.

Negyedik lépés: még mindig az admin felületen maradva a Vezérlőpult/Sablon/Sablondarabok résznél megkeresed a "bejegyzés" (vagy hasonló) nevű sablondarabot és megnyitod. A neked tetsző helyre (értsd: ahol szeretnéd, hogy megjelenjen az ikonszett) bemásolod a következőt:

<$e:Include name="sociable"$>

Fontos, hogy a bejegyzéseket tartalmazó sablondarabba szúrd, különben nem fog működni! Elmented a dolgot, mert készen vagy.

Formázás: amint az új sablondarabba beszúrt HTML-ből látszik, az ikonok egy "sociable" class-ú div-ben helyezkednek el. Ha formázni szeretnéd az ikonokat, akkor annyit kell tenned, hogy a css-ben (Vezérlőpult/Sablon/Sablondarabok/css, vagy stiluslap) megformázod. A stíluslap legvégére (de még a </style> elé!) beszűrsz egy olyat, hogy: div.sociable { }, és a két zárójel közé beírod a CSS-formázást. Mivel jó fejek vagyunk, kaptok egy kódot készen, amit beszúrhattok a </style> elé:

div.sociable {
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
padding-top: 0.8em;
padding-bottom: 0.8em;
}

div.sociable img {
border: none;
padding-right: 5px;
}

div.sociable img a {
filter:alpha(opacity=25);
-moz-opacity:.25;
opacity:.25;
}

div.sociable img a:hover {
filter:alpha(opacity=85);
-moz-opacity:.85;
opacity:.85;
}

Ha nem boldogulsz, akkor még mindig ott az előző megosztós poszt alatti kommentekben említett két hasonló szolgáltatás.Demószerűséget láthattok a dologról egyébként Gus bejegyzéseinek végén.