Cara membuat widget Popular Posts seperti situs anime. Widget ini khusus dibuat untuk situs fanshare atau fansub, jadi ini bukan untuk blog biasa. Widget yang bagus dapat menarik pengunjung, desain juga sangat penting, makanya desain widget yang bagus dapat mendatangkan banyak klik. Selain itu juga dapat memperindah halaman depan.

Desain kali ini terinspirasi dari Extonan, berbeda dari popular post sebelumnya yang lebih minimalist.

Cara pemasangan

1. Log in ke blogger masuk ke tab Tema
2. Sesuaikan > Edit HTML
3. Paste css di atas ]]></b:skin>
4. Paste Widget Popular Post di sidebar

Css code

.PopularPosts {counter-reset: section;box-shadow: 1px 3px 8px rgba(49, 49, 49, 0.1);border-radius: 3px;background-color: #fff;overflow: hidden;}
.crs::before {counter-increment: section;content: counter(section) "";border: .5px solid #0c70de;padding: 5px;border-radius: 3px;font-size: .9rem;color: #1e73be;}
.post-wrp {display: grid;grid-template-columns: 45px 45px 1fr;padding: 10px 15px;border-bottom: 1px solid #ececec;}
.c-img img {width: 45px;}
.crs {align-self: center;}
.PopularPosts .post-title {margin: 0 0 3px;font-size: 14px;text-decoration: none;display: -webkit-box;-webkit-box-orient: vertical;text-overflow: ellipsis;-webkit-line-clamp: 2;overflow: hidden;}
.mfc {margin-left: 10px;}
.genre-date {font-size: .88rem;}
.child:nth-child(n+2) .snippet-thumbnail {display: none;}
.snippet-thumbnail {height: 185px;width: 100%;background-position: top;background-size: cover;position: absolute;}
.child:nth-child(1) .post-wrp {border-bottom: none;background-image: linear-gradient(rgba(181, 204, 225, 0.05), rgba(30, 115, 190, 0.7));align-self: end;z-index: 1;}
.post-wrp:nth-child(1) .crs,.post-wrp:nth-child(1) .c-img,.post-wrp:nth-child(1) .mfc {z-index: 1;}
.child:nth-child(1) .crs::before {background: #1e73be;color: white;}
.child:nth-child(1) a {color: #fff;text-decoration: none;}
.child:nth-child(1) .crs,.child:nth-child(1) .c-img,.child:nth-child(1) .mfc {z-index: 1;}
.child:nth-child(1) {color: white;position: relative;height: 185px;display: grid;}
.child:nth-child(n+2) {color: #888}
.child:nth-child(n+2) a {color: #333;text-decoration: none;}

Adapun letak sidebar tidak bisa saya tentukan dimana. Kalian cari sendiri. Kalau kesulitan menemukan sidebar siahkan komentar di bawah ini, jangan lupa sertakan dengan link blog kamu. Kalau ada error kemungkin disebabkan konflik id='PopularPosts1'. Pastikan tidak ada id yang sama.

<b:widget id='PopularPosts1' locked='false' title='Popular Post' type='PopularPosts' version='2' visible='true'>
      <b:widget-settings>
        <b:widget-setting name='numItemsToShow'>10</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'>LAST_WEEK</b:widget-setting>
      </b:widget-settings>
      <b:includable id='main' var='this'>

    <b:include name='snippetedPosts'/>

</b:includable>
      <b:includable id='postLabels'>
  <span class='byline post-labels'>
    <span class='byline-label'>Genre: </span>
    <b:loop index='i' values='data:post.labels' var='label'>
      <a expr:href='data:label.url' rel='tag'>
        <data:label.name/>
      </a>,
    </b:loop>
  </span>
</b:includable>
      <b:includable id='snippetedPostContent'>
        <b:with value='"post-" + data:post.id' var='className'>
                <style>
                  .<data:className/> {background-image:url(<b:eval expr='resizeImage(data:post.featuredImage, 485, "485:185").cssEscaped'/>);}
                  @media (max-width: 285px) { .<data:className/> {background-image:url(<b:eval expr='resizeImage(data:post.featuredImage, 285, "285:185").cssEscaped'/>);} }
                  @media (max-width: 385px) and (min-width: 286px) { .<data:className/> {background-image:url(<b:eval expr='resizeImage(data:post.featuredImage, 385, "385:185").cssEscaped'/>);} }
                  @media (max-width: 485px) and (min-width: 386px) { .<data:className/> {background-image:url(<b:eval expr='resizeImage(data:post.featuredImage, 485, "485:185").cssEscaped'/>);} }
                  @media (max-width: 745px) and (min-width: 486px) { .<data:className/> {background-image:url(<b:eval expr='resizeImage(data:post.featuredImage, 585, "585:185").cssEscaped'/>);} }
                </style>

                  <div expr:class='"snippet-thumbnail " + data:className'/>

              </b:with>
    <div class='post-wrp'>
	<span class='crs'/>
    <b:include cond='data:this.postDisplay.showFeaturedImage and data:post.featuredImage' name='snippetedPostThumbnail'/>
	<b:include cond='data:this.postDisplay.showTitle' name='snippetedPostTitle'/>
        </div>
</b:includable>
      <b:includable id='snippetedPostThumbnail'>
	
    <a class='c-img' expr:href='data:post.url'>
      <b:include data='{                         image: data:post.featuredImage,                         imageSizes: [172, 244],                         imageRatio: "1:2",                         sourceSizes: "272px"                        }' name='responsiveImage'/>
      <span class='counter'/>
    </a>
    

</b:includable>
      <b:includable id='snippetedPostTitle'>
  <b:if cond='data:post.title != ""'>
    <div class='mfc'>
    <h3 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h3>
    <div class='genre-date'>
      <b:with value='["Action","Adventure","Comedy","Crime","Drama","Fantasy","Historical","Horror","Isekai","Magical Girls","Mecha","Medical","Mystery","Philosophical","Psychological","Romance","Sci-Fi","Shoujo Ai","Shounen Ai","Slice of Life","Sports","Superhero","Thriller","Tragedy","Wuxia","Yaoi","Yuri","Tsundere","Yandere"]' var='Genre'>
      <b:with value='["Adaptation","Cooking","Harem","Loli","Mafia","Magic","Military","Music","Reincarnation","Reverse Harem","Samurai","School Life","Supernatural","Survival","Time Travel","Vampire","Video Games","Demon","Monsters","Martial Arts","Virtual Reality","Demons","Monster Girls","Monsters","Police"]' var='Genre2'>
        <b>Genres:</b>
      <b:loop index='i' values='data:post.labels' var='label'>
          <b:if cond='data:label.name in data:Genre or data:label.name in data:Genre2'>
      <a class='p-tag' expr:href='data:label.url' rel='tag'>
        <data:label.name/>,
      </a>
          </b:if>
    </b:loop>
        </b:with>
         </b:with>
      <div class='date mt-5'><data:post.date/></div>
      </div>
    </div>
  </b:if>
</b:includable>
      <b:includable id='snippetedPosts'>
  
    <!-- Don't render the post that we're currently already looking at. -->
    <b:loop values='data:posts filter (p =&gt; p.id != data:view.postId)' var='post'>
      <div class='child' role='article'>
        <b:include name='snippetedPostContent'/>
      </div>
    </b:loop>

</b:includable>
    </b:widget>