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

piątek, 7 czerwca 2013

Blog pager, czyli dwa słowa o starszy/nowy post

Powiedzmy, że dziwiłam się, że nikt o to nie pytał, bo mnie bardzo, bardzo, bardzo drażnił wygląd blog-pagera znanego jako "starszy post/nowszy post". Nowszy ucieka namiętnie w lewo, a starszy w prawo, no nic tylko krzyczeć wniebogłosy, jak to cholerstwo złożyć do kupy!? Jeśli ktoś miał ochotę zrobić to samo, jego prośby zostaną wysłuchane i w poniższym poście będziemy składać nasz uroczy blog-pager do stanu w jakim wyglądać powinien każdy porządny blog-pager!

Leniwych zapraszam na sam koniec postu :)

Dobrze, a więc zaczynamy! Panie i Panowie, na początek:
Wchodzimy w Szablon > Edycja kodu HTML > Wyszukujemy "BLOG1" > Rozszerzamy zawartość jednokrotnie > Szukamy w poniższych rozszerzeniach <b:includable id='nextprev'> i otwieramy zawartość. 

Naszym oczom powinno się ukazać coś takiego:
<b:includable id='nextprev'>
  <div class='blog-pager' id='blog-pager'>
    <b:if cond='data:newerPageUrl'>
      <span id='blog-pager-newer-link'>
      <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
      </span>
    </b:if>
    <b:if cond='data:olderPageUrl'>
      <span id='blog-pager-older-link'>
      <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
      </span>
    </b:if>
    <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
    <b:if cond='data:mobileLinkUrl'>
      <div class='blog-mobile-link'>
        <a expr:href='data:mobileLinkUrl'><data:mobileLinkMsg/></a>
      </div>
    </b:if>
  </div>
  <div class='clear'/>
</b:includable>
Teraz pousuwamy parę rzeczy, które tu przeszkadzają, czyli ( zaznaczony na czerwono tekst poniżej usuwamy!):
<b:includable id='nextprev'>
  <div class='blog-pager' id='blog-pager'>
    <b:if cond='data:newerPageUrl'>
      <span id='blog-pager-newer-link'>      <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
      </span>    </b:if>
    <b:if cond='data:olderPageUrl'>
      <span id='blog-pager-older-link'>      <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
      </span>    </b:if>
    <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
    <b:if cond='data:mobileLinkUrl'>
      <div class='blog-mobile-link'>
        <a expr:href='data:mobileLinkUrl'><data:mobileLinkMsg/></a>
      </div>
    </b:if>
  </div>
  <div class='clear'/>
</b:includable>
Teraz będziemy przerzucać to i owo, aby nam wszystko pasowało:
To:
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a> 
przerzucamy nad  to:
 <b:if cond='data:olderPageUrl'>
          <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
        </b:if>

I moi mili to na tyle. Przed niespodzianką dla leniwych dodatkowo poniżej krótkie przypomnienie jak zamienić starszy/nowy post na własny tekst. ;]

 Dla nowszy post:
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><WPISZ TEKST></a>

Dla strony głównej:
<a class='home-link' expr:href='data:blog.homepageUrl'><WPISZ TEKST></a>

Dla starszy post:
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'>WPISZ TEKST</a>

A teraz niespodzianka dla leniwych, czyli wyszukujemy tak samo jak na początku, ale kod z pierwszej ramki ( cytatu ) zamieńcie na:
<b:includable id='nextprev'>
  <div class='blog-pager' id='blog-pager'>
    <b:if cond='data:newerPageUrl'>
 
      <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
 
    </b:if>
    <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
    <b:if cond='data:olderPageUrl'>
 
      <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
 
    </b:if>
    <b:if cond='data:mobileLinkUrl'>
      <div class='blog-mobile-link'>
        <a expr:href='data:mobileLinkUrl'><data:mobileLinkMsg/></a>
      </div>
    </b:if>
  </div>
  <div class='clear'/>
</b:includable>

Przypominam o Waszych propozycjach na kolejne posty. Jeśli macie jakiś pomysł śmiało piszcie pod najnowszym postem lub w tagboardzie!

