Modyfikacje - Post-header & Post-footer

Powyżej: Przykładowy efekt

 Niech Was tytuł nie myli, bo modyfikacje przeprowadzimy jakby nie patrzeć w calutkim poście. ( Anatomia była dosyć uboga w modyfikacje, dlatego czas to uzupełnić ). Jak dobrze pójdzie to nawet nie zajrzymy do kodu HTML, tylko całość odbędzie się w dostosowywaniu w zaawansowanych projektanta. 

Ostatnio mieliśmy efekt dla komentarzy i będziemy się teraz jeszcze bardziej w te modyfikacje zgłębiać. Tak czy inaczej dzisiaj część pierwsza ( prawdopodobnie, coś jeszcze na pewno wymyślę, w związku z czym mam cichą nadzieję, że kolejny post o podobnych rzeczach uda się opublikować ), dlatego aż tak się nie nakombinujemy, a przeprowadzimy skromne zmiany, w postaci wstawienia gdzieniegdzie dodatkowych znaków i tym podobnych rzeczy. 

ETYKIETY W POŚCIE:

<span class='post-labels'>
        <b:if cond='data:post.labels'>
          <data:postLabelsLabel/>
          <b:loop values='data:post.labels' var='label'>
            <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
          </b:loop>
        </b:if>
      </span> 

b:loop wiemy, że działa jako wyliczenie, podobnie jak w archiwum bloga. Tutaj jednak nie wyliczamy miesięcy, a etykiety jakich użyliśmy w danym poście.  <data:postLabelsLabel/> to nazwa przed wyliczeniem np. Etykiety:, Labels: i co nam przyjdzie do głowy. Zmiana jest możliwa w zwyczajnej edycji postu, także nie ma się co nad tym rozczulać.
Nie wiem czy przyuważyliście przecinek, ale to ostatnio moja ulubiona zmiana. Nie lubię przecinka więc zamieniam go + lub -, albo po prostu to usuwam.

POST-HEADER & POST-FOOTER
Instrukcja jest dla post-headera, ale można jej używać zarówno w post-headerze jak i w post-footerze, a także w każdej innej klasie z elementami bloggera. 
Ah, lubię modyfikacje z tym cholerstwem. Najnowszą widzicie na blogu. Taka skromna zmiana, ale wbrew pozorom dosyć ciężko się ją robiło, bo span nie chciał działać, ale na końcu zadziałał. Ale od początku.
Każda część, czy to data, czy to komentarz, etykiety, cokolwiek w większości jest podana jako span. Przykład wyżej kod etykiet zaczyna się właśnie od tego. Dlatego szukając efektu dla pojedynczej części, ale powtarzającej się dla każdej opcji użyjemy kodu: .post-header span. Logiczne, nie?
Oczywiście używając tego możemy także dodać kod dla post-headera np. padding, który bądź co bądź jest tutaj konieczny. Dlatego lecimy z przykładem, czyli piszemy kod ( ja go zerżnę ze swojego kodu ):

.post-header span{text-align:center;padding:2px;margin-right:3px;font: normal 7pt arial; color: #666666; letter-spacing: 1px; text-transform:uppercase; background:#fbfbfb; margin-bottom: 10px; }.post-header { padding-left:8px;}

Od razu dodam, że efekt jest wręcz fatalny dla autora. Tutaj mamy dwa spany i oba się modyfikują, dlatego najlepiej dać właśnie np. datę i komentarze na górę i dopiero używać kodu.  
Tutaj nie potrzeba żadnych zmian w kodzie HTML, działamy samym CSS'em. Oczywiście możemy to zrobić również po kolei czyli:

.post-timestamp, .post-comment-link, post-author{text-align:center;padding:2px;margin-right:3px;font: normal 7pt arial; color: #666666; letter-spacing: 1px; text-transform:uppercase; background:#fbfbfb; margin-bottom: 10px; }

Efekt ten sam. Tylko tutaj można dodać spokojnie autora, ponieważ działamy na całości, a nie na spanach, dlatego obejdzie się bez niespodziewanych efektów.
Możemy też przemieszczać powyższe elementy, ale skutki tego niekiedy mogę być tragiczne. Mimo tego spróbujmy, mamy parę linków i chcemy, aby: raz - były w prawej części postu, dwa - były jedno pod drugim, trzy - nie psuły całej reszty tj. nie wchodziły na tytuł. No to dobra, patrząc na to logicznie i na prosty rozum będziemy musieli użyć:

• display:block, aby elementy ustawiły się jedno pod drugim;
• width:100px; pozwoli nam ustalić długość;
• margin-left:415px; przesunie nam elementy na prawo ( wartość zależy od postu );

Ważnym etapem będzie także zmiana margin-bottom i dodanie margin-top, ale to za chwilkę, póki co nasz kod wygląda tak:

.post-timestamp, .post-comment-link, .post-author{text-align:center;padding:2px;margin-right:3px;font: normal 7pt arial; color: #666666; letter-spacing: 1px; text-transform:uppercase; background:#ddd;display:block;width:100px; margin-left:415px;}
.post-header { padding-left:8px;}

Elementy powinny się stykać jedno z drugim. Dodajmy jeszcze margin-bottom:1px, aby wszystko było elegancko od siebie oddzielone:

.post-timestamp, .post-comment-link, .post-author{text-align:center;padding:2px;margin-right:3px;font: normal 7pt arial; color: #666666; letter-spacing: 1px; text-transform:uppercase; background:#ddd;display:block;width:100px; margin-left:415px;margin-bottom:1px;}
.post-header { padding-left:8px;} 

Dobra, mamy całość już po prawej stronie, ale jeszcze chcemy by było u góry postu, dlatego teraz nie dodajemy kolejnego margin-top dla pojedynczych elementów, ale działamy na całym post-headerze.

.post-timestamp, .post-comment-link, .post-author{text-align:center;padding:2px;margin-right:3px;font: normal 7pt arial; color: #666666; letter-spacing: 1px; text-transform:uppercase; background:#ddd;display:block;width:100px; margin-left:415px;margin-bottom:1px;}
.post-header { padding-left:8px;margin-top:-60px;}

Wszystko powinno być w porządku. No chyba, że mamy za długi tytuł posta. W takim wypadku należy zmniejszyć długość tego tytułu, a to już rzecz łatwa.
Na koniec  dodam jeszcze, że jak piszecie dłuższe posty, czyli na dwie linijki to margin-top dla post-header będzie większy ( ok. 45-50px; zależy też od szerokości panelu posta ), a jak krótkie albo takie, które nie przekraczają jednej linijki margin-top będzie mniejszy ( 30-35px;)
Dodam jeszcze, że efekt robiony za pomocą szablon > dostosuj, dlatego łatwo się przyswaja. :)

Jak widać szybko nowy post, bo jutro mam masę zastępstw w szkole, a lekcji mało i większość na poniedziałek, dlatego poświęciłam godzinkę i post się napisał. ;) Oby więcej takich dni! :)