[blog]
Tiếp tục chúng ta sửa thẻ tiêu đề của bài viết, mặc định blog nó tạo là thẻ H3, chúng ta tìm nó sửa thành thẻ H1 và thêm các mục như Tác giản, Ngày đăng, Số comment ngay dưới tiêu đề.

Bài 8 Chỉnh thẻ tiêu đề thêm entry meta


Các bước thực hiện như sau:

Các bạn nhấn CTRL + F tìm post-title entry-title nó chỉ có một chỗ duy nhất sửa H3 thành H1

Ngay dưới thẻ <a expr:name='data:post.id'/> có thẻ <b:if cond='data:post.title != &quot;&quot;'>

Các bạn nhấn cho nó thu gọn lại và dán html nay ngay dưới nó.

<div class="entry-meta">

    <span class='entry-author'>

        <data:post.author.name />

    </span>

    <span class='entry-time'>

        <time class='published' expr:datetime='data:post.date.iso8601'>

            <data:post.date />

        </time>

    </span>

    <span class='entry-comments-link'>

        <a expr:href='data:post.url + &quot;#comments&quot;'>

            <data:post.numberOfComments />

            <data:messages.comments />

        </a>

    </span>

</div>

Tiếp theo thêm CSS trong <b:skin>

 
/* entry title css */

.post-outer-container h1.entry-title{font-size:35px;font-weight:700;display:block;margin:0}

.post-outer-container .entry-meta{font-size:15px;color:#aaaaaa;font-weight:400;overflow:hidden;padding:10px 2px;margin:0}

.post-outer-container .entry-meta a{color:#aaaaaa}

.post-outer-container .entry-meta a:hover{color:#ff3d00}

.post-outer-container .entry-meta span{float:left;font-style:normal;margin:0 10px 0 0}

.post-outer-container .entry-meta span:before{display:inline-block;font-family:'Font Awesome 5 Free';font-size:11px;font-weight:400;font-style:normal;margin:0 5px 0 0}

.post-outer-container .entry-meta .entry-author:before{content:'\f007'}

.post-outer-container .entry-meta .entry-time:before{content:'\f017'}

.post-outer-container .entry-meta .entry-comments-link:before{content:'\f086'}

.post-outer-container .entry-meta .entry-comments-link.show{display:block}


Các bạn lưu lại và kiểm tra

Tiếp tục các bạn tìm Chỗ Hello Wolrd các bạn xóa đi và sửa như hình

Bài 8 Chỉnh thẻ tiêu đề thêm entry meta

<b:if cond='data:view.isHomepage'>

    <h1 class='hidden'>

        <data:blog.title />

    </h1>

</b:if>

Mục đích là tạo ra thẻ H1 cho trang chủ

Và cuối cùng là các label liên quan ở cuối bài viết

Bài 8 Chỉnh thẻ tiêu đề thêm entry meta

Thêm CSS vào trong <b:skin>

/* Label relate */

.post-footer .post-author,.post-footer .post-timestamp{display:none}

.post-footer .post-labels{overflow:hidden;float:left;width:100%;height:auto;position:relative;margin:25px 0 0}

span.byline-label{background-color:#fc5356!important;color:#ffffff!important}

.post-labels a,.post-labels span{float:left;height:24px;background-color:rgba(155,155,155,0.05);font-size:11px;color:#000;font-weight:400;line-height:22px;box-sizing:border-box;padding:0 9px;margin:5px 5px 0 0;border:1px solid rgba(0,0,0,.1);border-bottom-width:2px;border-radius:2px}


Thêm một chút CSS cho hình ở bài viết ở mobile vừa khung

/* img mobile css */

@media only screen and (max-width:768px){.post-body img{width:100%;height:auto;margin-left:-1em}}


[/blog]