19 komentarzy:

  1. Może instrukcja na to, aby linki w linkach, stronach (w linkach bocznych), etykietach, archiwum tło pod poszczególnymi linkami było równe? Od brzegu do brzegu całego widgetu? :) Bo mi zawsze robi długość tła na długości tekstu wpisanego w linku.

    OdpowiedzUsuń
    Odpowiedzi
    1. Aj, wyjaśnimy to szybciej, tylko napisz na maila ( tylko zaznaczam - od lektury o fizyce jądrowej, w mojej głowie jądra atomowe rozszczepiają się w sposób bardzo niekontrolowany(he?) co skutkuje m.in. chwilową głupotą ) :)

      Usuń
  2. Uwielbiam twojego bloga!! Dzięki twoim instrukcjom stworzyłam parę ciekawych efektów w moim nowym szablonie, który za niedługo pojawi się na blogu :)
    Tak w ogóle to bardzo podoba mi się twój szablon, jest taki delikatny...
    Dodaję do kredytów i ulubionych :)
    Rose-Perdu :)

    OdpowiedzUsuń
    Odpowiedzi
    1. Bardzo mnie to cieszy i oczywiście z niecierpliwością wyczekuje tego nowego szablonu ;) Jakby z czymś był problem to oczywiście służę pomocą, proszę się nawet nie zastanawiać, tylko od razu pisać :)
      I bardzo dziękuję również za miłe słowo o szablonie, niezwykle przyjemnie czyta się tego typu komentarze :P

      Usuń
  3. O super,dziękuję!Na pewno się przyda:)Co do tego mam pytanie...jak pomniejszyć starszy post,nowszy post oraz strona główna?i jak dodać kolor jako obramowanie?

    OdpowiedzUsuń
  4. Dziękuję bardzo,jak nabiorę chęci do css wypróbuje:)

    OdpowiedzUsuń
  5. Cześć, mam prośbę. Dodałabyś instrukcję na wykonanie takich stron jak w tym szablonie? http://hostuje.net/file.php?id=f1e0c081d893a7813d2ad450e4db608f
    Jeśli oczywiście wiesz jak i masz ochotę :)

    OdpowiedzUsuń
    Odpowiedzi
    1. Naturalnie, że wykonałabym. :) Tylko skromne pytanko: chodzi o to, że linki po lewo są "nałożone" z lewa ( czy tam prawa ) na post czy o coś innego. No cóż, jakbyś mogła po prostu to ciut dokładniej wyjaśnić, żeby instrukcja nie mijała się z celem ;>

      Usuń
  6. Cześć! :) Mam osoboste życzenie co do szablonu: delikatny, kobiecy, minimalistyczny szablon w kolorach bezchmurnego nieba (hehe). Taki szablon typowy na pamiętnik, blog refleksyjny.. :)

    OdpowiedzUsuń
  7. Witaj,
    z tej strony redakcja Katalogu grafików.

    Chcieliśmy poinformować o gali rozdania certyfikatów Graphic Award 2013. Więcej znajdziesz pod adresem:

    graphic-award-2013.blogspot.com

    Serdecznie zapraszamy!

    OdpowiedzUsuń
  8. Hej:)Jakbyś znalazła czas (bo to może mniej istotne,ale trochę nad tym siedzę) Korzystałam z tej strony http://manatopia.org/tutorials,żeby zmienić efekt paska po prawej stronie.Udało mi się,jednak nie do końca jak chciałam (cały zrobił mi się jednego koloru) jak mam poprawić,żeby wyglądał mniej więcej jak u Ciebie?Może mam błędy w kodzie?Pozwalam zajrzeć w moje kody :)Pozdrawiam!:)

    OdpowiedzUsuń
    Odpowiedzi
    1. Ojojojojoj, już pędzę z pomocą :)

      Usuń
  9. Szłam według instrukcji i nic mi nie wyszło.

    OdpowiedzUsuń
    Odpowiedzi
    1. Niemożliwe. A próbowałaś wkleić podany na samym końcu kod?

      Usuń
  10. Jestem w tym kompletnie ciemna... ale nie mam w ogóle na blogu nic w podobie starsze/nowsze posty.. jak to "włączyć"? POMOCY :P

    OdpowiedzUsuń
    Odpowiedzi
    1. Drogie Panie <3 To po prostu musi być, gdyż jest stałym elementem bloga. Jeśli nie ma to najprawbodobniej na blogu jest za mało postów i po prostu nie tworzy się druga strona albo ( co wynika z pierwszego ) mimo paru postów na stronie ustawienia warunkują np. wyświetlenie większej ilości wpisów.
      No chyba, że chodzi o coś innego. W takim wypadku, przepraszam, ale najwyraźniej nie zrozumiałam przesłania. :)

      Usuń
  11. W które miejsce należy wkleić nowy tekst: starszy, nowszy post?

    OdpowiedzUsuń
  12. W pierwszym sposobie w kod wdarł się błąd i zamiast generować odnośniki do starszego i nowszego posta i strony głównej, kod generuje dwa razy odnośnik do starszego posta (nie ma strony głównej). Tak tylko nadmieniam. Dziękuję za poradnik i pozdrawiam.

    OdpowiedzUsuń