Widget Popular Posts Anime

December 11, 2020

New #1

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.

Demo

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

Cara pemasangan

Log in ke blogger masuk ke tab Tema
Sesuaikan > Edit HTML
Paste css di atas ]]></b:skin>
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>

December 12, 2020 at 2:06 PM

New #2

@Wernayasa
Min, tambah satu lagi seperti komik terbaru/chapter terbaru yang disamping kanan cover ada list chapnya:
(seperti yang ada di manga furiox) itu bagus untuk widget chapter terbaru.

Sangat memudahkan pembaca yang sudah membaca chap lama untuk langsung membaca chap barunya
ketika masuk ke halaman depan.....

Terima Kasih!!

Cara pemasangan

Copy post ID