Jak zrobić własne archiwum z podziałem rocznym

06.05.2015


Nie wiedziałam jak ładnie sformułować tytuł wpisu, ale myślę, że każdy mniej więcej wie o co chodzi, a jak nie to zaraz się dowie z poniższej instrukcji na zrobienie takiego archiwum. Ta instrukcja pomoże wam w zrobieniu swojego własnego archiwum z podziałem rocznym. Jedyny minus tego archiwum to to, że trzeba kolejne roczniki dodawać ręcznie, ale co to za problem wykonywać to raz do roku? Myślę, że nie duży, a efekt jest na swój sposób niepowtarzalny. Po tym krótkim wstępie przejdźmy do naszej instrukcji.

1. Na początek, bardzo prosto. Układ - dodaj gadżet.


2. Wybieramy HTML/JavaScript


3. Teraz musimy stworzyć nasz kod. Najpierw musimy nadać klasę naszemu archiwum czyli to co będzie naszym selektorem. w moim przypadku jest to <div class= 'ar'> czyli ar jest moim selektorem.


4. Dalsza część instrukcji będzie opierać się na dalszej części kodu, który należy wkleić pod <div class="ar"> i podlinkowaniu naszych dat.
Zacznijmy od tego jak będzie wyglądała dalsza cześć kodu

<div style="text-align: left;">
<a href="LINK">NAZWA</a>
<a href="LINK">NAZWA</a>
</div>
<div style="text-align: center;">
<div style="text-align: left;">
<br /></div>
</div></div>

Tu chyba nic nie muszę tłumaczyć. Tutaj gdzie link to wstawiamy oczywiście nasz odnośnik do wszystkich wpisów np. z roku 2015, 2014, a nazwa to oczywiście nasz rok, czyli 2015, 2014, 2013 itd.

Linki do archiwum


Przechodzimy na stronę naszego bloga. Musimy mieć ustawione archiwum na "hierarchia" ponieważ tam ładnie mamy wszystko podzielone. Klikamy na rok. Na górze będziemy mieli link, który należy skopiować i wkleić w odpowiednie miejsce w kodzie.






Nasz uzupełniony kod powinien wyglądać tak:


Klikamy zapisz. Jak możemy zobaczyć nasze archiwum nie wygląda zbyt ciekawie, ale zaraz to zmienimy.



Przejdźmy do kolejnego punktu, który będzie dotyczył kodu CSS. Musimy nadać jakiś wygląd temu archiwum.

Kod CSS

Przechodzimy do szablon-dostosuj-zaawansowane- dodaj arkusz CSS



Użyjemy trzech kodów. Pierwszy będzie dotyczył linków w archiwum, drugi będzie dotyczył wyglądu odwiedzonych linków, a trzeci linków po najechaniu na nie kursorem.
Kod CSS będzie wyglądał w tym wypadku tak samo jak przy każdym innym elemencie jakiemu nadajemy dany styl tylko będzie miał inny selektor. Moje kody wyglądają tak:


Pamiętajcie, że w miejscu mojego .ar będzie wasz selektor czyli to co wpisaliście na początku w <div class="wasza nazwa">. Jak widzicie na załączonym zdjęciu tutaj może pojawić się wszystko. Przeanalizujmy sobie wszystko co ja mam u siebie.
display: inline-block; - odpowiada za to aby każda linijka była na taką samą szerokość co nasza kolumna boczna, jeśli ją usuniemy, nasze daty z archiwum będą obok siebie - wszystko zależy od was jak kod będzie wyglądał.
width: 100%; - odpowiada za pełną szerokość
margin-bottom: 5px; - jest to odległość między jednym a drugim
background: #ffb4a3; - tło
font-size: 14px; - wielkość czcionki
text-transform: uppercase; - czcionka drukowana
color: #4a6285; - kolor czcionki
font-family: Open Sans; - rodzaj czcionki
padding: 5px; - marginesy wewnętrzne
padding-left: 5px; - położenie lewego marginesu

Tutaj taka mała informacja dotycząca czcionek. Jak widzicie używam czcionki niestandardowej, więc jeśli i wy taką czcionkę niestandardową chcecie to musicie ją najpierw wgrać do szablonu inaczej po ustawieniu takiej czcionki, nie pojawi się nam ona, a zmieni się na Times New Roman. Jeśli chcecie instrukcje jak taką czcionkę wgrać to dajcie znać w komentarzu, a wtedy postaram się opublikować instrukcje przy najbliższym wpisie (piątek)

Efekt w moim przypadku wygląda tak:


Jednak jeśli dodacie do kodu text-align: center; efekt będzie następujący:

Jeśli pozbędziecie się z kodu display: inline-block; oraz width: 100%; efekt będzie taki:



Powyższy kod jest przykładowy, każdy może stworzyć swój własny. Można po swojemu coś dodać, coś usunąć. 

10 komentarzy:

  1. Bardzo przydatny post. Szkoda ze w moim szablonie cieżko sie sprawdza działanie :(

    OdpowiedzUsuń
    Odpowiedzi
    1. Z tego co widziałam masz pobrany szablon, wiem coś o tym też miałam problemy z pobranymi szablonami.

      Usuń
  2. genialna instrukcja ;) spróbuję wykorzystać przy zmianie szablonu ;) http://creamshine.blogspot.com

    OdpowiedzUsuń
  3. No nie jest to bardzo, bardzo trudne :)
    Może kiedyś się pokuszę- wiem, gdzie szukać pomocy :)

    OdpowiedzUsuń
    Odpowiedzi
    1. Bardzo często tak jest, że jak coś nam się wydaje trudne to w rzeczywistości jest baardzo proste :)

      Usuń
  4. Przyda mi sie twój post, ostatnio zastanawialam się jak to wykonać <3 <3
    Dziękuje kochana!!!!!
    zapraszam do mnie http://365daysinblack.blogspot.com

    OdpowiedzUsuń
  5. przydatne :)

    ewamaliszewskaoff.blogspot.com

    OdpowiedzUsuń
  6. Napisałam do Ciebie maila, bo podoba mi się to, co robisz :) Pozdrawiam!

    OdpowiedzUsuń

- Komentarze takie jak: spam, obserwacja za obserwacje, prośby o klikanie w banery etc. zostają usuwane - ZAPAMIĘTAJ! MÓJ BLOG TO NIE TABLICA OGŁOSZEŃ
- Uznaje tylko konstruktywną krytykę
- Każdy komentarz to motywacja dla mnie.
- Weryfikacja obrazkowa wyłączona