Thiết Kế Layout Các Bài Đăng Trên Blog Hiển Thị Tại Nhóm Trang Chỉ Mục

- Để thiết kế layout cho blogspot thì bạn cần biết về các thẻ điều kiện chuẩn của Blogger, và hôm nay VeoSpot chia sẻ code thiết kế layout các bài đăn

Thiết kế layout cho các bài đăng trên Blog hiển thị tại nhóm trang chỉ mục theo cách thêm một số thuộc tính kèm giá trị vào bên trong thẻ div bao quanh các post, từ các thuộc tính này viết css hiển thị cho post, code đã được Responsive, để lại 2 code cho các bạn dùng...

Thiết Kế Layout Các Bài Đăng Trên Blog Hiển Thị Tại Nhóm Trang Chỉ Mục

1. Code thiết kế layout bộ gốc

- Thật ra bộ code này được chia sẻ từ anh Tuấn, và mình share lại để cho bạn tham khảo, nếu có chỗ nào sai sót, hoặc thiếu thì các bạn góp ý ở dưới phần bình luận (comments) nhé.

- Để thiết kế layout cho blogspot thì bạn cần biết về các thẻ điều kiện chuẩn của Blogger, và hôm nay VeoSpot chia sẻ code thiết kế layout các bài đăng trên blog hiển thị tại nhóm trang chỉ mục chuẩn responsive.

* Lưu ý: code gốc này phù hợp cho các template có dạng là Blog tin tức, Blog cá nhân...v.v...

👉 Code HTML Blogger

<b:includable id='postBodySnippet' var='post'>
  <div>
    <div class='post_thumb'>
      <a expr:href='data:post.link ? data:post.link : data:post.url' expr:title='data:post.title'>
        <b:if cond='data:post.featuredImage.isYouTube or data:post.featuredImage'><b:class name='has--img'/></b:if>
        <b:if cond='!data:post.featuredImage.isYouTube and !data:post.featuredImage'><b:class name='no--img'/></b:if>
        <b:if cond='data:post.featuredImage.isYouTube'>
          <img class='lazyload' expr:alt='data:post.title' expr:data-src='data:view.featuredImage.youtubeMaxResDefaultUrl' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
        <b:elseif cond='data:post.featuredImage'/>
          <img class='lazyload' expr:alt='data:post.title' expr:data-src='data:post.featuredImage' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
        </b:if>
      </a>     
    </div>
    <div class='post_body'>
      <div class='post_title'>
        <a expr:href='data:post.link ? data:post.link : data:post.url' expr:title='data:post.title'><data:post.title/></a>
      </div>
      <div class='post_meta flex-align'>
        <b:if cond='data:widgets.Blog.first.allBylineItems.labels'>
          <span class='post_label'>
            <b:loop values='data:post.labels.length - 1' var='label'>
              <a expr:href='data:post.labels[label].url + "?max-results=10"'><b:eval expr='data:post.labels[label].name'/></a> 
            </b:loop>
          </span>
        </b:if>
        <b:if cond='data:widgets.Blog.first.allBylineItems.timestamp'>
          <span class='post_date' expr:data-date='data:post.date.iso8601'>
            <time><b:eval expr='data:post.date format &quot;dd/MM/yyyy&quot; '/></time>
          </span>
        </b:if>
        <b:if cond='data:post.allowComments'>
          <span class='post-a-comment flex-center comment-icon has-svg-icon has-hover' expr:aria-label='data:messages.postAComment' expr:onclick='"location.href=&#39;" + data:post.commentsUrl + "&#39;"' expr:title='data:messages.postAComment' role='button' tabindex='0'><data:post.numberOfComments/></span>
        </b:if>
        <b:if cond='data:widgets.Blog.first.allBylineItems.share'>
          <span aria-expanded='false' aria-label='Chia sẻ nội dung này' aria-pressed='false' class='share-icon has-svg-icon share-this-post flex-center has-hover' expr:data-href='data:post.url.canonical' expr:data-image='resizeImage(data:post.featuredImage,1200,"1200:630")' expr:data-postId='data:post.id' expr:data-snippets='data:post.snippets.short' role='button' tabindex='0' title='Chia sẻ nội dung này'/>
        </b:if>
      </div>
      <div class='post_snippet'>
        <p><b:eval expr='data:post.body snippet {length: 180, links: true, linebreaks: true, ellipsis: true }'/></p><a expr:href='data:post.hasJumpLink ? data:post.url fragment "more" : data:post.url' expr:title='data:post.title'><data:blog.jumpLinkMessage/></a>
      </div>
    </div>
  </div>
