Kênh Tên Miền chuyên cung cấp tên miền đẹp, giá rẻ! Hãy liên hệ kỹ thuật: 0914205579 - Kinh doanh: 0912191357 để được tư vấn, hướng dẫn miễn phí, Cảm ơn quý khách đã ủng hộ trong thời gian qua!
Friday, December 23, 2011



Hôm nay Chip xem 1 trang blog nước ngoài thấy 1 tiện ích Popular Post 3 cột khá đẹp,đem về hì hục thực hiên thử nhưng nó lại không có bao viền,và hiệu ứng xoay xoay,chip thấy bên bác Noct-land cũng có giới thiệu thủ thuật này nhưng 1 số bạn thực hiện nó bj lỗi  CSS do temple lắm loại Css như blog Chip nên sẽ bị hiện thành 1 cột dọc rất xấu.Chip cuối cùng kết hợp 2 blog lại,giới thiệu cho các bạn thủ thuật này.và chỉ cho các bạn cách tách Css ra,bạn không thích hiệu ứng xoay có thể tách ra,không thích bao viền thì có thể remove,chip thực hiện thành công nhưng chỉ có 2 cột,nếu bạn nào muốn 3 cột tăng độ rộng trên sidebar lên khoảng 300 là ok.
                                                       
Bắt đầu thủ thuật:

Bước 1:Bạn vào Bảng điều khiển - Thiết kế - Phần tử trang - Tạo 1 widget thêm tiện ích popular post như sau:

                                         

Bước 2 bạn thiết lập widget popular post như sau:


Bước3:Bạn vào Bảng điều khiển - Thiết kế - Chỉnh sửa Html - Chọn mở rộng tiện ích chèn code bên dưới mã sau:]]></b:skin>



/*Css Popular Post Pro*/
.popular-posts .item-thumbnail{float:left;}
.popular-posts ul{padding-left:0px;}
.popular-posts ul li {list-style-image: none;list-style-type: none;display:inline;}
/*Css boder*/
#PopularPosts1 img{-webkit-transition:all 0.5s ease;-moz-transition:all 0.5s ease;transition:all 0.5s ease;padding:4px;background: 
#eee;background: -webkit-gradient(linear, left top, left bottom, from(#eee), color-stop(0.5, #ddd), color-stop(0.5, #c0c0c0), to(#aaa));background: -moz-linear-gradient(top, #eee, #ddd 50%, #c0c0c0 50%, #aaa);-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;-webkit-box-shadow: 0 0 3px rgba(0,0,0,.7);-moz-box-shadow: 0 0 3px rgba(0,0,0,.7);box-shadow: 0 0 3px rgba(0,0,0,.7);}
/*Css xoay xoay*/
#PopularPosts1 img:hover{-moz-transform: scale(1.2) rotate(-350deg);-webkit-transform: scale(1.2) rotate(-350deg);-o-transform: scale(1.2) rotate(-350deg);-ms-transform: scale(1.2) rotate(-350deg);transform: scale(1.2) rotate(-350deg);-webkit-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);-moz-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);}
/*End Css Popular Post Pro*/


Chú ý:
-Code màu đen bắt buộc phải có
-Code màu da cam là bao viền cho ảnh hiển thị màu nền ,bạn bỏ code này đi sẽ ko có bao viền
-Code màu xanh lá tạo hiệu ứng xoay,bạn bỏ code này đi sẽ ko có hiệu ứng xoay

Bước4:Bạn vào temple không nhấn mở rộng mấu tiện ích và nhấn Ctrl + F tìm code sau


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

Bước5:Xóa hết code vừa tìm được,thay thế nó bằng đoạn code 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 == "false"'>
          <b:if cond='data:showSnippets == "false"'>
            <!-- (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 == "false"'>
            <!-- (3) Show only thumbnails -->
            <div class='item-thumbnail-only'>
             
                <div class='item-thumbnail'>
   <a expr:href='data:post.href' expr:title='data:post.title'>
    <b:if cond='data:post.thumbnail'>
                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
       <b:else/>
        <img alt='' border='0' expr:height='data:thumbnailSize' src='http://2.bp.blogspot.com/-erTXCq61ULM/TmHYAQBZ0GI/AAAAAAAACCs/6cBX54Dn6Gs/s72-c/default.png' expr:width='data:thumbnailSize'/>
       </b:if>
                  </a>
                </div>        
             </div>
            <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>



Bước 6:Lưu temple lại,xem sản phẩm vừa tạo thôi.

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

0 comments:

Post a Comment

domain, domain name, premium domain name for sales

Popular Posts