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

18.07.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. Szablon - 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 szablon - dostosuj


5. Przechodzimy do zaawansowane - dodaj gadżet 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

9 komentarzy:

  1. Bardzo przydatny wpis! Na pewno skorzystam z tej instrukcji, jesteś świetna :)

    Pozdrawiam,
    INNA MYŚL

    OdpowiedzUsuń
    Odpowiedzi
    1. Ciesze się, że przyda Ci się ta instrukcja :)

      Usuń
  2. Bardzo przydatny post. Najbardziej mi sie podoba to rozwijanie w Twojej sekcji "o autorce".

    Pozdrawiam
    alexamariani.blogspot.com

    OdpowiedzUsuń
    Odpowiedzi
    1. Nie tylko Tobie się to podoba :) Dużo osób do mnie pisze z pytaniem jak to zrobić :)

      Usuń
  3. Bardzo fajnie to wygląda :) Również może się przydać :)

    OdpowiedzUsuń
  4. Przydatny wpis. Ja zdecydowałem się na osobną zakładkę ''O mnie''.

    OdpowiedzUsuń
    Odpowiedzi
    1. Osobna zakładka "O mnie" pełni trochę inną funkcję niż wizytówka, ale również jest bardzo przydatna :)

      Usuń
  5. Oj, dziękuje Ci! W wolenj chwili siadam i grzebie w kodzie, tylko na spokojnie, zeby mi wyszło :>
    koocham cie za ten post!

    OdpowiedzUsuń

- Komentarze takie jak: spam, obserwacja za obserwacje, prośby o klikanie w banery etc. zostają usuwane - ZAPAMIĘTAJ! MÓJ BLOG TO NIE TABLICA OGŁOSZEŃ
- Uznaje tylko konstruktywną krytykę
- Każdy komentarz to motywacja dla mnie.
- Weryfikacja obrazkowa wyłączona