Simple Grid V2 - Template Blogspot Responsive cho trang chia sẻ hình ảnh

Simple Grid V2 - Template Blogspot Responsive cho trang chia sẻ hình ảnh

Simple Grid Responsive Blogger Template V2 là mẫu blogspot cực kì chuyên nghiệp dành cho trang chia sẻ hình ảnh. Đây là mẫu mà Blogger Template for Seo rất thích khi trải nghiệm. Với thiết kế Responsive thì chắc chắn rằng lượng độc giả từ mobile sẽ không ngừng được tăng lên, rất phù hợp cho các bạn chia sẻ hình ảnh HOT ^^

Các tính năng nổi bật

• Thiết kế full Responsive
• Chuẩn HTML5 và CSS3
• Tối ưu hóa SEO
• Bài đăng có thể dưới dạng lưới hoặc dạng danh sách
• Bài viết liên quan dưới dạng thumb
• Các nút chia sẻ qua mạng xã hội
• Menu Drop Down mượt mà
• Hỗ trợ các vị trí quảng cáo adsense
• Bài viết tự động phân trang
• Hỗ trợ convert code và emoticon trong hộp comment
• Cùng nhiều tính năng hấp dẫn khác

Cách chỉnh sửa Popular Post với hình ảnh

Đi tới Blogger > Template > Edit HTML > tìm và thay thế đoạn mã dưới đây

<b:widget id='PopularPosts1' locked='false' title='Weekly Posts' type='PopularPosts'>
  <b:includable id='main'>
  <b:if cond='data:title'><h2><data:title/></h2></b:if>
  <div class='widget-content popular-posts'>
    <ul>
      <b:loop values='data:posts' var='post'>
      <li>
        <b:if cond='data:showThumbnails == &quot;false&quot;'>
          <b:if cond='data:showSnippets == &quot;false&quot;'>
            <!-- (1) No snippet/thumbnail -->
            <a expr:href='data:post.href' expr:title='data:post.title'><data:post.title/></a>
          <b:else/>
            <!-- (2) Show only snippets -->
            <div class='item-title'><a expr:href='data:post.href' expr:title='data:post.title'><data:post.title/></a></div>
            <div class='item-snippet'><data:post.snippet/></div>
          </b:if>
        <b:else/>
          <b:if cond='data:showSnippets == &quot;false&quot;'>
            <!-- (3) Show only thumbnails -->
            <div class='item-thumbnail-only'>
              <b:if cond='data:post.thumbnail'>
                <div class='item-thumbnail'>
                  <a expr:href='data:post.href' target='_blank'>
                    <img expr:alt='data:post.title' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:title='data:post.title' expr:width='data:thumbnailSize'/>
                  </a>
                </div>
              </b:if>
              <div class='item-title'><a expr:href='data:post.href' expr:title='data:post.title'><data:post.title/></a></div>
            </div>
            <div style='clear: both;'/>
          <b:else/>
            <!-- (4) Show snippets and thumbnails -->
            <div class='item-content'>
              <b:if cond='data:post.thumbnail'>
                <div class='item-thumbnail'>
                  <a expr:href='data:post.href' target='_blank'>
                    <img expr:alt='data:post.title' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:title='data:post.title' expr:width='data:thumbnailSize'/>
                  </a>
                </div>
              </b:if>
              <div class='item-title'><a expr:href='data:post.href' expr:title='data:post.title'><data:post.title/></a></div>
              <div class='item-snippet'><data:post.snippet/></div>
            </div>
            <div style='clear: both;'/>
          </b:if>
        </b:if>
      </li>
      </b:loop>
    </ul>
  </div>
</b:includable>
</b:widget>

Chỉnh sửa widget theo dõi qua Email

Bạn nên thêm widget này trước khi chỉnh sửa trong HTML.
Đi tới Blogger > Template > Edit HTML > Tìm và thay thế đoạn mã dưới đây

table width='100%' và td width='64px'

bằng đoạn mã dưới đây

table class='tabletd1' và td class='tabletd2'

 Sau đó dán đoạn mã CSS dưới đây vào trước ]]></b:skin> hoặc </style>

.tabletd1 {width:100%;}
.tabletd2 {width:64px;}

Hi vọng dưới những gì đã chia sẻ từ Blogger Template for Seo thì các bạn sẽ cảm thấy thích thú với Simple Grid V2.
Hãy để lại những cảm nhận của bạn bên dưới nhé!
Thanks aisukablog for sharing this template.

Demo Download

dfdfdf