Simple Grid V2 Responsive template blogspot chuẩn HTML5 dành cho blog ảnh

By Unknown

Thứ Tư, 13 tháng 8, 2014

Simple Grid V2 là template blogger/blogspot hổ trợ responsive 100% xây dựng trên nền tảng chuẩn HTML5 và CSS3 phù hợp blog ảnh với thiết kế đẹp mắt.

Simple Grid V2 Responsive template blogspot chuẩn HTML5 dành cho blog ảnh

Simple Grid V2  với giao diện đẹp dễ nhìn khi ở trạng thái PC lẫn mobile, hiệu ứng load trang đẹp mắt, thumbnail trang chủ rất hợp với blog ảnh không thể chê ở điểm nào.

Các tính năng Simple Grid V2 

1. Responsive 100% ( giao diện thay đổi theo trình duyệt
2. Chuẩn HTML5
3. Chuẩn CSS3
4. Tích hợp SEO trong template
5. Hỗ trợ quảng cảo Adsense
6. Top và main menu đẹp
7. Bài viết liên quan có hình đẹp
8. Mạng chia sẻ dưới bài viết với hiệu ứng đẹp
9. Phân trang Navigation dạng số
10. Form nhận bài qua mail
11. Hệ thống comment phân cấp hỗ trợ emoticon và code mã hóa
12. Popular Post màu sắc đẹp
13. Mạng xã hội dưới footer với các icon đẹp
14. và nhiều thứ khác hơn thế nữa

Check template chuẩn HTML5 và CSS3

Chuẩn HTML5

Chuẩn CSS3

Giao diện Simple Grid V2 

Simple Grid V2 trang chủ

Simple Grid V2 bài viết

Edit Popular Post trong Simple Grid

Sau khi bạn cài template xong vào Mẫu >> Chỉnh sửa HTML >> Ctrl+F tìm

<b:widget id='PopularPosts1' locked='false' title='Weekly Posts' type='PopularPosts'>...</b:widget>

và thay nó thành

<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 form nhận bài qua mail

Tìm đoạn table width='100%' và td width='64px' và thay nó thành table class='tabletd1' và td class='tabletd2' 

Tiếp tục thêm CSS bên dưới vào trước thẻ ]]></b:skin>

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

DOWNLOAD | DEMO 

Chúc bạn thành công!

Tag : Chia sẻ, CSS, HTML5, Responsive, Template