14 czerwca 2016

Anatomia - ARCHIWUM

Dzisiaj zatrzymamy się na ciekawym gadżecie jakim jest archiwum. W zależności od upodobań, to sami możemy sobie wybrać czy chcemy mieć Hierarchię, (która pokazuje nam miesiące a wszystko podzielone jest na rok w jakim dodawaliśmy wpisy) Listę (gdzie mamy archiwum podzielone na miesiące) czy też Menu, który był dla mnie dość nieciekawy i mało można było z nim zrobić (a byłam w tak wielkim błędzie!). Może skupmy się na tym co możemy zmienić w samym sercu, czyli w kodzie HTML. Często irytujące liczby, które znajdują się w nawiasach oznaczające ile postów napisaliśmy w danym miesiącu. Może niektórym to nie przeszkadzać, a wręcz przeciwnie ułatwia im to poruszanie się w archiwum i orientowaniu się co i jak z liczbowymi sprawami. Ale dla tych, których to jednak irytuje, mam coś co na pewno wywoła uśmiech na waszej twarzy, a mianowicie instrukcja na to jak pozbyć się tych irytujących liczb/

Jak usunąć liczbę przy miesiącu?


(c) Tyler

Wystarczy w kodzie HTML (CTRL + F) wyszukać "data:i.post-count" i usunąć wszystko razem z nawiasami.

Okej teraz zajmijmy się poszczególnymi podziałami, czyli Listą, Menu i Hierarchią, tak aby nie było to nijakie a wręcz przykuwało uwagę i było dość czytelne.

LISTA:

EFEKT:
PO NAJECHANIU:
KOD:
#BlogArchive1 a { color: #ffffff;
background: #515155;
font-weight: normal;
text-align: center;
font-size: 10px;
text-transform:uppercase;
letter-spacing: 2px;
text-decoration: none;
display: block;
line-height: 15px;
padding: 2px;
border-radius: 0px;
margin: -6px 9px;}
#BlogArchive1 a:hover {background: #dcc6a7;color: #000000; transition:all 1s;
-moz-transition:all 1s;
-webkit-transition:all 1s;
-o-transition:all 1s;}
EFEKT:

INSTRUKCJA:

1. Szukamy w kodzie HTML:
<b:includable id='flat' var='data'>
2. Rozwijamy sekcję za pomocą strzałek znajdujących się po lewej stronie, nasz kod wygląda tak:
  <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> 
3. Zmieniamy powyższy kod, zamieniając go na 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łowo liczba postów, można zmienić na własne dowolne)
4. No i teraz to co tygryski lubią najbardziej, czyli przechodzimy do arkusza CSS i dodajemy kod:
/*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*/
}
MENU:
Selektor odpowiadający nam za archiwum o stylu "menu" to: #BlogArchive1_ArchiveMenu
No i teraz zaczynamy zabawę nadając mu nowych możliwości.

EFEKT:
KOD:
#BlogArchive1_ArchiveMenu {width: 300px;background: #d85364;border: 1px solid #ffffff;color: #ffffff;text-transform:uppercase;letter-spacing: 1px;font-size: 10px;font-family: verdana;}

(c) tyler, MRUwisko

Brak komentarzy:

Prześlij komentarz