Tag Yutups

Diposting oleh On 22.37.00 with No comments

1. Bentuk Besar satu dan 4 kecil di samping

.post-outer:nth-child(1) .post  {width:45%;height:auto;}
.post-outer:nth-child(1) .posts-thumb{margin-right:10px;float:left;width:250px;height:140px;padding-bottom:10px}
.post-outer:nth-child(1)  .post h2{font-size:20px;}
.post-outer:nth-child(1)  .post-body {height:auto}
.post-outer:nth-child(1) .summary{font-size:14px;display:block}
 .post-outer:nth-child(2) .post, .post-outer:nth-child(3) .post, .post-outer:nth-child(4) .post,.post-outer:nth-child(5) .post  {width:45%;height:auto;}
.post-outer:nth-child(2) .posts-thumb,.post-outer:nth-child(3) .posts-thumb,.post-outer:nth-child(4) .posts-thumb,.post-outer:nth-child(5) .posts-thumb{display:none}
.post-outer:nth-child(2)  .post-body,.post-outer:nth-child(3)  .post-body,.post-outer:nth-child(4)  .post-body,.post-outer:nth-child(5)  .post-body {height:auto}
.post-outer:nth-child(2) .summary,.post-outer:nth-child(3) .summary,.post-outer:nth-child(4) .summary, .post-outer:nth-child(5) .summary{display:none}

2. Bentuk dua kolom dengan gambar dan judul berdampingan

.post-outer:nth-child(9) .post, .post-outer:nth-child(10) .post,.post-outer:nth-child(11) .post, .post-outer:nth-child(12) .post,.post-outer:nth-child(13) .post, .post-outer:nth-child(14) .post {width:45%;height:auto;}
.post-outer:nth-child(9) .posts-thumb,.post-outer:nth-child(10) .posts-thumb,.post-outer:nth-child(11) .posts-thumb,.post-outer:nth-child(12) .posts-thumb,.post-outer:nth-child(13) .posts-thumb,.post-outer:nth-child(14) .posts-thumb{margin-right:10px;float:left;width:30%;height:60px;padding-bottom:0}
.post-outer:nth-child(9) .post-body,.post-outer:nth-child(10) .post-body,.post-outer:nth-child(11) .post-body,.post-outer:nth-child(12) .post-body,.post-outer:nth-child(13) .post-body,.post-outer:nth-child(14) .post-body {height:70px}
@media screen and (max-width:600px){
.post-outer:nth-child(9) .post, .post-outer:nth-child(10) .post,.post-outer:nth-child(11) .post, .post-outer:nth-child(12) .post,.post-outer:nth-child(13) .post, .post-outer:nth-child(14) .post {width:95%;height:auto;}
.post-outer:nth-child(9) .posts-thumb img,.post-outer:nth-child(10) .posts-thumb img,.post-outer:nth-child(11) .posts-thumb img,.post-outer:nth-child(12) .posts-thumb img,.post-outer:nth-child(13) .posts-thumb img,.post-outer:nth-child(14) .posts-thumb img{float:left;width:80px;height:60px;padding-bottom:0}
.post-outer:nth-child(9) .posts-thumb,.post-outer:nth-child(10) .posts-thumb,.post-outer:nth-child(11) .posts-thumb,.post-outer:nth-child(12) .posts-thumb,.post-outer:nth-child(13) .posts-thumb,.post-outer:nth-child(14) .posts-thumb{float:left;width:80px;height:60px;}
.post-outer:nth-child(9) .post-body,.post-outer:nth-child(10) .post-body,.post-outer:nth-child(11) .post-body,.post-outer:nth-child(12) .post-body,.post-outer:nth-child(13) .post-body,.post-outer:nth-child(14) .post-body {height:auto}
}

3. Bentuk satu gambar dengan judul dan snippet di sampingnya

 .post-outer:nth-child(1) .post, .post-outer:nth-child(8) .post  {background: #f1e791;width:95%;height:auto;border:1px solid #ddd;padding:10px}
.post-outer:nth-child(1) .posts-thumb,.post-outer:nth-child(8) .posts-thumb{margin-right:10px;float:left;width:auto;max-width:220px;height:140px;padding-bottom:0}
.post-outer:nth-child(1) .post h2,.post-outer:nth-child(8) .post h2{font-size:20px;}
.post-outer:nth-child(1) .post-body,.post-outer:nth-child(8) .post-body {height:auto}
.post-outer:nth-child(1) .summary,.post-outer:nth-child(8) .summary{font-size:14px;display:block}

@media screen and (max-width:600px){
.post-outer:nth-child(1) .posts-thumb{width:50%;height:auto;padding-bottom:0px}
.post-outer:nth-child(1) .post {width:95%;height:auto;padding:5px}
.post-outer:nth-child(1) .summary{display:none}
Next
« Prev Post
Previous
Next Post »