Jak zrobić "O mnie" pod postem?



Czyli obrazek, nasz opis i ikonki w stopce posta.

Pamiętaj, że przed wykonywaniem jakiejkolwiek zmiany w HTML warto jest zrobić KOPIĘ ZAPASOWĄ.


Jako pierwsze wchodzimy w Szablon> Edytuj kod HTML.
 2. Klikamy w obojętnie jakie miejsce w kodzie, następnie na klawiaturze klikamy Ctrl+F  i wpisujemy: authorAboutMe i klikamy enter.
 Dokładnie wyświetli nam się linijka:  <b:if cond='data:post.authorAboutMe'> i nad nią wklejamy poniższy kod i uzupełniamy go wedle naszego uznania.
<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żeli chcesz usunąć jakąś ikonkę usuwasz poniżej wymienioną część kodu(nie musi to być ikonka od pinterestu):
</div>
<div class='social'><a href='LINK DO STRONY'><img alt='pinterest' src='LINK DO IKONKI'/></a></div>
A jeżeli chcesz dodać wystarczy, że zmienisz 'pinterest' na naprzykład weheartit.

U mnie kod prezentuje się tak:


Zapisujemy szablon. Przechodzimy do Szablon>Dostosuj wybieramy Zaawansowane i klikamy Dodaj arkusz CSS



Wklejamy poniższy 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;
}

Pogrubione wartości są zmienne:
Wyrównanie tekstu
Kolor tekstu 
Wielkość linków
Kolor linków 
Kolor po najechaniu myszą
Wielkość tekstu

Gotowe!


źródło: klik


Jeżeli potrzebujesz pomocy lub masz jakieś pytania kieruj je na maila: werciaq7@gmail.com

Popularne posty z tego bloga

MALTA 2019

TYDZIEŃ NA MALCIE-PRZELOTY, NOCLEGI,KOSZTY, TRANSPORT

CO WARTO WIEDZIEĆ JADĄC DO GRUZJI