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!

Czytaj dalej >>

5# Spis treści w poście [instrukcja]

Cześć wszystkim!

Wiecie, że 17 lutego mamy Dzień Kota? Wszystkim kociakom z okazji tego święta życzę wszystkiego dobrego!
Dzisiaj pokażę Wam sposób na uporządkowanie treści w Waszym poście. Czytelnik będzie mógł dzięki jednemu kliknięciu przenieść się do interesującej go części posta. To coś bez wątpienia użytecznego dla osób, które lubią się rozpisać, a przy tym zachować estetykę na blogu. ;)
Działanie wspomnianego przeze mnie sposobu znajdziecie w przygotowanej specjalnie na tą okazję podstronie. Swoją drogą - zachęcam do jej lektury. Pogrzebałam trochę w sieci i przygotowałam dla Was ciekawostki na temat kotów!

DEMO

W poście, w którym chcemy osiągnąć powyższy efekt obok przycisku Nowy post znajduje się taki z napisem HTML - to w nim będziemy działać.
Zaczniemy od stworzenia spisu treści.

<ul>
<li><a href="#jeden">Pierwsza część posta</a></li>
<li><a href="#dwa">Druga część posta</a></li>
<li><a href="#trzy">Trzecia część posta</a></li>
<li><a href="#cztery">Czwarta część posta</a></li>
</ul>

Kolejny krokiem jest stworzenie divów o id, które na liście znajdują się w sekcji oznaczonej oznaczona pogrubieniem. ;) Tekst podkreślony zmieniamy stosownie do tytułu danej części posta do której będą nas odsyłać powyższe odnośniki.

<div id="jeden">
Przykładowy tekst pierwszej części posta. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mattis est sapien, quis vestibulum risus venenatis vitae.
</div>
<div id="dwa">
Przykładowy tekst drugiej części posta. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mattis est sapien, quis vestibulum risus venenatis vitae.
</div>
<div id="trzy">
Przykładowy tekst trzeciej części posta. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mattis est sapien, quis vestibulum risus venenatis vitae. In maximus efficitur convallis.
</div>
<div id="cztery">
Przykładowy tekst czwartej części posta. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mattis est sapien, quis vestibulum risus venenatis vitae. In maximus efficitur convallis. Etiam accumsan facilisis tortor sit amet posuere. Praesent aliquam libero nec erat cursus congue.
</div>

Teraz po kliknięciu w liście na odnośnik "Pierwsza część posta" zostaniemy przekierowani do części posta o id "jeden". Analogicznie dzieje się z kolejnymi pozycjami.

Trick dość prosty, ale równocześnie ciekawy i pożyteczny. Mam nadzieję, że Wam się przyda! ^^

Czytaj dalej >>