Rinne Lasair | Blog: Responsywne półkafelkowe posty na bloggerze bez skryptów

» instrukcja » Responsywne półkafelkowe posty na bloggerze bez skryptów | Obrazek przed tytułem w poście

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 != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
   <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 == "item"'>
   <div class='post'> <data:post.title/> <data:post.body/></div>
    </b:if>
    <b:if cond='data:blog.pageType == "static_page"'>
    <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:

po:

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