Commercially
noskowicz.klaudia@gmail.com

or

Do you need help or want to collaborate?
rinne.lasair@gmail.com

x

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

Tutoriale

Tutorials
Tutorials
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?

Proposition
Responsive popular posts
#HTML #CSS


Template mobile version
#CSS

Szukaj

x

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

Brak komentarzy:

Prześlij komentarz

by Rinne Lasair | credits: helplogger