tutoriale, szablony, web design

Pytania - Jeśli macie jakieś pytania lub uwagi, to zapraszam na nasz profil ask.fm. Postaramy odpowiedzieć na wszystkie pytania dotyczące szablonów, zamówień, jak również zaradzić conieco w sytuacji, gdzie szablon nie chce współpracować. Propozycje - Jeśli masz pomysł na ciekawą instrukcje, która mogłaby pomóc lub zainspirować wielu blogerów, daj nam znać! Z chęcią pomożemy! Propozycje możesz zostawić tutaj: Propozycje Pomoc - Gdyby ktoś desperacko szukał pomocy i wszystkie instrukcje go zawiodły, to jest e-mail tyler (bizarre1309@gmail.com ) i tam można pisać, mardzić na bloggera i resztę świata, no i ogólnie to też szukać pomocy. #idontjudge

poniedziałek, 24 czerwca 2013

Anatomia posta

     Nie dość, że czasu mi ostatnio brak, to jeszcze człowiek sobie wymyślił, że sobie ściągnie taką i taką grę i będzie w nią grał. Tylko człowiek nie pomyślał, że zainstalowanie tej gry to istne piekło... Ale spokojnie, dajcie mi parę dni i gra będzie śmigać tak jak to w założeniu powinna.
Tymczasem, moim mili, przechodzimy do dzisiejszego posta. Jak w tytule o anatomii właśnie tego posta słów  kilka. Będzie dużo obrazków, dużo informacji i spróbujemy się tymi kodami właśnie pobawić. 
Zabawę zaczynamy od znalezienia Blog1 , gdzie zwracamy uwagę na "main" i "post".



Jeśli można to na sam początek zajmiemy się zawartością main, czyli lecimy od góry do dołu.
Przed całą resztą pozwolę sobie skomentować pewien fakt, mniej lub bardziej ważny. Co ciekawe kod HTML daty znajduje się w części "main", a nie jak to się każdy może spodziewać w "post", jednak - o czym za chwile - spokojnie, bez wyrzutów sumienia możemy zmieniać pozycje danych rzeczy. Tak w sumie to na tym ten post ma również polegać. Przecież post nie może być tylko o kodach, nie?

DATA:
  <b:if cond='data:post.dateHeader'>
          <h2 class='date-header'><span><data:post.dateHeader/></span></h2>
        </b:if>
Edytując datę używamy h2.date-header  datę z kolei jeśli komuś się to nie podoba i chce sobie zmienić selektor edytujący datę to: h2 zamienia na div, a date-header na wymyślony selektor np. dataGT. W tym przypadku zamiast h2.date-header wpiszemy właśnie dataGT.
POST ( bez daty ):
   <div class='post-outer'>
        <b:include data='post' name='post'/>
        <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
          <b:include data='post' name='comment_picker'/>
        </b:if>
        <b:if cond='data:blog.pageType == &quot;item&quot;'>
          <b:include data='post' name='comment_picker'/>
        </b:if>
        </div> 
O ile korzystne i nieskutkujące zagładą bloga jest przemieszczanie daty, tak posta proponowałabym zostawić w spokoju.
I znowu jeśli nie podoba nam się post-outer i mamy jakieś niecne zamiary względem całego postu ( no dobra, bez daty ) to zmieniamy tenże post-outer na np. postGT.
Tyle co do zakładki "main".

Przechodzimy dalej, do tego - niech będzie - bardziej atrakcyjnego trójkącika ( >?< ), czyli "post".
Na samym początku w nasze oczy rzuca się kod na tytuł posta, o którym było mówione przy okazji Data, tytuł i pos-header.
<a expr:name='data:post.id'/>    <b:if cond='data:post.title'>      <h3 class='post-title entry-title' itemprop='name'>      <b:if cond='data:post.link'>        <a expr:href='data:post.link'><data:post.title/></a>      <b:else/>        <b:if cond='data:post.url'>          <b:if cond='data:blog.url != data:post.url'>            <a expr:href='data:post.url'><data:post.title/></a>          <b:else/>            <data:post.title/>          </b:if>        <b:else/>          <data:post.title/>        </b:if>      </b:if>      </h3>    </b:if>
Teraz żywy screen z szablonu Ghost River i jego tytułu posta.

Dalej w kolejce jest post-header, a jego anatomie przedstawię w tym oto obrazku:
Powyżej mamy niestety kody tylko i wyłącznie na link do komentarzy i datę, a co z resztą? No cóż, z tego co wiem są, żyją i póki co mają się dobrze.
Autor posta:
<span class='post-author vcard'>
        <b:if cond='data:top.showAuthor'>
          <data:top.authorLabel/>
            <b:if cond='data:post.authorProfileUrl'>
              <span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
                <meta expr:content='data:post.authorProfileUrl' itemprop='url'/>
                <a expr:href='data:post.authorProfileUrl' rel='author' title='author profile'>
                  <span itemprop='name'><data:post.author/></span>
                </a>
              </span>

