29 listopada 2016

Avatar autora przy poście


Witam, avatar w poście to super pomysł na urozmaicenie wyglądu bloga :) Szczególnie jeśli na blogu jest więcej autorów.

INSTRUKCJA

1. Wchodzimy w "Edytuj kod HTML" i wyszukujemy:

<span class='post-author vcard'>
Powinna pojawić się następująca fraza:

<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 ją! I ponownie wyszukujemy tego samego, ponieważ w kodzie zazwyczaj pojawia się dwa razy. Drugi taki sam kod, również usuwamy!

2. Następnie wyszukujemy:

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

Również tym razem w kodzie pojawi się ten sam kod, ale przechodzimy do tego drugiego i zastępujemy go:

<div class='post-header-line-1'>
<div class='autorzy'>
<b:if cond='data:post.author == "NICK AUTORA"'>
<span class='autor'><a href='WKLEJ LINK DO PROFILU AUTORA '><img src='LINK AVATARA'/><span class='nick' itemprop='name'><data:post.author/></span></a></span>
</b:if>
</div>
</div> 
Jeśli chcemy dodać kolejnego autora pod </b:if> wklejamy dalszą część kodu:

<b:if cond='data:post.author == "NICK KOLEJNEGO AUTORA"'>
<span class='autor'><a href='LINKD DO PROFILU'><img src='LINK DO AVATARA'/><span class='nick' itemprop='name'><data:post.author/></span></a></span>
</b:if>  

3. Wchodzimy w Arkusz CSS i wklejamy:

.autorzy img {
width: 80px;
height: 80px;
}
.autorzy span {
display: block;


(c) Za kod dziękuję! MRUwisko

Brak komentarzy:

Prześlij komentarz