Komercyjnie
noskowicz.klaudia@gmail.com

lub

Potrzebujesz w czymś pomocy lub chcesz napisać w sprawie współpracy?
rinne.lasair@gmail.com

Rinne ☽ Lasair
Klaudia ☾ Noskowicz

20.11 Skorpion ♏ | Gryfon | 165cm | Optymista

❤ DGD ~ Koty ~ BDO ~ Kosmos ~ Burza ~ Anime
💔 Horrory ~ Spoilery

Responsywne szablony na witrynę blogspot, loga, grafika 3d, animacje oraz tutoriale.

Główna Portfolio Blog
O mnie
Kontakt
+

Co będzie?

  • Nowy główny pewnie niedługo :>
  • Burning moon 3d
  • Simple Dark szablon
  • Szablon do opowiadań
  • Szablon RPG

Szukaj

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 != &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

by Rinne Lasair | credits: helplogger