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 ^^

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

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%'td width='64px'

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

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

table class='tabletd1' td class='tabletd2'

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

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.

Nhận Template mới nhất qua Email.

Nhập địa chỉ Email của bạn rồi chọn Đăng ký sau đó nhập kí tự captcha và vào địa chỉ email để kích hoạt hoàn tất.

Là một người rất đam mê các mẫu blogspot và MMO.

Bài trước
« Prev Post
Bài sau
Next Post »
8 Comments
avatar

Chúng tôi không thể lưu mẫu của bạn.
Mẫu của bạn không thể phân tích cú pháp được vì không được định dạng tốt. Hãy đảm bảo tất cả thành phần XML được đóng đúng cách. Thông báo lỗi XML:
Content is not allowed in prolog.

Trả Lời
avatar

Bạn nên copy và paste code vào phần chỉnh sửa HTML chứ không thực hiện việc upload file lên, như vậy sẽ đỡ gặp phải một vài lỗi không tương thích.
Thân ái

Trả Lời
avatar

Chào bạn hiện nay template này mình đang bị lỗi không hiện thị thumbnail tại website chandaivn.com bạn có thể xem là hướng khắc phục dùm mình được không? cảm ơn bạn nhiều

Trả Lời
avatar

Hi bạn,
Mình vừa có ghé qua website của bạn, thấy về cơ bản là hỉnh ảnh hiển thị tốt. Có một số bài viết không hiển thị ảnh đại diện, bạn thử khắc phục như sau:
Bước 1. Vào bài viết hiển thị ảnh đại diện, chuyển sang chế độ HTML, copy đoạn code ảnh đó lại.
Bước 2. Vào bài viết bị lỗi ảnh đại diện, chuyển sang chế độ HTML, dán đoạn code ở trên vào bên dưới đoạn code đó. So sánh hai đoạn code với nhau, xem điểm khác biệt là gì rồi chỉnh sửa theo là ok.
Thông thường, nó sẽ không hiển thị ảnh nếu đoạn scr=// hoặc https://. Bạn nên chú ý chỗ này, vì nếu đúng nó sẽ là scr=http:// mà không phải là hai cái trên.
Chúc bạn thành công!

Trả Lời
avatar

bạn ơi để bài viết trên trang chủ dạng lưới như thế nào vậy bạn

Trả Lời
avatar

Chào bạn.
Bài viết trên trang chủ mặc định dạng Gallery đó bạn :)

Trả Lời
avatar

cho mình hỏi sao chỉnh sửa cho giống demo thế

Trả Lời
avatar

Trả lời câu hỏi này của bạn thật sự rất khó. Bạn phải làm blogspot quen dần mới biết được. Bạn có thể theo dõi các bài học về blogspot cơ bản tại địa chỉ này:
https://www.youtube.com/playlist?list=PLsNxPoEuHzbpya2-s7PLeHcPBLYcELRoW

Trả Lời