Widget Popular Posts Anime

Langsung Aja Ke tutorial nya ya btw ini di buat oleh emissionhex

Cara pemasangan

CCS 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>
    

Oke Sekian dulu ya ,Tunggu aja update widget lainnya

Source:
emissionhex.blogger.com