katalog grafików
katalog granger
katalogowo
konstruktywna krytyka blogów
Mara-senpai

Co będzie?

  • Aktualizacja instrukcji 0/15
  • Simple Dark szablon
  • Simple Magic szablon

Witajcie na odnowionej stronie Rinne Lasair!

Nowa strona już jest, ale nadal czeka na kilka poprawek.

zobacz post

Nowy szablon Simple Magic już wkrótce!

Już niedługo pojawi się nowy szablon Simple Magic, który będzie zawierał możliwość dodania video na stronie startowej oraz będzie go można dowolnie edytować przez projektanta.

Zajrzyj do sklepu!

Rinne Lasair posiada teraz własny, oficjalny sklep. Znajdziecie tam również darmówki do pobrania!

przjedź do sklepu
Poniżej pokaże wam sposób na bardzo proste w wykonaniu półkafelkowe posty z automatycznym czytaj dalej i z możliwością zdecydowania ile znaków (tekstu) ma być pokazywanych oraz z obrazkiem przed tytułem posta (lub nie, można dowolnie modyfikować), a to wszystko bez zastosowania jakichkolwiek skryptów.

Krok 1.
Wchodzimy w HTML i szukamy gadżetu Blog1, a konkretnie tego fragmentu <b:includable id='post' var='post'>
Interesuje nas to co jest w środku, przestudiujcie trochę to co tam macie. Znajdziecie tam cały nasz post i wszystkie jego elementy, jak etykiety, komentarze, przyciski udostępniania itd.  Generalnie możecie usunąć wszystko co tam jest, w jego miejsce należy wkleić:


<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
   <div class='post'>

<div class='obrazek'>
<b:if cond='data:post.firstImageUrl'>
 <img expr:alt='data:post.title' expr:src='data:post.firstImageUrl'/>
 </b:if>
      </div>

<div class='tytulposta'>   
<a expr:href='data:post.link ? data:post.link : data:post.url'>
<data:post.title/>
</a>
  </div>

<div class='czas'>
<data:post.timestamp/>
         </div>

<div class='tekst'>
<b:eval expr='snippet(data:post.body, {length: 450, links: false, linebreaks: false})'/>
    </div>

<div class='czytajdalej'>
    <a expr:href='data:post.url'>czytaj dalej</a>
    </div>

  </div>
    </b:if>
    </b:if>
   
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
   <div class='post'> <data:post.title/> <data:post.body/></div>
    </b:if>
    <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
    <div class='post'> <data:post.title/><data:post.body/></div>
    </b:if>

      <div style='clear: both;'/>

Krok 2.
Teraz wystarczy już tylko dodać CSS. Podam wam parę przydatnych kodów:

Żeby posty nie były sklejone:
 .post {  position:relative; padding: 5px 0px; }

Obrazek pokaże się z boku i będzie się automatycznie skalował:
.obrazek img{ float:left; width:40%; height:auto; padding-right:10px;}

 Jeżeli macie obrazki w postach o różnych wielkościach i chcecie żeby pokazywał się tylko jeden format, możecie ustawić np.:
.obrazek img{ width:100%; height: 150px; object-fit:cover;}


W kodzie z Krok 1. obrazek pokazuje się przed tytułem, jeżeli chcecie to zmienić, to oczywiście wystarczy, że zmienicie położenie divu :D
Jeżeli chcecie zmienić ilość pokazywanego tekstu zedytujcie w kodzie 450, jeżeli chcecie, żeby linki były aktywne, usuńcie links: false, a jeżeli nie chcecie, żeby pokazywał się wielokropek, dodajcie ellipsis: false
Ważne! Przez warunkowanie <b:if> pokazujemy skrócone posty tylko na głównej itd., natomiast po kliknięciu w link posta/czytaj dalej przechodzimy już do <b:if> item, więc jeżeli chcecie, żeby też tam pokazywały się etykiety itd, to pamiętajcie by dodać je w tym miejscu.

Jeżeli chcecie dodać dodatkowe rzeczy, powiedzmy etykiety, to wystarczy dodać odpowiedni kod (najlepiej przed usunięciem wszystkiego skopiujcie sobie z post-footer to co chcecie), przykład:
przed:
 <span class='blogger-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>
        <b:include data='post' name='postQuickEdit'/>
          </span>

po:
 
<div class="etykiety">
          <b:loop values='data:post.labels' var='label'>
            <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='not data:label.isLast'>,</b:if>
          </b:loop> 
      </div>

Tu macie ich cały spis: Layouts Data Tags


Wybaczcie spóźnienie, ale tak nie ogarniam dni w tym tygodniu, myślałam, że sobotę mam wolną, a pracowałam (12h) xD A dzisiaj miałam małą renowacje pokoju 😈 Postaram się teraz pokombinować z tym kodem i dodać gotowce, może uda mi się stworzyć całkowicie kafelkowe posty :>

Koniecznie pochwalcie się efektami, jeżeli zamierzacie użyć tej instrukcji ❤️‍ 

Brak komentarzy:

Prześlij komentarz

Facebook

Kontakt

W sprawie współpracy lub pytań/pomocy rinne.lasair@gmail.com
W sprawach dotyczących zamówień lub sklepu/produktów noskowicz.klaudia@gmail.com
W każdej sprawie można również pisać na facebooka
Numer konta bankowego do przelewów: 96 1020 5558 0000 8802 3176 1645

Dodatkowe informacje

Cennik, Usługi, FAQ oraz formularz kontaktowy znajdują się na stronie głównej.
Portfolio jest na chwilę obecną niedostępne.