Etykiety:
<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> 

Żeby nie było można je dodawać i to post-headera, i do post-footera, co nawet mamy zaproponowane w edycji postów w blogu w "układzie", jednak przy kombinacjach z kodem, czasami jest to niemożliwe, dlatego trzeba to poprzemieszczać. Albo wyrzucić poza jedno i drugie.

Z kolei kod HTML post-footera bardzo, ale to bardzo przypomina ten post-header, więc lecimy już z górki:
<div class='post-footer'>
    <div class='post-footer-line post-footer-line-1'>  <span.....</span> <span..... </span>
</div> </div>
Tadaaaaa, mamy to!
Z tego miejsca przypominam, że naprawdę fajnie się zmienia od czasu do czasu miejsce tychże rzeczy. Odrywamy się od monotonii i jednak, jesteśmy o krok bliżej w stronę całkowicie naszego kodu HTML ( ale nie liczcie, że takowy napiszecie na bloggera, jest to nie wykonalne, za dużo haczyków ).
A teraz, na samiutki koniec, trochę selektorów dla CSS'owych wariatów!

  • a.comment-link:link - link w poście do komentarzy. Przydaje się, gdy ktoś chce, aby czytelnik go nie przegapił! :D 
  • jump-link - efekt dla tych, którzy lubią szykować niespodzianki. Odpowiada za przycisk "więcej"
  • post-timestamp - efekt dla daty w post-header
  • a.timestampl-link:link - ewentualna opcja dla tego co powyżej
Mało nowych rzeczy, ale liczę na wybaczenie ( chociaż z drugiej strony, w bazie mamy już masę selektorów, jeszcze trochę i będziemy znać wszystkie! ). :( A teraz na ten sam, samotny koniec, koniec, jeszcze jedna rzecz, takie jedno małe skromne pytanko:
Czy ktoś z obecnych gra może w lola?

11 komentarzy:

  1. jestem paskudka, mnie głowa boli od samego patrzenia na te screeny w poście, a co dopiero w moim kodzie <3 (mistrzyni emotek w jednym komentarzu)

    OdpowiedzUsuń
    Odpowiedzi
    1. Wiem, widzę i razi to po oczach niemiłosiernie. Ale jak się czegoś tam będzie szukać to się chyba znajdzie ;3

      Usuń
  2. Pobrałam szablon Walking Travesty na http://czyta-sie.blogspot.com/

    OdpowiedzUsuń
  3. Odpowiedzi
    1. A dasz mi swojego maila ( ew. inny możliwy kontakt )? :D Bo tak głupio mi się w komentarzach rozpisywać.

      Usuń
  4. Cześć:) Przepraszam, że się nie odzywałam;* Trzeba nadrobić zaległości:) 'Anatomię' posta znam (szkoda, że nikt nie napisał takiego postu dużo, dużo wcześniej, zanim sama to ogarnęłam, metodą prób i błędów:p), niemniej fantastycznie, że stworzyłaś taki post:) Na pewno wielu osobom się przyda! O, i widzę, że pojawiła się nowa ramka na blogu z kolejnymi tematami postów:) Genialny pomysł:D O ile anatomia archiwum mnie nie zaskoczy, to jednak web design - trendy są już bardziej intrygujące, bo kompletnie nie wiem, co w tym poście będzie:p Zabierasz się za tworzenie stron www?:p Uchyl rąbka tajemnicy (btw. hejtuję to powiedzenie, ale jednocześnie mnie ono po prostu rozśmiesza, więc nie mogłam się powstrzymać:D) :) Pozdrawiam!

    OdpowiedzUsuń
  5. Chciałam odpisać w komentarzu, ale chyba wyślę wiadomość 'mejlę' xD Wyczekuj więc go, bo to będzie bardzo długi mejl:p

    OdpowiedzUsuń
  6. :O Co to za chińskie znaczki?!

    OdpowiedzUsuń
    Odpowiedzi
    1. hahah wygląda mało efektownie i elegancko, ale przyznaje, że ma to sens! xD

      Usuń
  7. Widziałam Twój komentarz na moim blogu próbnym. Mam nadzieję, że nie masz nic przeciwko temu, że zmieniłam tło i czcionkę? :)

    OdpowiedzUsuń
  8. Ten komentarz został usunięty przez autora.

    OdpowiedzUsuń