7# Archiwum [instrukcja]

Witam wszystkich serdecznie!
Archiwum, zwłaszcza na starszych i aktywnych blogach może stanowić nie lada wyzwanie dla bloggera. W dzisiejszym, już siódmym poście na Mruwisku pokażę Wam jak w elegancki, ale zarazem prosty sposób przedstawić ten gadżet. Pogrzebiemy trochę w kodzie HTML naszego bloga, ale nie obawiajcie się - postaram się wszystko dokładnie rozpisać.
Efekt, który chcemy uzyskać prezentuje się następująco:

Archiwum

• sie 1992 liczba postów: 1
• mar 2012 liczba postów: 1
• lip 2014 liczba postów: 2
• sty 2015 liczba postów: 6

Zaczynamy od wstępnego opracowania archiwum. Klikając na przycisk   znajdujący się przy archiwum na naszej stronie, lub w też na edytuj w układzie panelu bloga wchodzimy do interesujących nas ustawień. Ważne, aby w sekcji styl zaznaczyć okienko przy lista. Z resztą można dowolnie eksperymentować. U mnie wyglądało to w ten sposób. Następnie w sekcji szablon w panelu bloga wchodzimy w zakładkę Szablon, gdzie przycisk Edytuj kod HTML przenosi nas do kodu. Wystarczy kliknąć ctrl i f na klawiaturze, by wyszukać:

<b:includable id='flat' var='data'>

Rozwijamy sekcję.

    <b:includable id='flat' var='data'>
  <ul class='flat'>
    <b:loop values='data:data' var='i'>
      <li class='archivedate'>
        <a expr:href='data:i.url'><data:i.name/></a> (<data:i.post-count/>)
      </li>
    </b:loop>
  </ul>
</b:includable> 

To w tym miejscu musimy dokonać kilku zmian. Wycinamy powyższy kod, po to, by wkleić ten:

 <b:includable id='flat' var='data'>
  <ul class='flat'>
    <b:loop values='data:data' var='i'>
      <li class='archivedate'>
        <div class='data'> <a expr:href='data:i.url'><data:i.name/><span> liczba postów: <data:i.post-count/></span></a></div>
      </li>
    </b:loop>
  </ul>
</b:includable>

Słowa "liczba postów" można dowolnie zmienić. :)
Po tej drobnej edycji w kodzie HTML, możemy przejść do zabawy w CSS. Podaję Wam gotowy kod, którego użyłam, by uzyskać efekt zaprezentowany na początku posta. Jak zawsze jednak zachęcam do eksperymentowania z efektami!

/*Zaczynamy od ustawienia stylu archiwum*/
#BlogArchive1 {
width:100%; /*długość gadżetu*/
padding:10px; /*odległość treści od brzegów*/
border: 1px solid #fff; /*ramka*/
background:#e6e6e6; /*tło - w moim przypadku jest to gradient*/
background:-webkit-linear-gradient(#e6e6e6,#bfbfbf);
background:-o-linear-gradient(#e6e6e6,#bfbfbf);
background:-moz-linear-gradient(#e6e6e6,#bfbfbf);
background:linear-gradient(#e6e6e6,#bfbfbf)
}
/*Przechodzimy do zmian w tytule posta*/
#BlogArchive1 h2 {
background:#2b2b2b; /*tło tytułu*/
padding:10px; /*odległość treści od brzegów tytułu*/
margin-left:-10px; /*odległość ramki archiwum od brzegów ramki*/
margin-right:-10px;
margin-top:-10px;
text-transform:uppercase; /*wielkie litery w tekście*/
color:#fff; /*kolor czcionki*/
border-bottom:1px solid grey; *ramka pod tytułem*/
}
/*Zaczynamy zabaawę z listą miesięcy*/
.archivedate a {
display:block;
width:97%; /*długość poszczególnych dat*/
text-align:center; /*wyśrodkowanie tekstu*/
background:#2b2b2b; /*tło list*/
color:#fff; /*kolor linków*/
padding:4px; /*odległość pasków list od brzegów*/
margin-top:2px; /*margines między listami*/
text-transform:uppercase; /*wielkie litery linków*/
text-decoration:none; /*usuwamy podkreślenie w linkach*/
transition:.3s; /*czas animacji*/
}
/*Ustawiamy styl liczby postów*/
.archivedate span {
display:block;
text-align:center;  /*wyśrodkowanie tekstu w pasku z liczbami*/
font-size:10px; /*wielkość czcionki*/
width: 40%; /*długość paska z liczbami*/
float:right; /*przesunięcie liczb na prawo*/
text-transform:uppercase; /*wielkie litery*/
padding:2px; /*odległość tekstu od ramki*/
        background:#317c00; /*tło*/
color:#fff /*kolor*/
margin-top:5px; /*obniżenie ramki z liczbą postów*/
transition:.3s; /*czas animacji*/
}
/*Kończąc już naszą ramkę zmieniamy nieco styl po najechaniu na linki archiwum myszką.*/
/*Pasek z listą dat*/
.archivedate a:hover {
background:#88bf3a; /*tło listy*/
color:#fff; /*kolor linków*/
transition:.3s; /*animacja*/
}
/*Pasek z liczbą postów*/
.archivedate a:hover span {
background:#2b2b2b; /*tło liczb*/
transition:.3s; /*animacja*/
}

Mam nadzieję, że instrukcja Wam się spodobała. :) Zachęcam do korzystania!