Tạo Feature Post không cần Javascript trong Blogspot

Tạo Feature Post không cần Javascript trong Blogspot

Có thể bạn thích ?

Khi truy cập vào website, chúng ta thường thấy có Feature Post như hình bên dưới. Ở bài viết này, mình sẽ phân tích cho các bạn làm như vậy mà không dùng bất cứ widget hay javascript gì cả, chỉ dùng CSS là được.

Phân tích Feature Post như hình trên (cụ thể là trang www.thichcode.net) thì sẽ tự động lấy 4 bài viết đầu tiên của Blog để làm Feature Post. Ở đây ta chỉ cần chỉnh CSS của 4 bài viết đầu đoạn CSS bên dưới là được (tùy template mà các bạn chỉnh sửa CSS cho thích hợp)

Trước khi thêm đoạn code CSS thì bạn tìm và xóa dòng này đi trong Edit Template.

<b:if cond='data:post.isDateStart'>
	<b:if cond='data:post.isFirstPost == &quot;false&quot;'>
		&lt;/div&gt;&lt;/div&gt;
	</b:if>
</b:if>
<b:if cond='data:post.isDateStart'>
	&lt;div class=&quot;date-outer&quot;&gt;
</b:if>
<b:if cond='data:post.dateHeader'>
	<h2 class='date-header'><span><data:post.dateHeader/></span></h2>
</b:if>
<b:if cond='data:post.isDateStart'>
	&lt;div class=&quot;date-posts&quot;&gt;
</b:if>

Code HTML + CSS:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
    @media screen and (max-width:1360px) and (min-width:1066px) {
    <b:if cond='data:blog.pageType != "item"'>
        <b:if cond='data:blog.pageType != "static_page"'>
           .post-outer:nth-of-type(1)
            {
                width:500px
            }

            .post-outer:nth-of-type(1) img,.post-outer:nth-of-type(2) img,.post-outer:nth-of-type(3) img,.post-outer:nth-of-type(4) img
            {
                width:100%;
                height:300px
            }

            .post-outer:nth-of-type(3) img,.post-outer:nth-of-type(4) img
            {
                height:150px
            }

            .post-outer:nth-of-type(3) .post,.post-outer:nth-of-type(4) .post
            {
                background:none
            }

            .post-outer:nth-of-type(1) .post-image,.post-outer:nth-of-type(2) .post-image,.post-outer:nth-of-type(3) .post-image,.post-outer:nth-of-type(4) .post-image
            {
                margin:0
            }

            .post-outer:nth-of-type(1) .post
            {
                height:269px
            }

            .post-outer:nth-of-type(1) h2,.post-outer:nth-of-type(2) h2,.post-outer:nth-of-type(1) h2,.post-outer:nth-of-type(3) h2,.post-outer:nth-of-type(4) h2
            {
                position:absolute;
                z-index:1;
                width:auto;
                margin-top:245px;
                background:-webkit-linear-gradient(bottom,rgba(0,0,0,.95) 0,rgba(0,0,0,0) 100%);
                background:linear-gradient(0deg,rgba(0,0,0,.95) 0,rgba(0,0,0,0) 100%);
                padding:10px 10px 0;
                width:480px
            }

            .post-outer:nth-of-type(2) h2
            {
                width:300px
            }

            .post-outer:nth-of-type(3) h2
            {
                width:245px;
                margin-top:103px
            }

            .post-outer:nth-of-type(4) h2
            {
                width:245px;
                margin-top:103px
            }

            .post-outer:nth-of-type(1) a,.post-outer:nth-of-type(2) a,.post-outer:nth-of-type(3) a,.post-outer:nth-of-type(4) a
            {
                color:#fff
            }

            .post-outer:nth-of-type(3) a,.post-outer:nth-of-type(4) a
            {
                font-size:80%
            }

            .post-outer:nth-of-type(1) .post-info,.post-outer:nth-of-type(2) .post-info,.post-outer:nth-of-type(3) .post-info,.post-outer:nth-of-type(4) .post-info
            {
                display:none;
                position:absolute
            }

            .post-outer:nth-of-type(1) .post,.post-outer:nth-of-type(2) .post,.post-outer:nth-of-type(3) .post,.post-outer:nth-of-type(4) .post
            {
                padding:0;
                border:none
            }

            .post-outer:nth-of-type(2)
            {
                position:absolute;
                margin-left:502px;
                width:320px
            }

            .post-outer:nth-of-type(3),.post-outer:nth-of-type(4)
            {
                position:absolute;
                margin-left:824px;
                width:264px
            }

            .post-outer:nth-of-type(4)
            {
                margin-top:152px
            }

            .post-outer:nth-of-type(1) .snippets,.post-outer:nth-of-type(2) .snippets,.post-outer:nth-of-type(3) .snippets,.post-outer:nth-of-type(4) .snippets
            {
                display:none
            }

            .sidebar-area
            {
                margin-top:325px
            }
        </b:if>
    </b:if>
    }
</b:if>

4 bình luận trên “Tạo Feature Post không cần Javascript trong Blogspot

  1. Thanks bạn vì bài viết hữu ích, nhưng mình làm gần chục lần không được: không báo lỗi, không chuyện gì xảy ra cả. Mong bạn giúp đỡ !

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *


Liên Hệ

Tp Mỹ Tho, Tiền Giang

0919 344 644