Show only thumbnails in blogger popular posts widget

 

If you are publishing any music website or your post has perfect satisfied image with good colorizing then make use of the popular posts with only thumbnails.In the blogger default popular posts widget there is no option to show only thumbnails without post title.So to add this code to blogger follow below post.This is another look as recent posts widget with only thumbnails.
Part1
1.Go to blogger.
2.Layout->>Add a Gadget->>Popular Posts widget

 
3.Select as below in image:-

 
4.Save it.
Part2
1.Go to blogger.
2.Back up Template
3.Template->> Edit Html
4.look for the below code using ctrl+f shortcut key

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

5.Now replace above code with below code

<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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh12faVFXuBSI-Kyd95DH6SArMBQGnMu_DmONBhZEez6JHGM2IwWkx2_KFiUAMalFt0EneA2BxfQHXfzbaOaR23p0TeV7Gidjbhyphenhyphen8kGpaA26OyKERSkC3Vf9eddgNFHsKHGRQV0Z4-fvRk/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>

Style It Using below code (optional)
1.Template->>Template Designer->>Add css->>Add below code

.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;}