Chuyên mục

Blogger
  • Blogger Template 8
    • Seo Blogspot 29
      • Thiết kế Blogspot 26
        • Thủ thuật Blogspot 82
          • Tiện ích Blogspot 31
            Máy tính
            • Phần mềm 45
              • Sửa lỗi Windows 20
                • Thủ thuật Windows 78
                  • Cài đặt Windows 43

                    Hướng dẫn thiết kế bài viết trong tiện ích Bài đăng trên Blog

                    Thiết kế các bài viết trong tiện ích Bài đăng trên Blog thế nào cho phù hợp? Cách đặt HTML, class, id, thẻ data gọi dữ liệu chuẩn, tối ưu không thừa cũng không thiếu... sẽ được mình gói gọn trong bài viết này.

                    Dưới đây là hướng dẫn căn bản không quá chi tiết cho các bạn mới muốn thiết kế template

                    Trong thẻ <b:includable id='main' var='top'> nội dung HTML bên trong cặp thẻ này các bạn chỉ đặt như sau là đủ

                    Copy
                    <b:includable id='main' var='top'>
                      <b:include data='posts' name='breadcrumb'/>
                        <b:include data='top' name='status-message'/>
                        <b:loop values='data:posts' var='post'>
                          <b:include data='post' name='post'/>
                          <b:include cond='data:blog.pageType in {&quot;static_page&quot;,&quot;item&quot;}' data='post' name='comment_picker'/>
                        </b:loop>
                        <b:if cond='data:view.isMultipleItems'>
                          <b:include name='nextprev'/>
                        </b:if>
                    </b:includable>

                    Khi tải trang ví dụ ngoài trang chủ kiểm tra phần tử cho ra:

                    Copy
                    <div class="widget Blog" data-version="1" id="Blog1">
                      <div class="breadcrumbs">...</div>
                      <article class="post">...</article>
                      <article class="post">...</article>
                      <article class="post">...</article>
                      <article class="post">...</article>
                      <article class="post">...</article>
                      <div class="blog-pager" id="blog-pager">...</div>
                    </div>

                    Phần quan trong nhất là đặt HTML nằm trong cặp thẻ <b:includable id='post' var='post'>...</b:includable> chúng ta sẽ thiết kế như sau:

                    + Đầu tiên đặt <article class='post'> và kết thúc bằng </article>

                    Copy
                    <b:includable id='post' var='post'>
                      <article class='post'>
                        // HTML đặt trong đây
                      </article>
                      <div class='clear'/>
                    </b:includable>

                    + Tiếp theo các bạn lại phân ra làm 2 loại trang index và trang bài viết như sau

                    Đề xuất: Một số thẻ điều kiện thông dụng và cách sử dụng trong Blogspot

                    Copy
                    <b:includable id='post' var='post'>
                      <article class='post'>
                        <!-- Bố cục trang index -->
                      <b:if cond='data:view.isMultipleItems'>
                          // HTML đặt trong đây
                        </b:if>
                        <!-- Kết thúc trang index -->
                        <!-- Bố cục trang bài viết -->
                        <b:if cond='data:view.isSingleItem'>
                          // HTML đặt trong đây
                        </b:if>
                      <!-- Kết thúc trang bài viết -->
                      <div class='clear'/>
                      </article>
                    </b:includable>

                    1. Đặt HTML cho trang index

                    - Lấy dữ liệu ảnh bài viết sử dụng class post-thumb

                    Copy
                    <b:if cond='data:post.firstImageUrl'>
                      <div class='post-thumb'
                        <a expr:href='data:post.url' expr:title='data:post.title'><img expr:alt='data:post.title' expr:src='data:post.firstImageUrl'/></a>
                      </div>
                    <b:else/>
                      <div class='post-thumb'>
                        <a expr:href='data:post.url' expr:title='data:post.title'><img expr:alt='data:post.title' src='/no-image.jpg'/></a>
                      </div>
                    </b:if>

                    - Lấy dữ liệu tiêu đề bài viết sử dụng class post-title

                    Copy
                    <b:if cond='data:post.link'>
                      <h2 class='post-title'>
                        <a expr:href='data:post.link' expr:title='data:post.title' rel='nofollow'><data:post.title/></a>
                      </h2>
                    <b:else/>
                    <b:if cond='data:post.url'>
                      <h2 class='post-title'>
                        <a expr:href='data:post.url' expr:title='data:post.title'><data:post.title/></a>
                      </h2>
                    </b:if>
                    </b:if>

                    - Lấy dữ liệu thông tin như: tác giả, thời gian đăng bài, nhãn, số nhận xét sử dụng class post-meta

                    Copy
                    <div class='post-meta'>
                      <!-- Tác giả sử dụng class post-author -->
                      <span class='post-author'>
                        <a expr:href='data:post.authorProfileUrl' expr:title='data:post.author'><data:post.author/></a>
                      </span>
                      <!-- Nhãn sử dụng class post-label -->
                      <span class='post-label'>
                        <b:loop values='data:post.labels' var='label'>
                        <b:if cond='data:label.isLast == &quot;true&quot;'>
                          <a expr:href='data:label.url expr:title='data:label.name'><data:label.name/></a>
                        </b:if>
                        </b:loop>
                      </span>
                      <!-- Thời gian đăng bài sử dụng class post-date -->
                      <span class='post-date'>
                        <data:post.date/> // Ngày đăng hoặc <data:post.timestamp/> // Thời gian đăng hoặc kết hợp cả 2
                      </span>
                      <!-- Số nhận xét sử dụng class post-comment -->
                      <span class='post-comment'>
                        <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick' expr:title='data:commentLabel'><data:post.numComments/> <data:commentLabel/></a>
                      </span>
                    </div>

                    - Lấy dữ liệu tóm tắt bài viết sử dụng class post-snippet

                    Copy
                    <p class='post-snippet'>
                      <b:eval expr='data:post.body snippet { length: 100, links: false, linebreaks: false }'/>
                    </p>

                    - Lấy dữ liệu nút đọc thêm sử dụng class post-jumplink

                    Copy
                    <div class='post-jumplink'
                      <a expr:href='data:post.url' expr:title='data:post.jumpText'><data:post.jumpText/></a>
                    </div>

                    Viết đầy đủ cho trang index như sau:

                    Copy
                    <!-- Bố cục trang index -->
                    <b:if cond='data:view.isMultipleItems'>
                    <b:if cond='data:post.firstImageUrl'>
                      <div class='post-thumb'
                        <a expr:href='data:post.url' expr:title='data:post.title'><img expr:alt='data:post.title' expr:src='data:post.firstImageUrl'/></a>
                      </div>
                    <b:else/>
                      <div class='post-thumb'>
                        <a expr:href='data:post.url' expr:title='data:post.title'><img expr:alt='data:post.title' src='/no-image.jpg'/></a>
                      </div>
                    </b:if>
                    <b:if cond='data:post.link'>
                      <h2 class='post-title'>
                        <a expr:href='data:post.link' expr:title='data:post.title' rel='nofollow'><data:post.title/></a>
                      </h2>
                    <b:else/>
                    <b:if cond='data:post.url'>
                      <h2 class='post-title'>
                        <a expr:href='data:post.url' expr:title='data:post.title'><data:post.title/></a>
                      </h2>
                    </b:if>
                    </b:if>
                    <div class='post-meta'>
                      <!-- Tác giả sử dụng class post-author -->
                      <span class='post-author'>
                        <a expr:href='data:post.authorProfileUrl' expr:title='data:post.author'><data:post.author/></a>
                      </span>
                      <!-- Nhãn sử dụng class post-label -->
                      <span class='post-label'>
                        <b:loop values='data:post.labels' var='label'>
                        <b:if cond='data:label.isLast == &quot;true&quot;'>
                          <a expr:href='data:label.url expr:title='data:label.name'><data:label.name/></a>
                        </b:if>
                        </b:loop>
                      </span>
                      <!-- Thời gian đăng bài sử dụng class post-date -->
                      <span class='post-date'>
                        <data:post.date/> // Ngày đăng hoặc <data:post.timestamp/> // Thời gian đăng hoặc kết hợp cả 2
                      </span>
                      <!-- Số nhận xét sử dụng class post-comment -->
                      <span class='post-comment'>
                        <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick' erpr:title='data:commentLabel'><data:post.numComments/> <data:commentLabel/></a>
                      </span>
                    </div>
                    <p class='post-snippet'>
                      <b:eval expr='data:post.body snippet { length: 100, links: false, linebreaks: false }'/>
                    </p>
                    <div class='post-jumplink'
                      <a expr:href='data:post.url' expr:title='data:post.jumpText'><data:post.jumpText/></a>
                    </div>
                    </b:if>
                    <!-- Kết thúc trang index -->

                    2. Đặt HTML trong trang bài viết

                    Bố cục bài viết sử dụng 3 class chính sau

                    Copy
                    <div class='post-header'>...</div>
                    <div class='post-body>...</div>
                    <div class='post-footer'>..</div>

                    - Lấy dữ liệu thông tin tiều đề bài viết, thời gian đăng bài, nhãn, số nhận xét trong class post-header

                    Copy
                    <div class='post-header'
                      <!-- Tiêu đề bài viết sử dụng class post-title -->
                      <h1 class='post-title'>
                        <data:post.title/>
                      </h1>
                      <div class='post-meta'>
                        <!-- Tác giả sử dụng class post-author -->
                        <span class='post-author'>
                          <a expr:href='data:post.authorProfileUrl' expr:title='data:post.author'><data:post.author/></a>
                        </span>
                        <!-- Thời gian đăng bài sử dụng class post-date -->
                        <span class='post-date'>
                          <data:post.date/> // Ngày đăng hoặc <data:post.timestamp/> // Thời gian đăng hoặc kết hợp cả 2
                        </span>
                        <!-- Số nhận xét sử dụng class post-comment -->
                        <span class='post-comment'>
                          <a href='#comment-form' expr:onclick='data:post.addCommentOnclick' expr:title='data:commentLabel'><data:post.numComments/> <data:commentLabel/></a>
                        </span>
                      </div>
                    </div>

                    - Lấy dữ liệu bài viết sử dụng class post-body

                    Copy
                    <div class='post-body'>
                      <data:post.body/>
                    </div>

                    - Lấy dữ liệu chân bài viết sử dụng class post-footer

                    Copy
                    <div class='post-footer'
                      <!-- Các nút chia sẻ sử dụng class post-share -->
                      <div class='post-share'>
                        <b:include data='posts' name='shareButtons'/>
                      </div>
                      <!-- Tên các nhãn trong bài viết sử dụng class post-tags
                      <div class='post-tags'>
                        <b:loop values='data:post.labels' var='label'>
                          <a expr:href='data:label.url expr:title='data:label.name'><data:label.name/></a>
                        </b:loop>
                      </div>
                      <!-- Bài viết liên quan sử dụng class related-posts
                      <div class='related-posts'>
                        // Javascript sử dụng Feed gọi dữ liệu
                      </div>
                    </div>

                    Viết đầy đủ như sau:

                    Copy
                    <!-- Bố cục trang bài viết -->
                    <b:if cond='data:view.isSingleItem'>
                    <div class='post-header'
                      <!-- Tiêu đề bài viết sử dụng class post-title -->
                      <h1 class='post-title'>
                        <data:post.title/>
                      </h1>
                      <div class='post-meta'>
                        <!-- Tác giả sử dụng class post-author -->
                        <span class='post-author'>
                          <a expr:href='data:post.authorProfileUrl' expr:title='data:post.author'><data:post.author/></a>
                        </span>
                        <!-- Thời gian đăng bài sử dụng class post-date -->
                        <span class='post-date'>
                          <data:post.date/> // Ngày đăng hoặc <data:post.timestamp/> // Thời gian đăng hoặc kết hợp cả 2
                        </span>
                        <!-- Số nhận xét sử dụng class post-comment -->
                        <span class='post-comment'>
                          <a href='#comment-form' expr:onclick='data:post.addCommentOnclick' expr:title='data:commentLabel'><data:post.numComments/> <data:commentLabel/></a>
                        </span>
                      </div>
                    </div>
                    <div class='post-body'>
                      <data:post.body/>
                    </div>
                    <div class='post-footer'
                      <!-- Các nút chia sẻ sử dụng class post-share -->
                      <div class='post-share'>
                        <b:include data='posts' name='shareButtons'/>
                      </div>
                      <!-- Tên các nhãn trong bài viết sử dụng class post-tags
                      <div class='post-tags'>
                        <b:loop values='data:post.labels' var='label'>
                          <a expr:href='data:label.url expr:title='data:label.name'><data:label.name/></a>
                        </b:loop>
                      </div>
                      <!-- Bài viết liên quan sử dụng class related-posts
                      <div class='related-posts'>
                        // Javascript sử dụng Feed gọi dữ liệu
                      </div>
                    </div>
                    </b:if>
                    <!-- Kết thúc trang bài viết -->

                    Tổng hợp ta có nội dụng trong cặp thẻ <b:includable id='post' var='post'>...</b:includable> như sau:

                    Copy
                    <b:includable id='post' var='post'>
                      <article class='post'>
                       <!-- Bố cục trang index -->
                    <b:if cond='data:view.isMultipleItems'>
                    <b:if cond='data:post.firstImageUrl'>
                      <div class='post-thumb'
                        <a expr:href='data:post.url' expr:title='data:post.title'><img expr:alt='data:post.title' expr:src='data:post.firstImageUrl'/></a>
                      </div>
                    <b:else/>
                      <div class='post-thumb'>
                        <a expr:href='data:post.url' expr:title='data:post.title'><img expr:alt='data:post.title' src='/no-image.jpg'/></a>
                      </div>
                    </b:if>
                    <b:if cond='data:post.link'>
                      <h2 class='post-title'>
                        <a expr:href='data:post.link' expr:title='data:post.title' rel='nofollow'><data:post.title/></a>
                      </h2>
                    <b:else/>
                    <b:if cond='data:post.url'>
                      <h2 class='post-title'>
                        <a expr:href='data:post.url' expr:title='data:post.title'><data:post.title/></a>
                      </h2>
                    </b:if>
                    </b:if>
                    <div class='post-meta'>
                      <!-- Tác giả sử dụng class post-author -->
                      <span class='post-author'>
                        <a expr:href='data:post.authorProfileUrl' expr:title='data:post.author'><data:post.author/></a>
                      </span>
                      <!-- Nhãn sử dụng class post-label -->
                      <span class='post-label'>
                        <b:loop values='data:post.labels' var='label'>
                        <b:if cond='data:label.isLast == &quot;true&quot;'>
                          <a expr:href='data:label.url expr:title='data:label.name'><data:label.name/></a>
                        </b:if>
                        </b:loop>
                      </span>
                      <!-- Thời gian đăng bài sử dụng class post-date -->
                      <span class='post-date'>
                        <data:post.date/> // Ngày đăng hoặc <data:post.timestamp/> // Thời gian đăng hoặc kết hợp cả 2
                      </span>
                      <!-- Số nhận xét sử dụng class post-comment -->
                      <span class='post-comment'>
                        <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick' erpr:title='data:commentLabel'><data:post.numComments/> <data:commentLabel/></a>
                      </span>
                    </div>
                    <p class='post-snippet'>
                      <b:eval expr='data:post.body snippet { length: 100, links: false, linebreaks: false }'/>
                    </p>
                    <div class='post-jumplink'
                      <a expr:href='data:post.url' expr:title='data:post.jumpText'><data:post.jumpText/></a>
                    </div>
                    </b:if>
                    <!-- Kết thúc trang index -->
                    <!-- Bố cục trang bài viết -->
                    <b:if cond='data:view.isSingleItem'>
                    <div class='post-header'
                      <!-- Tiêu đề bài viết sử dụng class post-title -->
                      <h1 class='post-title'>
                        <data:post.title/>
                      </h1>
                      <div class='post-meta'>
                        <!-- Tác giả sử dụng class post-author -->
                        <span class='post-author'>
                          <a expr:href='data:post.authorProfileUrl' expr:title='data:post.author'><data:post.author/></a>
                        </span>
                        <!-- Thời gian đăng bài sử dụng class post-date -->
                        <span class='post-date'>
                          <data:post.date/> // Ngày đăng hoặc <data:post.timestamp/> // Thời gian đăng hoặc kết hợp cả 2
                        </span>
                        <!-- Số nhận xét sử dụng class post-comment -->
                        <span class='post-comment'>
                          <a href='#comment-form' expr:onclick='data:post.addCommentOnclick' expr:title='data:commentLabel'><data:post.numComments/> <data:commentLabel/></a>
                        </span>
                      </div>
                    </div>
                    <div class='post-body'>
                      <data:post.body/>
                    </div>
                    <div class='post-footer'
                      <!-- Các nút chia sẻ sử dụng class post-share -->
                      <div class='post-share'>
                        <b:include data='posts' name='shareButtons'/>
                      </div>
                      <!-- Tên các nhãn trong bài viết sử dụng class post-tags
                      <div class='post-tags'>
                        <b:loop values='data:post.labels' var='label'>
                          <a expr:href='data:label.url expr:title='data:label.name'><data:label.name/></a>
                        </b:loop>
                      </div>
                      <!-- Bài viết liên quan sử dụng class related-posts
                      <div class='related-posts'>
                        // Javascript sử dụng Feed gọi dữ liệu
                      </div>
                    </div>
                    </b:if>
                    <!-- Kết thúc trang bài viết -->
                    </article>
                    <div class='clear'/>
                    </b:includable>

                    3. Viết css cho bố cục bài viết

                    Phần viết css cho class có thể đặt style cho hai trang riệng biệt trên </head> và đặt một số class không thay đổi trong <b:skin> ví dụ:

                    Copy
                    <b:skin><![CDATA[/
                    // CSS
                    </b:skin>

                    <!-- Viết css cho trang index -->

                    Copy
                    <b:if cond='data:view.isMultipleItems'>
                    <style>
                    h2.post-title {}
                    .post-thumb {}
                    .post-meta {}
                    .post-meta .post-label {}
                    .post-meta .post-author {}
                    .post-meta .post-date {}
                    .post-meta .post-comment {}
                    .post-snippet {}
                    post-jumplink  {}
                    ....
                    </style>
                    </b:if>

                    <!-- Viết css cho trang bài viết -->

                    Copy
                    <b:if cond='data:view.isSingleItem'>
                    <style>
                    .post-header {}
                    h1.post-tile {}
                    .post-meta {}
                    .post-body {}
                    .post-body .separator {}
                    .post-body .tr-caption-container {}
                    .post-body img {}
                    .post-body ifame {}
                    .post-body blockquote {}
                    .post-body ol {}
                    .post-body ol li {}
                    .post-body ul{}
                    .post-body ul li {}
                    .post-body h2 {}
                    .post-body h3 {}
                    .post-footer
                    .post-footer .post-share {}
                    .post-footer .post-tags {}
                    .post-footer .related-posts {}
                    ...
                    </style>
                    </b:if>

                    Trên đây là hướng dẫn thiết kế bài viết trong tiện ích Bài đăng trên Blog tuy không chi tiết nhưng cũng đủ cho các bạn mới tập làm quen với thiết kế các bài viết theo sở thích.
                    Nội dung chính
                      Bài đăng mới hơn Bài đăng cũ hơn