Komercyjnie
noskowicz.klaudia@gmail.com

lub

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

x

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

x
+

Co będzie?

  • Rise of Fayren zamówienie
  • Szablon jak strona instrukcja
  • Szablon do opowiadań
  • Szablon rpg

Szukaj

x

Responsywne popularne posty

Prosta instrukcja na popularne posty przedstawione w formie responsywnego obrazka.



Krok 1.
Dodaj gadżet Popularne posty, zaznacz miniaturka obrazu, odznacz fragment

Krok 2. 
Wejdź w HTML i znajdź fragment podany poniżej, a następnie zmień 72 na np. 500.


 <div class='item-thumbnail'>
                <a expr:href='data:post.href' target='_blank'>
                  <b:with value='data:post.featuredImage.isResizable                                  ? resizeImage(data:post.featuredImage, 72, &quot;1:1&quot;)                                  : data:post.thumbnail' var='image'>
                    <img alt='' border='0' expr:src='data:image'/>
                  </b:with>
                </a>
              </div>

Krok 3.
Wejdź w css i dodaj: 


#PopularPosts1 { clear:both; padding:0; margin:0; }
#PopularPosts1 ul { list-style-type:none; padding:0; margin:0; }
#PopularPosts1 img{ width:100%; height:auto; padding:0; margin:0; }
.PopularPosts .item-thumbnail {width: 100%; margin: 0;}
.popular-posts ul li {float: left; position: relative;}

#PopularPosts1 li{ width: 9.7%; display: inline-block; padding:0.5%; margin:0;}
#PopularPosts1 li{ opacity: 0.5; }
#PopularPosts1 li:hover { opacity:1; }


Interesuje was tylko pogrubiona część, którą musicie pod siebie dopasować. Jeżeli chcecie, by zdjęcia się ze sobą stykały, ustawcie padding na 0%. Przy dodawaniu gadżetu mogliście wybrać ile postów ma się pokazywać. U mnie jest to 6 postów + padding 0.3%, więc robię tak:
0.3 x 2 (dwa boki zdjęcia) x 6 (liczba zdjęć) =  3,6
100 - 3,6 = 96,4
96,4 : 6(liczba zdjęć) = 16,0666666667
Czyli width: 16.0666666667%

Przy paddingu 0% i np. 8 zdjęć:
100:8= width: 12.5%

Poniżej pogrubionej części - #PopularPosts1 li, #PopularPosts1 li:hover macie efekt po najechaniu, który możecie zmieniać albo usunąć. 

Brak komentarzy:

Prześlij komentarz

by Rinne Lasair | credits: helplogger