Popular Post Anime Fansub

November 20, 2020

New #1

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>

(9 balasan) 👋 #1 , #2 ArazNovel , #3 Dio Bandot , #4 Wann. , #5 Axsal Rubiansyah , #6 , #7 Meghan Kamui , #8 ❤️ Wernayasa , #9 Mang Araw ,

November 20, 2020 at 10:56 PM

New #2

berfungsi untuk template apa pun

Copy post ID