poniedziałek, 23 listopada 2009

Tworzymy sekcję o autorze pod każdym postem na Bloggerze

Sekcja o autorze jest dość popularna na blogach, dzisiaj pokażę jak zrobić taki element na Bloggerze. Skorzystamy z funkcji, która wyświetla nam daną zawartość tylko w poście:

<b:if cond='data:blog.pageType == "item"'>
Tutaj kod
</b:if>

Umieszczamy ten kod pod linią

<div class='post-footer'>

wcześniej musimy rozszerzyć szablony widżetów aby ta linia była widoczna. Wklejamy teraz div z naszym tekstem:

<b:if cond='data:blog.pageType == "item"'>

<div class='oautorze'>

<h2>Autor: Jan Kowalski</h2>
<img class='awatar' src='http://adres.com/awatar.jpeg'/><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam justo ipsum, dapibus id ultricies sed, volutpat sed augue. Praesent at diam non arcu molestie elementum eget et enim.</p><p>
Nunc semper erat ac lectus dapibus vel accumsan massa pellentesque.</p>

</div>
</b:if>

i odpowiedni dla nas CSS, ja tutaj użyłem, taki sam jak na tej stronie.

.oautorze {
border-top:1px dashed #DFDFDF;
border-bottom:1px dashed #DFDFDF;
line-height:21px;
margin:50px 0 0 0;
padding:10px;
height:100%;
clear:both;
}

.oautorze h2 {
margin-bottom:10px;
font-size:18px;
}

.awatar {
float:left; 
padding:0 10px 10px 0;
width:80px;
}

To już prawie koniec, należy pamiętać, że standardowo wyświetlany jest link do naszego profilu na Bloggerze pod każdym wpisem:

<div class='post-footer-line post-footer-line-1'>

      <span class='post-author vcard'>
        <b:if cond='data:top.showAuthor'>
          <data:top.authorLabel/>
          <span class='fn'><data:post.author/></span>
        </b:if>
      </span>

Dlatego aby nie pokazywała nam się ta linia razem z naszym divem o autorze, dodajemy kod CSS dla tych klas:

.post-author {display:none;}
.post-timestamp {display:none;}

Autor: Marcin Piszczek

Interesuję się designem, internetem i nowinkami technicznymi. Z zamiłowania jestem web developerem i web designerem,a od jakiegoś czasu również blogerem. W wolnych chwilach gram w DotA. Kibicuję Zagłębiu.

Masz jakieś sugestie? Napisz do mnie. Możesz mnie również obserwować na Twitterze.
blog comments powered by Disqus

Wszystko o designie, dużo inspiracji i tutoriali.

Copyright 2009 - 2012 Creatyna. All rights reserved.