poniedziałek, 27 maja 2013

Dostowywanie szablonu - krok 3 - posty

Post to jest zdecydowanie jedna z łatwiejszych rzeczy, które dostosowuje w blogu. Jego sprawa jest zawsze  konkretna i krótka, także nie poświęcam wiele czasu na tą część. Można by to nazwać nawet detalem, gdyż zazwyczaj post robię pod sam koniec,... tak jakoś zawsze o nim zapominam.
<blogitembody>
Mimo prostoty szablonu, jednak mamy niemało selektorów właśnie z nim związanym. Do najważniejszych należą:

  • .post-outer {odnosi się do postu, ale zahacza też o jego tytuł, datę, etykiety itp.'}
  • .post-outer img{ustawienia obrazka występującego w poście, przeważnie ustawia się tutaj jego maksymalną szerokość}
  • .post-body { nasz post z wyłączeniem tytułu i daty, etykiet; tylko zawartość postu. }
  • .post-header { odnosi się do autora, daty, komentarzy pod/lub nad postem; } 
  • .post-footer { stopka posta;}
  • .post-labels { etykiety w poście;}
  • blockquote { jeśli chcemy mieć ciut bardziej finezyjny i rzucający się w oczy cytat w poście, ten selektor Wam w tym pomoże;}\
  • h2.date-header { data w poście. Sporadycznie używany, jeśli jednak data ma mieć inne właściwości niż tytuł gadżetów, jest rzeczą konieczną }
  • h3.post-title, h4 { tytuł postu;}

Cóz więcej Wam tu wyjaśniać. Kilka krótkich ciekawostek.
Po pierwsze używając .post-outer mamy efekt dla pojedynczych postów, to oznacza, że posty "nie będą się stykać". Możecie to zobaczyć między innymi u mnie na blogu, a także na większości szablonów. Chcąc, nie wyodrębniać i jednego, i drugiego, i nawet trzeciego postu polecam używać po prostu #Blog1 - jest to ID postów w blogu, które możemy sprawdzić wchodzą w układ bloga i klikając posty w blogu. Pojawia nam się wówczas znane wszystkim okienko, ale nie wiem czy większość z Was wie, że na końcu adresu url, tego czy innego gadżetu mamy jego ID. Tym sposobem możemy modyfikować pojedyncze sekcje w blogu, a także poznawać ID danych gadżetów, które potem możemy modyfikować, chociażby dodając kod CSS w projektancie szablonów.
http://www.blogger.com/rearrange?blogID=1963577186215401607&action=editWidget&sectionId=main&widgetType=null&widgetId=Blog1
Cóz więcej Wam tu wyjaśniać. Kilka krótkich ciekawostek.
O post-headerze, dacie i tytule nie będzie się szeroko rozpisywać ze względu na to, że wszystko możecie przeczytać i dowiedzieć się z tego - szeroko opisanego - postu: data, tytuł i post-header - dostosowywanie 

Ciut więcej można powiedzieć o blockquote, czyli o selektorze, który pomaga nam dostosowywać cytaty w blogu. Cytaty w "stanie podstawowym" ( fizyka mnie bierze, wybaczcie mi tę nieformalność w tej chwili, ale przez ostatnie dni nasłuchałam się o jądrach w stanie wzbudzonym, podstawowym i kilku równie ciekawych rzeczy ) to po prostu zwykłe pole zwężone w środku postu. Oczywiście chcąc dopracowywać dalej nasz blog użycie selektora blockquote wydaje się być konieczne.
 Powiem tutaj o jednym z przykładów stworzenia cytatu. A mianowicie właśnie takich jak na blogu. Jak widzicie cytat ma suwak. Zmusiła mnie do tego niekiedy zawrotna wielkość niektórych kodów; gdyby nie suwak mój post ciągnął by się w nieskończoność, a tak, to sobie we własnym zakresie, kto jest zainteresowany rusza suwaczkiem w poszukiwaniu kolejnych informacji.
Także zdecydowanie polecam to autorom blogów, którzy w cytatach umieszczają całą masę różnych rzeczy:

blockquote {font-family:courier new;height:50px;overflow-y:scroll; padding:5px; background:#fbfbfb;margin-left:00px;}
height - to nic innego jak wysokość cytatu. Chcemy, aby cytat nie był dłuższy tyle i tyle, a w taki sposób właśnie go do tego zmuszamy... No, nie do końca. Aby całość działała poprawnie potrzebny jest overflow, czyli właściwość odpowiadająca za to co jest poza granicami, które wyznaczyliśmy. W tym przypadku chodzi nam o cechę pionową, więc zamiast zwykłego overflow dajemy overflow-y. Aby nam się suwak pojawił należy po prostu wpisać overflow-y:scroll, jak to mamy w kodzie powyżej. Overflow-x jest to suwak poziomy, tak na marginesie dodam.

</blogitembody>
To by było na tyle, jeśli chodzi o post. Jeśli jednak macie jakieś pytania dotyczące postu, nie zastanawiajcie się tylko zostawiajcie je pod postem, a odpowiedź na pewno otrzymacie. 


2 komentarze:

  1. Tak się zastanawiam i szukam wszędzie, ale nie mogę znaleźć odpowiedzi. Chodzi mi o wygląd postów jak ma kominek czy strona boska.pl posty są obok siebie, czyli tak jakby dwie kolumny postów, każdy obok siebie, nie wiem czy to możliwe na blogspocie.. proszę o szybką odpowiedź :))

    OdpowiedzUsuń
    Odpowiedzi
    1. Mnie zastanawia dokładnie to samo :)

      Usuń

- +
Szablon wykonany przez Tyler