Cara Memasang Widget Popular Post di Halaman Depan Blog

Cara Memasang Widget Popular Post di Halaman Depan Blog. Popular post biasanya di sidebar. Kita bisa pasang di halaman depan (homepage). Tampilannya seperti ini:

Cara Memasang Widget Popular Post di Halaman Depan Blog

CSS:

#bottomwidget {width: 100%;margin: 0 0 20px;}
#bottomwidget h2 {
    font-size: 18px;
    padding: 10px;
    background: #2c87f0;
    color: white;
    margin-bottom: 5px;
}
.bottomwidget{background:#FFFFFF;float:none;overflow:hidden;padding:0 20px;width:auto}
#bottomwidget .widget{margin:10px 0}
#bottomwidget .widget-content.popular-posts li {
    border-bottom: 1px dotted #f1f1f1;
    float: left;
    height: 80px;
    margin: 5px 5px 5px 0;
    padding: 5px 0;
    width: 49%;
    list-style: none;
}
#bottomwidget .item-title {
    float: right;
    font-weight:500;
    overflow: hidden;
    text-align: left;
    width: 70%;list-style: none;}
#bottomwidget .item-snippet{display:none}
#bottomwidget .PopularPosts .item-thumbnail {
    height: 72px;
    margin: 0 0 0 0;
    overflow: hidden;
    padding: 0;
    float: left;}

HTML:

  <b:section class='main section' id='bottomwidget'>
    <b:widget id='PopularPosts2' locked='false' title='Popular Posts' type='PopularPosts'>
      <b:widget-settings>
        <b:widget-setting name='numItemsToShow'>4</b:widget-setting>
        <b:widget-setting name='showThumbnails'>true</b:widget-setting>
        <b:widget-setting name='showSnippets'>false</b:widget-setting>
        <b:widget-setting name='timeRange'>LAST_WEEK</b:widget-setting>
      </b:widget-settings>
      <b:includable id='main'>
  <b:if cond='data:title != &quot;&quot;'><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'>
          <b:if cond='!data:showSnippets'>
            <!-- (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/>
          <!-- (3) Show only thumbnails or (4) Snippets and thumbnails. -->
          <div expr:class='data:showSnippets ? &quot;item-content&quot; : &quot;item-thumbnail-only&quot;'>
            <b:if cond='data:post.featuredImage.isResizable or data:post.thumbnail'>
              <div class='item-thumbnail'>
                <a expr:href='data:post.href' target='_blank'>
                  <b:with value='data:post.featuredImage.isResizable                                  ? resizeImage(data:post.featuredImage, 72, &quot;1:1&quot;)                                  : data:post.thumbnail' var='image'>
                    <img alt='' border='0' expr:src='data:image'/>
                  </b:with>
                </a>
              </div>
            </b:if>
            <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
            <b:if cond='data:showSnippets'>
              <div class='item-snippet'><data:post.snippet/></div>
            </b:if>
          </div>
          <div style='clear: both;'/>
        </b:if>
      </li>
      </b:loop>
    </ul>
    <b:include name='quickedit'/>
  </div>
</b:includable>
    </b:widget>
  </b:section>