Jak dodać gadżet "O autorze" w stopce posta?

Już kilka osób pytało mnie jak dodać informacje "O autorze" lub linki do portali społecznościowych w stopce posta. Dziś chciałam pokazać Ci, jak taki gadżet, w dwóch szybkich krokach, dodać w bloggerze.

Poniżej możesz zobaczyć jak będzie wyglądać efekt końcowy.

 

Jak dodać gadżet "O autorze"?

Zawsze, gdy zaczynasz wprowadzać jakieś zmiany, pobierz na wszelki wypadek kopię zapasową szablonu (Szablon-Utwórz/przywróć kopię zapasową). Wejdź w panel bloga, wybierz "Szablon" i "Edytuj kod HTML".

Wyszukaj frazę  " authorAboutMe ". 

(Żeby wyszukać słowo w szablonie naciśnij myszką w dowolnym miejscu kodu i wciśnij CTRL+F - w prawym rogu pojawi się okienko wyszukiwania)

Tuż na wyszukaną frazą wklej 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'>Karolina Gie</a>

<p>Tu napisz kilka słów o sobie....<br/>
Możesz też podać linki do <a href='LINK DO FACEBOOKA'>FACEBOOKA</a>
albo <a href='LINK DO INSTAGRAMU'>INSTAGRAMU</a></p>
</div>
</b:if>
</article>

Kod powinien wyglądać tak:

Następnie wyszukaj " </b:skin> "  i tuż nad tym wklej ten kod:

.about-author-inner {text-align:left!important;width:80%;margin-left:20px;height:150px;}
.about-author{font-size:13px;color:#666;background:#fff;width:100%;margin-top:10px;}
.about-author-inner{background:#fff;padding-bottom:30px}
.about-author img{float:left;margin-right:2.828854%}
.about-author h2{margin-bottom:0px;text-transform:uppercase;line-height:16px;font-size:18px;font-family:'Oswald',sans-serif}
.about-author h2 span{font-weight: normal;display:inline-block;*display:inline;zoom:1;background-color:#f9f9f9;padding-right:0px}
.about-author a{font-size:17px;color:#000;margin-bottom:5px}
.about-author a:hover{color:#ddd}
.about-author p {font-size:12px;width:115%;}
.about-author {border-top:1px solid #000;border-bottom:1px solid #000;}

i zapisz szablon.

Kod powinien wyglądać tak:

Jak edytować gadżet "O autorze"?

W miejscu LINK DO .. wklej adresy url odsyłające do zdjęcia, fb czy instagramu. Zdjęcie które ma się pojawić w okienku najlepiej jak będzie miało wymiary 100x100px. Oczywiście możesz dodać więcej linków do portali społecznościowych dodając kolejną formułkę <a href='LINK DO PORTALU'>PORTAL</a>. Na szaro zaznaczone są fragmenty, które pojawią się w gadżecie. W tych miejscach powinnaś wpisać swoją formułką.

Mam nadzieję, że moja instrukcja Ci się przyda. Jeśli masz jakieś pytania śmiało pisz.