</b:includable>

Tiếp theo, trong thẻ <b:includable id='main'> của tiện ích Blog các bạn tìm đến đoạn mã tương tự như sau:

<div class='blog-posts' id='blog-posts'>   
  <b:loop values='data:posts' var='post'>
    <b:include data='post' name='post'/>
  </b:loop>
</div>

Bạn sẽ thêm một số thuộc tính layout vào thẻ div bằng thẻ <b:attr> như sau:

<b:if cond='data:view.isMultipleItems'>
  <b:attr name='data-box-shadow' value='["true","false"]'/>
  <b:attr name='data-column' value='[1,2,3]'/>
  <b:attr name='data-layout' value='["blog","list",""grid]'/>
  <b:attr name='data-transform' value='["true","false"]'/>
</b:if>

Thực hành cài đặt hiển thị bài viết tại các trang chỉ mục

- Ví dụ chúng ta có code của blogspot như sau:

<div class='blog-posts' id='blog-posts'>
  <b:if cond='data:view.isMultipleItems'>
    <b:attr name='data-box-shadow' value='true'/>
    <b:attr name='data-column' value='2'/>
    <b:attr name='data-layout' value='grid'/>
    <b:attr name='data-transform' value='true'/>
  </b:if>     
  <b:loop values='data:posts' var='post'>
    <b:include data='post' name='post'/>
  </b:loop>
</div>

Tùy theo bạn cài đặt giá trị của các thuộc được thêm mà các bài đăng cũng sẽ hiển thị theo layout như sau:

1. data-layout="blog"

Cài đặt

<b:attr name='data-box-shadow' value='true or false'/>
<b:attr name='data-column' value='1'/>
<b:attr name='data-layout' value='blog'/>
<b:attr name='data-transform' value='true'/>

+ data-box-shadow="true"

Cài đặt hiển thị bài đăng với layout dạng blog có box-shadow
Cài đặt hiển thị bài đăng với layout dạng blog có box-shadow


+ data-box-shadow="false"

Cài đặt hiển thị bài đăng với layout dạng blog không có box-shadow
Cài đặt hiển thị bài đăng với layout dạng blog không có box-shadow


2. data-layuot="list"

Cài đặt

<b:attr name='data-box-shadow' value='true or false'/>
<b:attr name='data-column' value='1'/>
<b:attr name='data-layout' value='list'/>
<b:attr name='data-transform' value='true'/>

+ data-box-shadow="true"

Cài đặt hiển thị bài đăng với layout dạng list có box-shadow
Cài đặt hiển thị bài đăng với layout dạng list có box-shadow


+ data-box-shadow="false"

Cài đặt hiển thị bài đăng với layout dạng list không có box-shadow
Cài đặt hiển thị bài đăng với layout dạng list không có box-shadow


3. data-layout="grid"

Cài đặt

<b:attr name='data-box-shadow' value='true or false'/>
<b:attr name='data-column' value='2 or 3'/>
<b:attr name='data-layout' value='grid'/>
<b:attr name='data-transform' value='true'/>


+ data-box-shadow="true"

Cài đặt hiển thị bài đăng với layout dạng grid có box-shadow
Cài đặt hiển thị bài đăng với layout dạng grid có box-shadow


+ data-box-shadow="false"

Cài đặt hiển thị bài đăng với layout dạng grid không có box-shadow
Cài đặt hiển thị bài đăng với layout dạng grid không có box-shadow

- Ngoài ra với dạng grid các bạn có thể cài đặt hiển thị 2 hoặc 3 bài đăng một hàng trong thuộc tính data-column="2" hoặc data-column="3"

- Thuộc tính data-transform="true" để tạo hiệu ứng phóng to ảnh 5% khi hover vào ảnh trên desktop, nếu cài đặt data-transform="false" sẽ không có hiệu ứng này.

👉 Code CSS

- Phần CSS bạn có thể chèn trong thẻ

<b:tag name='style'>/* <![CDATA[ */

<-- Đặt css trong này-->

/* ]]> */</b:tag>

- Hoặc trong thẻ điều kiện trang chỉ mục

<b:if cond='data:view.isMultipleItems'>
  <b:tag name='style'>/* <![CDATA[ */

  <-- Đặt css trong này-->
  /* ]]> */</b:tag>
</b:if>

CSS tham khảo

