Nghĩa Rồng Blog | Thủ thuật,Template Blogger

Làm nổi bật bài viết đầu tiên cho blogspot giúp bạn tạo được sự chú ý của người đọc khi truy cập vào blog của bạn, nó vừa có sự ảnh hưởng vừa tạo được sự riêng biệt cho template.

CSS

<b:if cond="data:blog.pageType == &quot;index&quot;">
<b:if cond="data:blog.searchLabel != &quot;Template Blogger&quot;">
.post-outer:nth-of-type(1) {width: 49%;float: left;}
.post-outer:nth-of-type(2) {width: 49%;float: right}
.post-outer:nth-of-type(1) .block-image,.post-outer:nth-of-type(2) .block-image{float:none;width:100%;height:148px;border-radius:3px 3px 0 0}
.post-outer{width: 100%;display: inline-block;}
.post-outer:nth-of-type(1) .thumb,.post-outer:nth-of-type(2) .thumb{border-radius: 3px;}
.post-outer:nth-of-type(1) .post h2 a,.post-outer:nth-of-type(2) .post h2 a{color:#333;font-size:16px;-webkit-line-clamp:1;text-align:center;}
.post-outer:nth-of-type(1) img.avatar-photo1,.post-outer:nth-of-type(2) img.avatar-photo1{display:block;position: relative; width: 54px;height: 54px;margin: -120px 0 0 0;z-index: 999;border: 3px solid #fff; float: left;border-radius: 50%;margin-left: calc(50% - 30px);}
.post-outer:nth-of-type(1) .date-header,.post-outer:nth-of-type(2) .date-header{padding:10px 0 0}
.post-outer:nth-of-type(1) .meta-post,.post-outer:nth-of-type(2) .meta-post{margin: 0;overflow: visible;text-align:center}
@media screen and (max-width: 440px)
{.post-outer:nth-of-type(1) {width: 100%;}
.post-outer:nth-of-type(2) {width: 100%;}}
</b:if>
</b:if>

LƯU Ý

Nếu không được thì đó là do template của bạn có class khác ,thì các bạn thay thành class của bạn sao cho hợp lí.
Hi vọng bài viết này giúp ích được cho các bạn. Nếu có thắc mắc hay câu hỏi gì thì các bạn có thể để lại bình luận để mình giải đáp.
Chúc các bạn thành công !