POPULAR POST berPUSING2 bila diSENTUH ..

Tengok !!
Lain daripada yang lainkan popular post aku ??

" Haah ... Lain sangat2 .. "

Diamlah !!
Aku bukannya tanya ko pon ..
Aku tanya orang lain arr !!

TuToRiaL

1. Setting Popular post dulu ...
    Tandakan pada Image Thumbnail sahaja ...
    Snippet xpayah tanda ..

2. Masuk ke DASHBOARD > > TEMPLATE > > EDIT HTML

3. CTRL + F dan cari kod ni  >>>>>      ]]></b:skin>

4. Copy kod di bawah ni dan Paste di atas kod yang cari tadi ...

 /*popular-post*/
.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;
}

.PopularPosts img {
    margin-left: 10px;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
    -o-transition: all 1.5s ease;
    -moz-transition: all 1.5s ease;
    -webkit-transition: all 1.5s ease;
}

.PopularPosts img:hover {
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    -o-transform: scale(1.2) rotate(360deg) translate(0px);
    -moz-transform: scale(1.2) rotate(360deg) translate(0px);
    -webkit-transform: scale(1.2) rotate(360deg) translate(0px);
    -o-transition: all 1.5s ease;
    -moz-transition: all 1.5s ease;
    -webkit-transition: all 1.5s ease;
}

5. CITL + F sekali lagi dan cari kod ni pulak  >>>>

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

6. Kemudian, gantikan
<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
                                                  sampai
                                               </b:widget>
kepada kod di bawah ni ...

 <b:widget id='PopularPosts1' locked='false' title='Popular post' 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'>
             
                <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' expr:width='data:thumbnailSize' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnIVGbjYeUI570uPkG3lbfwxmsvvJijmqgv3aTNtWjcaGSQGgG0LHQ9zxtgAq96lG-eD1w1KUOpBx0dMqK7j5EZAjG0S3P64jj8mVzUEiv5N0MiEFlFGvAVz1J3g55wTa7tJFkMPTWXTg/s72-c/default.png'/>
       </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>

7. Yang terakhir sekali ...
     Tekan SAVE ...
     Jadi x ??

" Ok ... Dah jadi ...
Thank you ... " ^_^