[data-layout="blog"],[data-layout="list"],.post>div{float:left;width:100%}
[data-layout="grid"]{margin:0 -7.5px;display:-ms-flexbox;display:-webkit-flex;display:flex;-ms-flex-flow:row wrap;flex-flow:row wrap}
[data-layout="blog"] .post,[data-layout="list"] .post,[data-layout="blog"] .post_thumb,[data-layout="grid"] .post_thumb,[data-layout="blog"] .post_body,[data-layout="grid"] .post_body{width:100%}
[data-box-shadow="false"][data-layout="list"] .post:not(:last-child){padding-bottom:15px;margin-bottom:15px;border-bottom:1px solid rgba(12,28,39,.15)}
[data-box-shadow="true"][data-layout="blog"] .post,[data-box-shadow="true"][data-layout="list"] .post,[data-box-shadow="false"][data-layout="list"] .post:last-child{margin-bottom:15px}
[data-layout="grid"] .post{padding:0 7.5px 15px 7.5px}
@media(min-width:321px){[data-layout="grid"][data-column="2"] .post{width:50%}}
@media(min-width:769px){[data-layout="grid"][data-column="3"] .post{width:33.33%}}
@media(max-width:768px) and (min-width:312px){[data-layout="grid"][data-column="3"] .post{width:50%}}
@media(max-width:320px){[data-layout="grid"][data-column="2"] .post,[data-layout="grid"][data-column="3"] .post{width:100%}}
[data-box-shadow="true"] .post>div{border-radius:4px;overflow:hidden;transition:box-shadow 0.25s}
[data-view-type=desktop] [data-box-shadow="true"] .post>div:not(:hover){-webkit-box-shadow:0 2px 2px 0 rgba(0,0,0,0.14), 0 2px 0 -2px rgba(0,0,0,0.2), 0 0 2px 0 rgba(0,0,0,0.12);box-shadow:0 2px 2px 0 rgba(0,0,0,0.14), 0 2px 0 -2px rgba(0,0,0,0.2), 0 0 2px 0 rgba(0,0,0,0.12)}
[data-view-type=desktop] [data-box-shadow="true"] .post>div:hover{-webkit-box-shadow:0 3px 4px 0 rgba(0, 0, 0, 0.14), 0 3px 3px -2px rgba(0, 0, 0, 0.2), 0 1px 12px 0 rgba(0, 0, 0, 0.12);box-shadow:0 3px 4px 0 rgba(0, 0, 0, 0.14), 0 3px 3px -2px rgba(0, 0, 0, 0.2), 0 1px 12px 0 rgba(0, 0, 0, 0.12)}
[data-layout="list"] .post_thumb{width:33%}
[data-box-shadow="false"] .post_thumb{border-radius:4px}
[data-layout="grid"][data-box-shadow="false"] .post_thumb{margin-bottom:15px}
.post,.post_thumb,.post_body{float:left}
.post_thumb{position:relative;overflow:hidden}
a.img{display:-ms-flexbox;display:-webkit-flex;display:flex;position:relative;width:100%;height:100%;color:inherit}
a.no--img{border:1px solid #dee2e6}
[data-layout="blog"] a.img,[data-layout="grid"] a.img{padding-bottom:56.25%}
[data-layout="list"] a.img{padding-bottom:66.67%}
a.has--img>img{position:absolute;top:0;left:0;z-index:2;width:100%;height:100%;-o-object-fit:cover;object-fit:cover;-webkit-animation:fadeInImages 0.5s ease;animation: fadeInImages 0.5s ease}
a.img::after{background:#e9ecef;position:absolute;top:0;left:0;width:100%;height:100%}
a.img:not(.no--img)::after{content:''}
a.no--img::after{content:'Không có ảnh';display:-ms-flexbox;display:-webkit-flex;display:flex;justify-content:center;align-items:center;text-transform:uppercase;font-size:11px;color:#212529}
[data-view-type=desktop] [data-transform="true"] a.img{transition:transform .5s ease-out .1s}
[data-view-type=desktop] [data-transform="true"] a.img:hover{-webkit-transform:scale(1.05);-moz-transform:scale(1.05);-ms-transform:scale(1.05);-o-transform:scale(1.05);transform:scale(1.05)}
[data-layout="grid"][data-box-shadow="true"] .post_body{padding:15px}
[data-layout="list"] .post_body{width:67%}
[data-box-shadow="false"][data-layout="list"] .post_body{padding-left:15px}
[data-box-shadow="true"][data-layout="blog"] .post_body,[data-box-shadow="true"][data-layout="list"] .post_body{padding:15px}
[data-box-shadow="false"][data-layout="blog"] .post_body{padding:15px 0}
.post_title{font-weight:500}
.post_title>a,.post_meta *{color:rgba(0,0,0,0.87)}
[data-layout="blog"] .post_title>a{font-size:160%}
[data-layout="list"] .post_title>a,[data-layout="grid"] .post_title>a{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}
[data-box-shadow="false"][data-layout="list"] .post_title>a,[data-layout="grid"] .post_title>a{-webkit-line-clamp:2}
[data-box-shadow="true"][data-layout="list"] .post_title>a{-webkit-line-clamp:3}
[data-box-shadow="false"][data-layout="list"] .post_title>a{font-size:140%}
[data-box-shadow="true"][data-layout="list"] .post_title>a,[data-layout="grid"][data-column="2"] .post_title>a{font-size:130%}
[data-layout="grid"][data-column="3"] .post_title>a{font-size:120%}
.post_meta{line-height:34px;white-space:nowrap}
.post_meta *{font-size:13px;text-transform:uppercase}
.post_meta>.post_label>*,.post_meta>.post_date>*{display:inline-block}
.post_meta>.post_label,.post_meta>.post_date{margin-right:8px}
.post_meta .comment-icon:before,.post_meta .share-icon:before{width:14px;height:14px}
.comment-icon:after{font-size:11px;content:attr(data-num-comments)}
.comment-icon,.share-icon{width:30px;height:30px;border-radius:50%}
.comment-icon:hover,.share-icon:hover{background:rgba(60,64,67,0.08)}
.comment-icon[aria-pressed=true],.comment-icon:focus,.comment-icon:active,.share-icon[aria-pressed=true],.share-icon:focus, .share-icon:active{box-shadow:rgba(0, 132, 255, 0.5) 0px 0px 0px 2px}
.comment-icon:focus,.share-icon:focus{outline:none!important}
.post_snippet>*{display:inline;font-size:95%;color:#777;line-height:1.5}
[data-layout="list"] .post_snippet,[data-layout="grid"] .post_snippet{max-height:65px;overflow:hidden}
[data-box-shadow="true"][data-layout="list"] .post_snippet{display:none}
@-webkit-keyframes fadeInImages{0%{opacity:0}to{opacity:1}}
@keyframes fadeInImages{0%{opacity:0}to{opacity:1}}

2. Code thiết kế layout đã chỉnh sửa.

* Code CSS này phù hợp với các web blog bán hàng, trong quá trình tối ưu code Responsive mình đã chỉnh kích thước phù họp nhất trên tùng thiết bị: mobile, ipad, pc...v.v...

- Code CSS đã chỉnh sửa

  <b:tag name='style'>/* <![CDATA[ */
[data-layout="blog"],[data-layout="list"],.post>div{float:left;width:100%}
[data-layout="grid"]{margin:0 -7.5px;display:-ms-flexbox;display:-webkit-flex;display:flex;-ms-flex-flow:row wrap;flex-flow:row wrap}
[data-layout="blog"] .post,[data-layout="list"] .post,[data-layout="blog"] .post_thumb,[data-layout="grid"] .post_thumb,[data-layout="blog"] .post_body,[data-layout="grid"] .post_body{width:100%;background:#ffff}
.post_thumb{border-bottom:1px solid #eee}
[data-box-shadow="false"][data-layout="list"] .post:not(:last-child){padding-bottom:15px;margin-bottom:15px;border-bottom:1px solid rgba(12,28,39,.15)}
[data-box-shadow="true"][data-layout="blog"] .post,[data-box-shadow="true"][data-layout="list"] .post,[data-box-shadow="false"][data-layout="list"] .post:last-child{margin-bottom:15px}
[data-layout="grid"] .post{padding:0 5px 10px 5px}
@media(min-width:321px){[data-layout="grid"][data-column="2"] .post{width:50%}}
@media(min-width:769px){[data-layout="grid"][data-column="3"] .post{width:20%}}
@media(max-width:768px) and (min-width:312px){[data-layout="grid"][data-column="3"] .post{width:50%}}
@media(max-width:320px){[data-layout="grid"][data-column="2"] .post,[data-layout="grid"][data-column="3"] .post{width:100%}}
[data-box-shadow="true"] .post>div{border-radius:4px;overflow:hidden;transition:box-shadow 0.25s}
[data-view-type=desktop] [data-box-shadow="true"] .post>div:not(:hover){-webkit-box-shadow:0 2px 2px 0 rgba(0,0,0,0.14), 0 2px 0 -2px rgba(0,0,0,0.2), 0 0 2px 0 rgba(0,0,0,0.12);box-shadow:0 2px 2px 0 rgba(0,0,0,0.14), 0 2px 0 -2px rgba(0,0,0,0.2), 0 0 2px 0 rgba(0,0,0,0.12)}
[data-view-type=desktop] [data-box-shadow="true"] .post>div:hover{-webkit-box-shadow:0 3px 4px 0 rgba(0, 0, 0, 0.14), 0 3px 3px -2px rgba(0, 0, 0, 0.2), 0 1px 12px 0 rgba(0, 0, 0, 0.12);box-shadow:0 3px 4px 0 rgba(0, 0, 0, 0.14), 0 3px 3px -2px rgba(0, 0, 0, 0.2), 0 1px 12px 0 rgba(0, 0, 0, 0.12)}
[data-layout="list"] .post_thumb{width:33%}
[data-box-shadow="false"] .post_thumb{border-radius:4px}
[data-layout="grid"][data-box-shadow="false"] .post_thumb{margin-bottom:15px}
.post,.post_thumb,.post_body{float:left}
.post_thumb{position:relative;overflow:hidden}
a.img{display:-ms-flexbox;display:-webkit-flex;display:flex;position:relative;width:100%;height:100%;color:inherit}
a.no--img{border:1px solid #dee2e6}
[data-layout="blog"] a.img,[data-layout="grid"] a.img{padding-bottom:56.25%}
[data-layout="list"] a.img{padding-bottom:66.67%}
a.has--img>img{position:absolute;top:0;left:0;z-index:2;width:100%;height:100%;-o-object-fit:cover;object-fit:cover;-webkit-animation:fadeInImages 0.5s ease;animation: fadeInImages 0.5s ease}
a.img::after{background:#e9ecef;position:absolute;top:0;left:0;width:100%;height:100%}
a.img:not(.no--img)::after{content:''}
a.no--img::after{content:'Không có ảnh';display:-ms-flexbox;display:-webkit-flex;display:flex;justify-content:center;align-items:center;text-transform:uppercase;font-size:11px;color:#212529}
[data-view-type=desktop] [data-transform="true"] a.img{transition:transform .5s ease-out .1s}
[data-view-type=desktop] [data-transform="true"] a.img:hover{-webkit-transform:scale(1.05);-moz-transform:scale(1.05);-ms-transform:scale(1.05);-o-transform:scale(1.05);transform:scale(1.05)}
[data-layout="grid"][data-box-shadow="true"] .post_body{padding:7.5px}
[data-layout="list"] .post_body{width:67%}
[data-box-shadow="false"][data-layout="list"] .post_body{padding-left:10px}
[data-box-shadow="true"][data-layout="blog"] .post_body,[data-box-shadow="true"][data-layout="list"] .post_body{padding:5px}
[data-box-shadow="false"][data-layout="blog"] .post_body{padding:5px 0}
.post_title{font-weight:300}
.post_title>a,.post_meta *{color:rgba(0,0,0,0.87)}
[data-layout="blog"] .post_title>a{font-size:160%}
[data-layout="list"] .post_title>a,[data-layout="grid"] .post_title>a{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}
[data-box-shadow="false"][data-layout="list"] .post_title>a,[data-layout="grid"] .post_title>a{-webkit-line-clamp:2}
[data-box-shadow="true"][data-layout="list"] .post_title>a{-webkit-line-clamp:3}
[data-box-shadow="false"][data-layout="list"] .post_title>a{font-size:140%}
[data-box-shadow="true"][data-layout="list"] .post_title>a,[data-layout="grid"][data-column="2"] .post_title>a{font-size:130%}
[data-layout="grid"][data-column="3"] .post_title>a{font-size:120%}
.post_meta{line-height:34px;white-space:nowrap}
.post_meta *{font-size:13px;text-transform:uppercase}
.post_meta>.post_label>*,.post_meta>.post_date>*{display:inline-block}
.post_meta>.post_label,.post_meta>.post_date{margin-right:8px}
.post_meta .comment-icon:before,.post_meta .share-icon:before{width:14px;height:14px}
.comment-icon:after{font-size:11px;content:attr(data-num-comments)}
.comment-icon,.share-icon{width:30px;height:30px;border-radius:50%}
.comment-icon:hover,.share-icon:hover{background:rgba(60,64,67,0.08)}
.comment-icon[aria-pressed=true],.comment-icon:focus,.comment-icon:active,.share-icon[aria-pressed=true],.share-icon:focus, .share-icon:active{box-shadow:rgba(0, 132, 255, 0.5) 0px 0px 0px 2px}
.post_thumb a{display:flex;position:relative;padding-bottom:100%}
.post_thumb img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover}
.comment-icon:focus,.share-icon:focus{outline:none!important}
.post_snippet>*{display:inline;font-size:95%;color:#777;line-height:1.5}
[data-layout="list"] .post_snippet,[data-layout="grid"] .post_snippet{max-height:65px;overflow:hidden}
[data-box-shadow="true"][data-layout="list"] .post_snippet{display:none}
@-webkit-keyframes fadeInImages{0%{opacity:0}to{opacity:1}}
@keyframes fadeInImages{0%{opacity:0}to{opacity:1}}
  /* ]]> */</b:tag>

- Code HTML blogger đã chỉnh sửa

  <div>
    <div class='post_thumb'>
        <a expr:href='data:post.url.canonical' expr:title='data:post.title'>
          <img expr:alt='data:post.title' expr:src='data:post.featuredImage'/>
      </a>
    </div>
    <div class='post_body'>
      <div class='post_title'>
        <a expr:href='data:post.link ? data:post.link : data:post.url' expr:title='data:post.title'><data:post.title/></a>
      </div>
      <div class='post_meta flex-align'>
        <b:if cond='data:widgets.Blog.first.allBylineItems.labels'>
          <span class='post_label'>
            <b:loop values='data:post.labels.length - 1' var='label'>
              <a expr:href='data:post.labels[label].url + &quot;?max-results=10&quot;'><b:eval expr='data:post.labels[label].name'/></a> 
            </b:loop>
          </span>
        </b:if>
        <b:if cond='data:widgets.Blog.first.allBylineItems.timestamp'>
          <span class='post_date' expr:data-date='data:post.date.iso8601'>
            <time><b:eval expr='data:post.date format &quot;dd/MM/yyyy&quot; '/></time>
          </span>
        </b:if>
        <b:if cond='data:post.allowComments'>
          <span class='post-a-comment flex-center comment-icon has-svg-icon has-hover' expr:aria-label='data:messages.postAComment' expr:onclick='&quot;location.href=&apos;&quot; + data:post.commentsUrl + &quot;&apos;&quot;' expr:title='data:messages.postAComment' role='button' tabindex='0'><data:post.numberOfComments/></span>
        </b:if>
<b:if cond='data:widgets.Blog.first.allBylineItems.icons'>
  <span aria-label='Lưu để đọc sau' aria-pressed='false' class='archive-icon has-svg-icon save-this-article flex-center' expr:data-article-id='data:post.id' role='button' tabindex='0' title='Lưu để đọc sau'/>
</b:if>
        <b:if cond='data:widgets.Blog.first.allBylineItems.share'>
          <span aria-expanded='false' aria-label='Chia sẻ nội dung này' aria-pressed='false' class='share-icon has-svg-icon share-this-post flex-center has-hover' expr:data-href='data:post.url.canonical' expr:data-image='resizeImage(data:post.featuredImage,1200,&quot;1200:630&quot;)' expr:data-postId='data:post.id' expr:data-snippets='data:post.snippets.short' role='button' tabindex='0' title='Chia sẻ nội dung này'/>
        </b:if>
      </div>
      <div class='post_snippet'>
        <p><b:eval expr='data:post.body snippet {length: 180, links: true, linebreaks: true, ellipsis: true }'/></p><a expr:href='data:post.hasJumpLink ? data:post.url fragment &quot;more&quot; : data:post.url' expr:title='data:post.title'><data:blog.jumpLinkMessage/></a>
      </div>
    </div>
  </div>

- Đọc thêm: Chia Sẻ Code CSS Grid Card List Dạng Lưới Chuẩn Respondsive

-Hei! trên đây là một số code có thể nói là thông dụng để cho các bạn tham khảo, trong việc thiết kế template blogspot chuẩn Responsive, tải nhanh, chuyên nghiệp...v.v...

- Đừng quên góp ý cùng VeoSpot.Com để cùng nhau phát triển website blog hữu ích, góp ý ở phần comments nha...