czwartek, 27 czerwca 2013

Anatomia i modyfikacje archiwum.

Archiwum to jest jeden z bardziej skomplikowanych gadżetów, na jakie udało mi się natknąć w bloggerze, a także jednocześnie jest wyjątkowo ważną częścią każdego bloga czy strony. I czasem naprawdę ciężko się na niego patrzy, wszędzie to samo, dlatego dzisiaj  będziemy bawić się z archiwum, pozmieniamy tak, aby było fajnie, miło, przyjemnie i inaczej, a co najważniejsze po naszemu. Jeśli chcecie położyć kres monotonni Waszego archiwum, czytajcie dalej!

Archiwum można modyfikować na różne sposoby, najczęściej używając CSS'a. W przypadku dzisiejszej instrukcji będziemy się głównie skupiać na jego wersji HTML. Mimo to mam nadzieję, że nie zniechęcicie się szybko i razem z Zenkiem ( o tym później ) dotrwacie do samego końca.

Na początek krótkie, zalotne spojrzenie do wersji bazowej naszego archiwum. Jak widać id:

  • flat to archiwum w postaci listy;
  • interval - archiwum hierarchia;
  • menu - jako menu

Zaczniemy od środka, czyli od hierarchii. Na obrazku poniżej kolorem:
  • fioletowym oznaczono kod daty ( rok i miesiąc );
  • żółtym liczbę postów w danym roku/miesiącu;
  • różowym dany miesiąc;
  • niebieskim posty w miesiącu;


Jak sugeruje nam obrazek raczej nie powinniśmy kombinować za bardzo z częścią zaznaczoną na różowo i niebiesko...
Teraz co zrobić, aby wyglądało to inaczej. W przypadku hierarchii możemy dostosować ( oprócz czcionki itp. ) znaczki (?). W tym celu wyszukujemy id toggle! Tam znajdziemy możliwość zamiany strzałek na kropeczki, kwadraciki czy co nam się tylko podoba. 

Jeśli już udało nam się lekko pomieszać w kodzie archiwum "hierarchii" zabieramy się za flat, czyli za listę. Lista to nic innego jak wymienienie przez automat - przeważnie - miesięcy, w których to udało nam się maznąć post. Całość zza kulis wygląda mniej więcej tak:
Tutaj wiele bloggerów zamienia to za pomocą ( jak się mogę domyślać ) CSS, ale jeśli ktoś by chciał spróbować zrobić to samo, ale w HTML'u służę pomocną dłonią. Jak widać usuwamy i li, i ul. W przypadku usunięcia jednego powinna się pojawić cudna kropeczka obok miesięcy ( tj. wyliczenie ). Usuwać to można oczywiście również za pomocą list-style-type:none. Ale jak już się bawimy w webmasterów to bawimy się w nich w całości. 

Dobra, przechodzimy do menu. Kod będą kojarzyć wszyscy, którzy używają archiwum "szerokiej listy", tutaj niestety nie udało mi się zmodyfikować tego, aby miesiące zamienić na posty, ale nieustannie nad tym pracuje. No cóż, coś za coś, to może chociaż zmienimy jego wygląd?
Gdy spojrzycie w kod "szerokiej listy" znajdziecie dużo podobieństwa. Tutaj, za automatyczną część odpowiada b:loop - pozwala on na powtarzanie pewnej sekcji stałej, w tym przypadku miesięcy. Próbowałam to zmieniać i myśleć, jak by tu zrobić, aby miesiące zamienić na posty, ale blogger nie przepada za mną i nie dał mi odkryć tejże tajemnicy. Może innym razem!
Dzisiaj tylko jeden selektor, ale jakże ważny! :D No cóż, w tej kwestii udało mi się zrobić tylko coś takiego. Ale mam nadzieję, że to COŚ się podoba i się przyda. :)

Przepraszam za nieudolne obrazki!
W sobotę wyjeżdżam na wakacje i nie będę mieć możliwości zajrzeć do programu graficznego i nabazgrać coś, dlatego instrukcja nieco przyspieszona. No cóż, post o trendach zdecydowanie nie będzie wymagać używania czegoś innego niż internet, dlatego też pozwoliłam go przełożyć. Mam nadzieję, że mi wybaczycie. Oczywiście nie jadę do dżungli, komputer mieć będę i posty będą się pisać, a szablony robić...może tylko nieco rzadziej. 

Pozdrawiam!


7 komentarzy:

  1. Pobrałam szablon Walking Travesty na Graficzny Spis. :D

    OdpowiedzUsuń
  2. Właśnie miałam Cię poprosić o taką instrukcję.. Wchodzę na bloga i bum - zaciesz^^ Dziękuję, dziękuję, dziękuję! (:

    OdpowiedzUsuń
    Odpowiedzi
    1. Proszę uprzejmie :) Jak masz jakieś inne pomysły to pisz, z chęcią coś wykombinuję :P

      Usuń
  3. Emm... Ratunku.
    Z sposobem drugim zrobiłam tak, jak opisałaś, ale nie wychodzi. Wyskakuje mi "Błąd podczas analizowania pliku XML, wiersz 2432, kolumna 5: The element type "b:includable" must be terminated by the matching end-tag ""."
    Sprawdziłam i jest zakończone. Ogólnie to jako błędy mam zaznaczone kody (ul i html jest specjalnie odgrodzony, bo nie chciał mi się komentarz dodać)






    Pomocy?

    OdpowiedzUsuń
    Odpowiedzi
    1. Dasz screena ? Niestety jestem wzrokowcem :( Mam pewną teorię, ale wolałabym to zobaczyć.:>

      Usuń
  4. Jesteś genialna, dzięki wielkie! ;**

    OdpowiedzUsuń
  5. Świetna instrukcja , na pewno ją wykorzystam :D

    OdpowiedzUsuń

- +
Szablon wykonany przez Tyler