Sửa đổi viết Gallery Mẫu mới nhất

Saya sẽ xem xét một một trong những tính năng của các bản demo mẫu trước khi tôi chia sẻ nó sau này, do đó, hy vọng bạn có thể tạo ra các mẫu của riêng bạn hoặc thay đổi các widget mặc định đã được cung cấp bởi các blogger. Widget từ thời gian chỉnh sửa blogger của tôi là mát Post, một tiện ích phục vụ cho việc hiển thị các bài viết, bài báo mà các yêu cầu hầu hết du khách. Widget bài viết phổ biến theo mặc định này là thú vị bởi vì nó không có tính năng thu nhỏ và tóm tắt. Nhưng tôi nghĩ rằng vẫn có điều kiện, phụ tùng có thể được cài đặt trực tiếp trên blog sử dụng nhiều hơn các bài viết hình ảnh, nếu nó là mặc định của widget được cài đặt trên các blog có vẻ như loại không phù hợp của bộ sưu tập.

DEMO

Vâng, thời gian này tôi đã cố gắng để sửa đổi các phụ tùng để phù hợp với đăng trên một blog mà có bộ sưu tập nội dung. Hình ảnh như trên, chỉ hiển thị hình thu nhỏ và các chức danh ở một vị trí ngang. Nếu bạn quan tâm, đây là làm thế nào để làm cho nó:

1. Đăng nhập vào tài khoản Blogger của bạn
2. Sau đó đi đến mẫu >> nhấp vào Chỉnh sửa HTML đừng quên để kiểm tra các Widget Templates Mở rộng .
3. Sau đó, nhập mã sau đây trên  ]]> </ b: skin> :

.PopularPosts .widget-content ul li {background:none repeat scroll 0 0 transparent;float:left;list-style:none outside none;margin:0 !important;padding: 0 !important;border-bottom:none}

.PopularPosts ul{padding:5px 0}

.PopularPosts .item-thumbnail img{width:110px;height:110px;padding:11px;margin:0}

.PopularPosts .item-content{position:relative;float:left;margin:0}

.PopularPosts .item-title a{font-size:11px;color:#fff;display:block;padding:0 5px;float:left;width:122px}

.PopularPosts .item-title:hover{opacity:1;-moz-opacity:1;filter:alpha(opacity=100)}

.PopularPosts .item-thumbnail{float:left;margin:3px 1px 7px 10px;border:1px solid #ccc;overflow: hidden}

.PopularPosts .item-title{background:#000;position:absolute;bottom:8px;right:2px;opacity:.6;-moz-opacity:.6;filter:alpha(opacity=6)}

1. Mã màu đỏ ở trên là chiều dài và chiều rộng của hình ảnh thu nhỏ, bạn có thể thay đổi và điều chỉnh độ rộng của thanh bên trên mẫu, như được hiển thị trong thanh bên của blog này.
2. Sau đó đi đến >> bố trí thêm một tiện ích chọn Bài viết mới nhất trên hàng thứ năm.
3. Sau khi trang xuất hiện bài mát, các thiết lập như hình dưới đây:
   
   
   
   
   
   Đáng chú ý là chỉ đánh dấu vào thumbnail , để kiểm tra hộp đoạn trống không cần thiết. Tiêu đề và số lượng bài viết mà bạn muốn hiển thị cho bạn.
4. Sau khi các bước trên, quay trở lại Edit HTML (đánh dấu Expand Widget Templates ), tìm đoạn mã sau:

<b:widget id='PopularPosts1' locked='false' title='Popular 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'><data:post.title/></a>
          <b:else/>
            <!-- (2) Show only snippets -->
            <div class='item-title'><a expr:href='data:post.href'><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 alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                  </a>
                </div>
              </b:if>
              <div class='item-title'><a expr:href='data:post.href'><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 alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                  </a>
                </div>
              </b:if>
              <div class='item-title'><a expr:href='data:post.href'><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>
    <b:include name='quickedit'/>
  </div>
</b:includable>
</b:widget>

1. Một khi bạn tìm thấy nó, thay thế nó bằng các mã sau đây:

<b:widget id='PopularPosts1' locked='false' title='Most Product View' 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'><data:post.title/></a>
          <b:else/>
            <!-- (2) Show only snippets -->
            <div class='item-title'><a expr:href='data:post.href'><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-content'>
              <b:if cond='data:post.thumbnail'>
                <div class='item-thumbnail'>
                  <a expr:href='data:post.href' target='_blank'>
                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                  </a>
                </div>
              </b:if>
              <div class='item-title'><a expr:href='data:post.href'><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 alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                  </a>
                </div>
              </b:if>
              <div class='item-title'><a expr:href='data:post.href'><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>
    <b:include name='quickedit'/>
  </div>
</b:includable>
</b:widget>

1. Cuối cùng, lưu mẫu xem kết quả.

Sửa đổi Popular Post widget từ các blogger không chỉ cho blog bộ sưu tập, bạn cũng có thể mặc nó trên blog thay vì bộ sưu tập như được hiển thị trong thanh bên trên blog này. Vì vậy, trước đó hướng dẫn để thay đổi sự xuất hiện của bài viết mẫu trực tuyến Gallery nếu có ít hiểu xin vui lòng để lại tin nhắn trong hộp bình luận xin lỗi nếu có hướng dẫn như thế này may mắn trước khi tốt, và hy vọng hữu ích