Menampilkan Popular Post sebagai Featured Post di Homepage Blog

Baca Juga

Popular Post adalah postingan atau tulisan terbanyak dibaca atau dikunjungi. Kita biasa menampilkannya di sidebar. Widgetnya pun sudah disediakan Blogger.

Kali ini CB berbagi kode Popular Posts yang ditampilkan sebagai Featured Post di Homepage Blog. Contoh, demo, dan kodenya di blog demo StartSeo. Itu template gratis. Ada juga premiumnya.

Perhatikan tiga kolom paling atas itu. Itu dia Popular Post yang dijadikan sebagai Featured Post di Homepage Blog. Tampilannya mirip Featured Post 4 Kolom yang sudah dishare sebelmumnya.

Menampilkan Popular Post sebagai Featured Post di Homepage Blog

Berikut ini kode dan cara  mmasangnya.

1. Tema > Edit HTML
2. Copas kode berikut ini di atas kode ]]></b:skin>

.row-x1{width:100%}
.trending{margin:0 auto}
.trending.no-items,.trending .widget > .widget-title{display:none}
.trending .widget-content{position:relative;float:left;width:100%;background-color:#fbfbfb;box-sizing:border-box;padding:10px;margin:1px 0 2)}
.trending .PopularPosts .popular-post{float:left;width:calc((100% - 40px) / 3);margin:25px 20px 0 0}
.trending .PopularPosts .popular-post.item-0,.trending .PopularPosts .popular-post.item-1{margin:0 20px 0 0}
.trending .PopularPosts .popular-post.item-2{margin:0}
.trending .PopularPosts .popular-post.item-5,.trending .PopularPosts .popular-post.item-8,.trending .PopularPosts .popular-post.item-9{margin:25px 0 0}
.trending .PopularPosts .post-image-wrap{width:100px;height:100px;margin:0 15px 0 0}
.trending .PopularPosts .post-title{font-size:15px;font-weight:700;margin:0 0 10px}

.custom-widget .custom-item{display:block;overflow:hidden;margin:0 0 20px}
.custom-widget .custom-item:last-child{margin:0}
.custom-widget .post-image{position:relative;float:left;width:80px;height:80px;overflow:hidden;margin:0 12px 0 0}
.custom-widget .cmm-avatar{width:55px;height:55px;margin:0 12px 0 0}
.custom-widget .cmm-snippet{display:block;font-size:12px;color:#888;line-height:1.4em;margin:2px 0 0}
.custom-widget .post-header{overflow:hidden}
.custom-widget .post-title{font-size:13px;font-weight:600;line-height:1.4em;margin:0 0 5px}
.custom-widget .post-meta{font-size:11px}
.PopularPosts .popular-post{display:block;overflow:hidden;margin:0 0 20px}
.PopularPosts .popular-post:last-child{margin:0}
.PopularPosts .post-image-wrap{float:left;width:80px;height:80px;overflow:hidden;margin:0 12px 0 0}
.PopularPosts .post-image{width:100%;height:100%;position:relative;display:block;z-index:1;overflow:hidden}
.PopularPosts .post-header{overflow:hidden}
.PopularPosts .post-title{font-size:13px;font-weight:600;line-height:1.4em;margin:0 0 5px}
.PopularPosts .post-meta{font-size:11px}
@media screen and (max-width: 980px) {
.trending{box-sizing:border-box;padding:0 20px}
.trending .widget-content{padding:0 0 30px;border-width:0 0 1px}
.trending .PopularPosts .popular-post{width:100%;margin:20px 0 0!important}
.trending .PopularPosts .popular-post.item-0{margin:0!important}
}

3. Copas kode berikut ini di bawah kode penutup navigasi menu atau di atas kode <div id='main-wrapper> atau <div class='main-wrapper'>

<!-- Trending Wrapper -->
<div class='clearfix'/>
  <b:if cond='data:view.isHomepage'>
    <!-- Trending Wrapper -->
    <b:section class='trending row-x1' id='trending' maxwidgets='1' name='Trending Posts' showaddelement='yes'>
      <b:widget id='PopularPosts2' locked='false' title='Popular Posts' type='PopularPosts' visible='true'>
        <b:widget-settings>
          <b:widget-setting name='numItemsToShow'>3</b:widget-setting>
          <b:widget-setting name='showThumbnails'>true</b:widget-setting>
          <b:widget-setting name='showSnippets'>true</b:widget-setting>
          <b:widget-setting name='timeRange'>ALL_TIME</b:widget-setting>
        </b:widget-settings>
        <b:includable id='main' var='this'>
      <b:include name='widget-title'/>
      <div class='widget-content'>
        <b:loop index='i' values='data:posts' var='post'>
            <b:include data='post' name='content'/>
        </b:loop>
      </div>
    </b:includable>
        <b:includable id='content' var='post'>
      <article class='popular-post post'>
        <b:class expr:name='&quot;item-&quot;+data:i'/>
        <b:if cond='data:postDisplay.showFeaturedImage'>
          <div class='post-image-wrap'>
            <a class='post-image' expr:href='data:post.url'>
              <b:if cond='data:post.featuredImage'>
                <b:if cond='data:widget.sectionId == &quot;trending&quot;'>
                  <span class='post-thumb' expr:data-image='resizeImage(data:post.featuredImage, 100, &quot;1:1&quot;)' expr:style='&quot;background-image:url(&quot; + resizeImage(data:post.featuredImage, 35, &quot;1:1&quot;) + &quot;)&quot;'/>
                  <b:else/>
                  <span class='post-thumb' expr:data-image='resizeImage(data:post.featuredImage, 80, &quot;1:1&quot;)' expr:style='&quot;background-image:url(&quot; + resizeImage(data:post.featuredImage, 35, &quot;1:1&quot;) + &quot;)&quot;'/>
                </b:if>
                <b:else/>
                <span class='post-thumb' data-image='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3UqXwehnu1W-MRfrL_qwMMJVdBdMZZrQIflfBUstKKrDWwf8DhlkOCghGOYqmGqV5PAj0FhJImYJn5GzH04nwlFan5teBJEzifCFx5XcKriZ42nMkyeclSmWOfMOx_seOP5z2FOu-bJ0/w80-h80-p-k-no-nu/nth-ify.png' style='background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3UqXwehnu1W-MRfrL_qwMMJVdBdMZZrQIflfBUstKKrDWwf8DhlkOCghGOYqmGqV5PAj0FhJImYJn5GzH04nwlFan5teBJEzifCFx5XcKriZ42nMkyeclSmWOfMOx_seOP5z2FOu-bJ0/w35-h35-p-k-no-nu/nth-ify.png)'/>
              </b:if>
            </a>
          </div>
        </b:if>
        <div class='post-header'>
          <h2 class='post-title'>
            <a expr:href='data:post.url'><data:post.title/></a>
          </h2>
          <b:if cond='data:postDisplay.showSnippet'>
            <div class='post-meta'>
              <b:if cond='data:widget.sectionId == &quot;trending&quot;'>
                <b:if cond='data:post.labels'><span class='meta-tag'><data:post.labels.first.name/></span></b:if>
                <b:else/>
                <span class='post-date'><time class='published' expr:datetime='data:post.date.iso8601'><data:post.date/></time></span>
              </b:if>
            </div>
          </b:if>
        </div>
      </article>
    </b:includable>
      </b:widget>
    </b:section>
    <div class='clearfix'/>
  </b:if>

4. Simpan template!
5. Atur popular postnya di Layout > Trending Post

Lihat juga Featured Post widget lainnya.

Demikian Menampilkan Popular Post sebagai Featured Post di Homepage Blog. Good Luck & Happy Blogging! (www.contohblog.com).*