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>

Ads
Iklan
@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
@Dagruel.com
Yah,, berarti gk memungkinkan ya.... walau hanya untuk dipasang di widget?
kuharap ada solusinya...

https://furiox-bt.blogspot.com/
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.
@Wernayasa @Dagruel.com
Kalau manual, di buat seperti cover rating bintang?
Bisa tolong buatkan,,, Terima Kasih.
@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
coba wrap dengan div dalam snippetPosts dan tambahkan title di atasnya:

<h3><data:title/></h3>
<div>
<b:include name='snippetedPosts'/>
</div>

Tetap min,, saya sudah coba. :'(

Ketika diwrap div (snippetedPosts)nya yg no 1 malah ikutan hilang. tdk hanya thumb bgroundnya sja tapi seluruh bagian no 1.
bro mau nanya ini kok gua tambahin popular post jadinya thumbnail postingan gua malah jadi panjang gitu
mungkin css temamu konflik dengan css popular post
barangkali ada kaitannya dengan class
.snippet-thumbnail
hapus width 100% di css
sebelum
.snippet-thumbnail {height: 185px;width: 100%;background-position: top;background-size: cover;position: absolute;}
sesudah di hapus
.snippet-thumbnail {height: 185px;background-position: top;background-size: cover;position: absolute;}
bro mau nanya di blog gua kan ada dark mode nya nah pas gua pakein dark mode itu popular post malah kga ikut dark jg cara biar ngikutin gimana ya?
@Serafall
sesuaikan dengan warna temamu

.dark-mode .child:nth-child(n+2) {background-color: #1F2937;}
.dark-mode .post-wrp{border-bottom: 1px solid #6B7280;}
.dark-mode .child:nth-child(n+2) a {color: #D1D5DB;}


apabila tidak berhasil, ganti class .dark-mode sesuai dengan code temamu
Min, bisa tidak antara gambar yang kecil dan yang besar itu berbeda, seperti web extonan (yang bleach) antara gambar besar dan kecilnya beda
Min, widget nya error kalo diisi banyak label genrenya :(
<b:with value='[label kebanyakn] (widget gk tampil)
Ahh sorry udah di update ya? di <b:with value='[ ada genre sama genre2
berarti bisa ditambahin lebih banyak lagi min? label genrenya?

Thanks :>
Min boleh minta tutor widget "Genre" dari Zeistmanga gak? Mau ku tempel di template lain 🙏 makasih min sebelumnya
@FS
iya boleh, gampang kok bikinnya.
tapi mungkin hari senin, abis lebaran.
ingatkan kalau saya lupa.
@Wernayasa, Iya min!
Setiap database Genre, Genre2 memiliki batasan sekitar 39-40 selebihnya akan membuat widget error.

b:with value='["40 label"]' var='Genre'
b:with value='["40 label"]' var='Genre2'


Jadi untuk yang mau menambah genre lebih banyak lagi.
1. Tambahkan:

b:with value='["40 label"]' var='Genre'
b:with value='["40 label"]' var='Genre2'
b:with value='["40 label"]' var='Genre3'
dan penutupnya juga /b:with

2. Setelah itu edit dan tambahkan: (or data:label.name in data:Genre3)

b:if cond='data:label.name in data:Genre or data:label.name in data:Genre2 or data:label.name in data:Genre3'
dan seterusnya.

Semoga ini membantu untuk yang lain!
41