Popular Post Anime Fansub

Widget post populer blogger fansub

Ini saya buat khusus untuk developer blogger. Saya sebut komponen karena ini bisa dipakai oleh developer blogger untuk mebangun tema fansub. Bagi pengguna awam kalian tidak perlu khawatir, karena widget ini mudah dipasang di blog kalian.

Intinya meringankan kerjaan developer fansub, untuk apa membuat widget sama yang hasilnya juga sama.

Yang paling saya sukai dari widget ini adalah desainnya yang simple. Tidak banyak yg perlu di kostumisasi, namun kalian bisa mengubah warna orange counter. Selebihnya kalian berkreasi sendiri.

Saya masih liburan bikin tema, tapi kalau mau request widget fansub, silahkan.


.grid-col {grid-template-columns: repeat(3,1fr);display: grid;}
.grid-col .post:nth-child(n+2) {margin: 10px;}
.grid-col section:nth-child(1) img {height: 205px;object-fit: cover;object-position: top;}
.grid-col img {width: 100%}
.grid-col section:nth-child(1) {grid-column: 1 / -1;}
.grid-col section:nth-child(n+2) img, .ofc {height: 105px;object-fit: cover;}
.grid-col section:nth-child(n+2) .post-title,.grid-col section:nth-child(n+2) .byline, .grid-col section:nth-child(n+2) .date {display: none;}
.ov-img, .ov-title {grid-row: 1 / -1;}
.ov-img {grid-column: 1 / -1;}
.ov-title {grid-column: 1 / -1;align-self: self-end;padding: 10px 15px;overflow: hidden;}
.grid-col section:nth-child(1) .ov-title {background: linear-gradient(to bottom,#0000,#000);}
.item-thumbnail {position: relative;display: grid;}
.item-thumbnail:hover img {filter: brightness(50%);transition: .2s}
.PopularPosts{counter-reset: section;}
.grid-col section .counter::before {counter-increment: section;content: counter(section);position: absolute;top: 6px;left: 4px;background: #FF6347;color: white;padding: 3px 7px;font-size: 13px;border-radius: 3px;}
.PopularPosts .post-title {display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;}
.PopularPosts a,.genre-date{color: white;text-decoration: none;font-weight: 500}
.genre-date {font-size: 14px;}
.widget-title {display: flex;justify-content: space-between;align-items: center}
.view-all {background: #FF6347;text-transform: uppercase;font-size: 9px;padding: 3px 6px;border-radius: 2px;}

<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'>
  <div class='widget-title'>
  <b:include name='widget-title'/>
          <a class='view-all' href=''>View All</a>
        </div>
  <div class='widget-content'>
    <b:include name='snippetedPosts'/>
  </div>
</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'>
  <div class='post-content'>
    <b:include cond='data:this.postDisplay.showFeaturedImage and data:post.featuredImage' name='snippetedPostThumbnail'/>
  </div>
</b:includable>
      <b:includable id='snippetedPostThumbnail'>
  <div class='item-thumbnail relative overlay'>
    <a class='block ov-img b-img' expr:href='data:post.url'>
      <b:include data='{                         image: data:post.featuredImage,                         imageSizes: [172, 244],                         imageRatio: &quot;1:2&quot;,                         sourceSizes: &quot;272px&quot;                        }' name='responsiveImage'/>
      <span class='counter'/>
    </a>
    <b:include cond='data:this.postDisplay.showTitle' name='snippetedPostTitle'/>
  </div>
</b:includable>
      <b:includable id='snippetedPostTitle'>
  <b:if cond='data:post.title != &quot;&quot;'>
    <div class='ov-title'>
    <h3 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h3>
    <div class='genre-date'>
      <b:include name='postLabels'/>
      <div class='date mt-5'><data:post.date/></div>
      </div>
    </div>
  </b:if>
</b:includable>
      <b:includable id='snippetedPosts'>
  <div class='grid-col' role='feed'>
    <!-- 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'>
      <section class='post' role='article'>
        <b:include name='snippetedPostContent'/>
      </section>
    </b:loop>
  </div>
</b:includable>
    </b:widget>
Ads
Iklan
Widgetnya letakan di sidebar, tepatnya dimana saya tidak tau, setiap tema berbeda2.
Kalau ragu cari </b:widget> lalu paste widget popular post di bawahnya.

untk css paste di atas ]]>
Pergi ke Theme > Edit HTML.
Paste CSS di atas :
]]></b:skin>
https://1.bp.blogspot.com/-3xreRxMMeKQ/X7zKl4-XRlI/AAAAAAAAGXc/ms0kiZYj-WwSiB-GyOOaEFF1OGi2JegQgCLcBGAsYHQ/s800/b_skin%2Bblogger.png


Selanjutnay cari sidebar blog kamu lalu paste PopularPost widget di sana:
Cari :
id='Label1'
Paste PopularPost1 di atasnya:
https://1.bp.blogspot.com/-8fOT1gu3HDs/X7zLlbO_LZI/AAAAAAAAGXs/kWmbj8MsU8Q91S2zPpMyqllch9hAaPLpQCLcBGAsYHQ/s1061/popular%2Bpost%2Bwidget.png
13