intrukcje szablony loga do druku poradniki nadruki
Responsive popular posts
Simple instruction for popular posts presented in the form of a responsive image. buy without animation
Step 1.

Add widget Popular posts, check image thumbnail, uncheck fragment.


Step 2.

Go to HTML and find code below, next change 72 to 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>


Step 3.

Go to CSS and add:





#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; }



You are only interested in the bold part that you need to change for yourself. If you want the pictures to come in contact, set the padding to 0%. When you was adding widget you could choose how many posts to show. For me its 6 + padding 0.3%, so:

0.3 x 2 (two sides of the picture) x 6 (number of photos) = 3,6

100 - 3,6 = 96,4

96,4 : 6(number of photos) = 16,0666666667

So width: 16.0666666667%


If padding 0% and for example 8 photos:

100:8= width: 12.5%


Below bold - #PopularPosts1 li, #PopularPosts1 li:hover you have hover effect that you can also change or delete.