Jak zrobić "o autorze" w stopce wpisu z ikonkami

sobota, 18 lipca 2015

Często na blogach można zauważyć tzw. wizytówki, które są umieszczane na końcu wpisu. Możemy w niej umieścić krótką informacje o nas, podlinkować strony, przekazać jakąś inną informacje naszym czytelnikom. Taka wizytówka, ostatnio stała się bardzo popularna, coraz częściej można ją zauważyć na blogach. Czy jest skuteczna? Osobiście uważam, że tak. Wizytówkę, o której jest tu mowa, można zobaczyć u mnie na dole wpisu, ale dodam zdjęcie również i tutaj, abyście nie musieli przewijać strony.

UWAGA! ZRÓB KOPIĘ ZAPASOWĄ SZABLONU! 

1. Zaczynamy od HTMLa. Motyw  - edytuj kod HTML.
2. Klikamy kursorem w obojętnie jakie miejsce w kodzie i wywołujemy okno wyszukiwania za pomocą CTRL + F. W okno wyszukiwania wpisujemy authorAboutMe i klikamy enter.

3. Wyszukana została taka cześć kodu: <b:if cond='data:post.authorAboutMe'> tuż nad nią wklejamy (uzupełniony według własnych potrzeb) kod:

<article class='about-author'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='about-author-inner'>
<h2><span> </span></h2>
<img alt='author' src='LINK DO ZDJĘCIA'/>
<a href='LINK DO STRONY O MNIE'>TUTAJ WPISZ SWOJE IMIĘ</a>
<p>MIEJSCE NA TEKST</p>
<span class='author-share'>
<div class='social'><a href='LINK DO STRONY'><img alt='facebook' src='LINK DO IKONKI'/></a></div>
<div class='social'><a href='LINK DO STRONY'><img alt='instagram' src='LINK DO IKONKI'/></a></div>
<div class='social'><a href='LINK DO STRONY'><img alt='ask' src='LINK DO IKONKI'/></a></div>
<div class='social'><a href='LINK DO STRONY'><img alt='pinterest' src='LINK DO IKONKI'/></a></div>
<div class='social'><a href='LINK DO STRONY'><img alt='youtube' src='LINK DO IKONKI'/></a></div>
</span>
</div>
</b:if>
</article>

Jeśli chcemy, aby w miejscu gdzie znajduje się tekst było podlinkowane jakieś słowo, to musimy zamieścić w nim taki kod: <a href='LINK'>SŁOWO DO PODLINKOWANIA</a> Przykład:

Jeśli spodobał Ci się jakiś wpis/chcesz podyskutować na dany temat zostaw komentarz. Jeśli większa ilośc wpisów przyciągnęła Twoją uwagę, zaobserwuj bloga, możesz również śledzić Blonparię na <a href='https://www.facebook.com/blonparia'>Facebooku</a>, z którego możesz dowiedzieć się, że właśnie na blogu zawitał nowy wpis i wiele więcej rzeczy, które nie są publikowane na blogu.

Jeśli chcemy mieć więcej ikonek społecznościowych to po ostatnim </a></div> przed </span> wklejamy:

<div class='social'><a href='LINK DO STRONY'><img alt='youtube' src='LINK DO IKONKI'/></a></div>

Zapisujemy szablon.

4. Przechodzimy teraz do motyw - dostosuj
5. Zaawansowane - dodaj arkusz CSS i wklejamy kod:

.about-author-inner {text-align:justify; width:80%; height:150px;}
.about-author {color:#000; background: transparent; width:100%; margin-top:-20px;}
.about-author-inner {background:transparent; padding:20px;}
.about-author img{float:left; margin-right:2.828854%}
.about-author a{font-size:14px; color:#ff8d8e; margin-bottom:5px; text-transform:uppercase;}
.about-author a:hover{color:#000;}
.about-author p {font-size:14px;width:115%;}
.post-author .author-share {
float: left;
line-height:32px;
display:inline-block;
}
.social:hover {
opacity : 0.70;
filter : alpha(opacity=70);
}
.social {
float: left;
margin: -4px 10px 15px 10px;
}
.social img {
width: 32px;
height: 32px;
}

Wszystkie pogrubione i kolorowe wartości są zmienne. 

Wyrównanie tekstu

Kolor tekstu 

Wielkość linków

Kolor linków 

Kolor po najechaniu myszą

Wielkość tekstu

Jeśli spodobał Ci się wpis, przekaż go dalej :)