Làm nổi bật bài viết mong muốn cho blogspot

Ở bài viết trước mình đã hướng dẫn các bạn cách làm nổi bật bài viết đầu tiên cho blog còn ở bài viết này mình sẽ nâng cao hơn một chút đó là bạn có thể làm nổi bật bài viết mong muốn cho blogspot tức là bạn muốn làm nổi bật bài viết nào cũng được.
Thủ thuật này cũng cần kiến thức về CSS và HTML để tùy biến hiệu ứng cũng như cách hiển thị cho bài viết, nếu bạn chỉ muốn đơn giản thì có thể áp dụng ví dụ của mình.

Lợi ích

- Làm nổi bật bất cứ bài viết nào cho blog của bạn.
- Thu hút sự chú ý của người xem.
- Tạo điểm nhấn cho blog.
- Phong cách độc đáo, riêng biệt theo sở thích của mình.

Xem thêm: Làm đẹp phần Bố cục (Layout) cho Blogspot

Khó khăn

- Phải có chút kiến thức về css.

- Phải thêm css để làm nổi bật bài viết mong muốn khi sử dụng thiết bị di động.
- Phải sáng tạo để tạo sự khác biệt.

Cách thực hiện

- Tìm đến <b:include data='post' name='post'/> và xóa đoạn HTML nằm trên nó (Hình dưới)
- Xác định thuộc tính của bài đăng (post), thường ở các template là class .post-outer

- Sau khi đã xác định được thuộc tính của bài viết thì các bạn tiến hành thêm css cho nó, đây chính là điểm mấu chốt của thủ thuật này.

- Tìm đến ]]></b:skin> và thêm trên nó class .post-outer:nth-of-type(1) với các css theo ý mình (Xem VÍ DỤ để hiểu rõ hơn)

Ở đây đòi bạn phải có sự sáng tạo để tùy biến bất cứ bài viết nào trở nên đẹp và độc đáo hơn. Bạn có thể thêm id hoặc class cho bài viết để có thể tùy biến đa dạng hơn.

Xem thêm: Sửa lỗi ảnh blogspot không hiển thị như thế nào?

Ví dụ

Để các bạn có thể hiểu rõ hơn về thủ thuật này mình sẽ lấy một ví dụ đơn giản như sau:
- Ban đầu bài viết của bạn có cấu trúc như sau:

<div class="post-outer">
<div class="post hentry">
<a href="Link bài đăng">
<div class="block-image">
<div class="thumb">
<img width="230" height="160" src="Link Ảnh"></img>
</div>
</div>
</a>
</div>
</div>

Và có css

.post{
    display: block;
    height: auto;
    overflow: hidden;
    box-sizing: border-box;
    margin: 0 0 20px;
    padding: 10px;
    background: #fff;
    box-shadow: 0 1px 0 rgba(0,0,0,.05),0 3px 3px rgba(0,0,0,.05);
    border: 1px solid;
    border-color: #e5e6e9 #dfe0e4 #d0d1d5;
}
.block-image {
    overflow: hidden;
    position: relative;
    text-align: center;
    cursor: default;
    float: left;
    width: 230px;
    height: 160px;
    margin: 0 15px 0 0;
}
.block-image .thumb {
    width: 100%;
    height: 160px;
    position: relative;
    display: block;
    z-index: 2;
    overflow: hidden;
}

- Với css trên thì hình ảnh sẽ thu về bên trái và cách bên phải 15px.
- Ở đây mình muốn làm nổi bật bài viết số 1 và 4 nên mình sẽ thêm css như sau:

.post-outer:nth-of-type(1) .post .block-image, .post-outer:nth-of-type(4) .post .block-image {
    float: right !important;
    margin: 0 0 0 10px;
}

- Tức là hình ảnh của bài viết số 1 và 4 sẽ thu về bên phải và cách bên trái 10px, còn các bài viết khác vẫn thu về bên trái.

Hi vọng thủ thuật blogspot này giúp ích được cho các bạn. Bạn nào không làm được thì show link lên để mình có thể hướng dẫn (Làm không được mới nhờ nhé vì mình cũng không có nhiều time).

Chúc các bạn thành công !