16# Avatar autora w poście

Cześć!

Avatar autora w poście to fajny trick dla blogów na których jest więcej niż jeden autor. W odpowiedzi na Wasze prośby zdecydowałam się opracować w języku polskim instrukcję inspirowaną tym postem.
Uprościmy nieco kod autora wskazanego bloga, wytłumaczę również jak to działa.
Efekt, który uzyskamy prezentuje się następująco:

KROK I - HTML

Zaczynamy od skierowania się w profilu naszego bloga do sekcji Szablon, by w kolejnym etapie kliknąć na przycisk Edytuj kod HTML. Kierujemy kursor na arkusz z naszym kodem, klikamy, by następnie wcisnąć na klawiaturze CTRL i F. Wyszukujemy:

<span class='post-author vcard'>

Naszym oczom powinien ukazać się poniższy kod:

<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<b:if cond='data:post.authorProfileUrl'>
<span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
<meta expr:content='data:post.authorProfileUrl' itemprop='url'/>
<a class='g-profile' expr:href='data:post.authorProfileUrl' rel='author' title='author profile'>
<span itemprop='name'><data:post.author/></span>
</a>
</span>
<b:else/>
<span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
<span itemprop='name'><data:post.author/></span>
</span>
</b:if>
</b:if>
</span>

Usuwamy go. Jeśli w kodzie znajdują się dwa takie kody - należy usunąć oba.
Ponownie wciskamy CTRL i F, by tym razem wyszukać:

<div class='post-header-line-1'/>

W szablonie mogą wystąpić również dwa takie kody. Jeśli tak jest - kierujemy się do tego drugiego z kolei.
Usuwamy go, a w jego miejsce wklejamy:

<div class='post-header-line-1'>
<div class='autorzy'>
<b:if cond='data:post.author == "nick autora"'>
<span class='autor'><a href='link do profilu autora'><img src='link do obrazka'/><span class='nick' itemprop='name'><data:post.author/></span></a></span>
</b:if>
</div>
</div>

nick autora - wpisujemy tu dokładnie taki nick, jaki posiada dany autor na blogu;
link do profilu autora - tu wklejamy link do profilu autora (czy to na google, czy na bloggerze)
link do obrazka - link do avatara

Jeśli autorów jest więcej niż jeden, tuż pod </b:if> w powyższym kodzie wklejamy ponownie:

<b:if cond='data:post.author == "nick autora 2"'>
<span class='autor'><a href='link do profilu autora 2'><img src='link do obrazka 2'/><span class='nick' itemprop='name'><data:post.author/></span></a></span>
</b:if>  

Kod uzupełniamy.

Co w praktyce zrobiliśmy? Pierwszym punktem było usunięcie całej sekcji z autorem na naszym blogu, w kolejnym stworzyliśmy inny kod. Zakłada on, że jeśli nick autora postu będzie dokładnie taki jaki podaliśmy - wyświetli się zalinkowany do wskazanego przez nas profilu avatar autora. Tuż obok wyświetli się nick autora postu (również zalinkowany do podanego przez nas profilu).

KROK II - CSS

Teraz czas na dodanie prostego kodu CSS. W profilu naszego bloga wchodzimy w Szablon > Dostosuj > Zaawansowane > Dodaj arkusz CSS, by wkleić poniżej następujący kod:

.autorzy img {
width: 80px; /*szerokość avatara ustawiona na 80 pikseli*/
height: 80px; /*wysokość avatara ustawiona na 80 pikseli*/
}

.autorzy span {
display: block; /*ustawiamy nick i avatar jedno pod drugim
}

Możecie dowolnie przesuwać używając opcji float i margin swój avatar. Można również zmienić czcionkę w nicku, jego kolor... Zaokrąglić rogi avatarów... Do ozdobienia tej części naszego posta przydatne będą następujące selektory:

.autorzy - puszka zawierająca avatar i nick
.autorzy img - avatar
.nick a - nick autora postu

I.. To wszystko w dniu dzisiejszym. Mam nadzieję, że instrukcja przypadła Wam do gustu. Zachęcam do komentowania. :)
Pozdrawiam!