Widget Popular Posts Anime

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

  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>

@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!!
@Lord Dio
apa contoh nya begini
https://eastclone.blogspot.com/search/label/Manga
jika iya, mustahil jika letaknya di halaman didepan kecuali menggunakan 2 blog berbeda 1 khusus manga info dan 1 khusus chapter
Solusi nya ada dua
1. Punya 2 blog, 1 khusus manga info, 1 khusus chapter.
2. Hanya tampil dihalaman Label.

Mungkin bang @wernayasa punya solusi yg lebih bagus

Masalah nya filter post blogger postingan harus diupdate ketanggal terbaru jika tidak maka satu postingan pun tidak akan muncul
@Lord Dio
ia, tidak bisa. latest chapter di furiox sebenernya dalam widget Blog, jadi tidak bisa di pindahkan ke widget sidebar.
solusinya seperti tema Dagruel, di halaman depan khusus untuk latest chapter.
@Dagruel.com
Makanya label filter sy hilangkan, banyak yg bingung postingan tidak muncul. wkwkw

@Lord Dio
Mau bedah tema orang dulu, keknya latest post bisa di atasi dengan javascript.
T unggu hasilnya.
Kan di atas(punya admin) ada thumbnail background komiknya tuh(yang no 1)
tapi ketika di pasang widget tittle, thumbail backgroundnya malah tenggelam kedalam.

"b include name = widget-title "
https://komikganz.my.id/
@Wernayasa

Ini untuk lebih jelasnya:::
https://drive.google.com/file/d/1v7Tyu5NsAtAfMLch6ihrKc-7EMsjTjpH/view

Maaf jaringan ngadat tadi, jadi banyak yg salah komennya. jadi di hapus xD
21