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:
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!

7 komentarzy:

  1. O ty... niezłe to *-* Nie mogę się doczekać, aż ją wykorzystam :)

    OdpowiedzUsuń
    Odpowiedzi
    1. A ja nie mogę się doczekać efektu tego wykorzystywania xD
      Dziękuję~!

      Usuń
  2. O, to mi się bardzo podoba. Z pewnością w niedalekiej przyszłości wspomogę się instrukcją. *-*

    OdpowiedzUsuń
    Odpowiedzi
    1. Cieszę się, że instrukcja przypadła do gustu. <3

      Usuń
  3. Ten efekt jest świetny. :3 Nie raz próbowałam zrobić coś z tym okropnym archiwum bez skutecznie, a tu takie cudeńko. ;D Możliwe, że w przyszłości go użyczę. ;3

    OdpowiedzUsuń
    Odpowiedzi
    1. Dziękuję za komentarz i zachęcam do korzystania. ;) W przyszłości z pewnością pojawi się jeszcze kilka efektów na archiwum, bo ten gadżet dość ciężko okiełznać. ;D

      Usuń
  4. Mam pytanie.
    Jakiego kodu użyć by "boksy" z napisami "lipiec", "sierpień" itd. przybliżyć do siebie (połączyć na wysokość, by do siebie przylegały)?
    Z góry dziękuję i pozdrawiam.

    OdpowiedzUsuń

statystyka

Archiwum bloga

Obserwatorzy