Do you need help or want to collaborate?


Zapisz się do newslettera!


What's next?

  • Burning moon 3d
  • Rise of Fayren order
  • Kawowa Mary order
  • Reaper free template
  • Burning rose logo
  • RPG template
  • Template for story
  • Real home/start page on blogspot instruction
  • Background video instruction
  • Flying balls instruction
  • Window on click - hidden scroll
  • Window on click instruction


On the right are links to all instructions. If you have problems with something, just ask me.
I remind you about adding credits and invite you to share the effects of your work.

Do you have an idea for an interesting tutorial?

Responsive popular posts

Template mobile version



Responsive popular posts

Simple instruction for popular posts presented in the form of a responsive image.

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'/>

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. 

Brak komentarzy:

Prześlij komentarz

by Rinne Lasair | credits: helplogger