Nowy szablon Dark magic!
Już teraz możesz pobrać darmowy szablon Dark magic na swojego bloga. Wystarczy że wyślesz maila o treści na adres
Right now you can download free template Dark magic on your blog! You just need to send me a raven!
przjedź do posta
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, "1:1") : data:post.thumbnail' var='image'>
<img alt='' border='0' expr:src='data:image'/>
</b:with>
</a>
</div>
<a expr:href='data:post.href' target='_blank'>
<b:with value='data:post.featuredImage.isResizable ? resizeImage(data:post.featuredImage, 72, "1:1") : 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; }
#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ąć.
Subskrybuj:
Komentarze do posta (Atom)
Brak komentarzy:
Prześlij komentarz