Cara Membuat Popular Post Samehada di Blog

cara membuat tampilan widget popular post seperti milik website samehada diblog

Rian
By Rian
0
Cara Membuat Popular Post Samehada di Blog

Cara Membuat Popular Post Samehada di Blog

cara membuat tampilan widget popular post seperti milik website samehada diblog

Halo sobat KodeRian pada kesempatan kali ini saya akan membagikan sebuah Tutorial untuk Blogger yaitu "Cara Membuat Popular Post Samehada di Blog" Siapa yang ga kenal dengan salah satu Fansub Anime ini, saya sendiri suka cari anime disana dan enak buat di unduh karena banyak pilihanya tapi disini saya ga bahas itu melainkan tentang tampilan dari Popular Post nya. Tampilan yang menarik dimana terlihat sebuah gambar berurutan dan ada tanggal nya. 

Cara Membuat Popular Post Samehada di Blog


Tentu saja itu membuat saya menarik dan membuatnya tampilan semirip mungkin serta bagus bisa di sesuaikan lagi dengan keinginan sobat nanti.

Cara Membuat Popular Post Samehada

Saya disini ada 2 versi yang bisa sobat pakai dan bisa dengan mudah diruba rubah karena kodenya juga simple hanya CSS dan Javascript untuk rubah ukuran gambar saja. Simak baik baik sob dibawah ini.

Popular Post Samehada Versi 1

1. Buka Blogger 
2. Klik Tata letak > Add Widget Popular Post (Jika sudah ada tidak perlu) 
3. Klik Tema > Edit HTML 
4. Tambahkan kode berikut diatas </style> atau </b:skin>
Tampilkan Kode
#PopularPosts1 .widget-content.popular-posts{margin:auto}
#PopularPosts1 ul li:nth-child(1n+2) .item-meta{font-size:11px;padding:6px 0 0;opacity:.7}
#PopularPosts1 ul{padding:0;list-style:none;margin:auto;overflow:hidden}
#PopularPosts1 ul li{margin:auto;padding:10px 0}
#PopularPosts1 ul li:first-child .item-thumbnail-only{position:absolute;top:0;left:0;right:0;bottom:0;min-height:152px;width:100%}
#PopularPosts1 ul li:first-child .item-thumbnail img{width:100%;height:140px;padding:0}
#PopularPosts1 ul li:first-child .item-thumbnail-only .item-title{position:absolute;bottom:17px;left:0;right:0;padding:10px 10px 10px 45px;background:linear-gradient(to bottom,rgba(0,0,0,.05) 6%,rgba(0,0,0,0.85) 70%);z-index:1;}
#PopularPosts1 ul li .item-title a{color:#FFF;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:normal}
#PopularPosts1 ul li:first-child .item-thumbnail .loaders{margin:-30px}
#PopularPosts1 .item-thumbnail{position:relative;float:none;margin:auto}
#PopularPosts1 ul li:nth-child(1n+2) .item-thumbnail{float:left;max-width:50px;max-height:50px;margin-right:10px;border-radius:3px;overflow:hidden;padding:1px;border:1px solid}
#PopularPosts1 ul li:before{float:left;padding:5px 8px;border:1px solid;margin:12px 7px 0 0;border-radius:5px;font-size:12px}
#PopularPosts1 ul li:nth-child(1n+2){background:#F44336;padding:10px;color:#FFF}
#PopularPosts1 ul li:first-child{padding:0;position:relative;overflow:hidden;min-height:135px}
#PopularPosts1 ul li:nth-child(1):before{content:'1';position:absolute;bottom:0;left:10px;z-index:2;border:none;background:#F44336;color:#FFF;padding:10px;border-radius:0;min-height:50px}
#PopularPosts1 ul li:nth-child(1n+2) img{padding:0}
#PopularPosts1 ul li .item-thumbnail img{z-index:1}
#PopularPosts1 ul li:nth-child(2):before{content:'2'}
#PopularPosts1 ul li:nth-child(3):before{content:'3'}
#PopularPosts1 ul li:nth-child(4):before{content:'4'}
#PopularPosts1 ul li:nth-child(5):before{content:'5'}
5. Selanjutnya, tambahkan Javascript diatas kode </body>
Tampilkan Kode
<script>//<![CDATA[
$(document).ready(function () {
    $('#PopularPosts1 ul li:first-child .item-thumbnail img').each(function () {
        $(this).attr('src', $(this).attr('src').replace('w80-h80-p-k-no-nu', 'w347-h140-c'))
    });
    $("#PopularPosts1 ul li:nth-child(1n+2)").each(function () {
        var c = $(this),
            b = c.find(".item-title a"),
            a = b.attr("href");
        $.ajax({
            url: a,
            type: "get",
            success: function (f) {
                var d = $(f).find(".published").text();
                b.parent().after('<div class="item-meta"><span class="item-date">' + d + '</span></div>")
            }
        })
    });
});
//]]></script>
6. Simpan Tema dan lihat hasilnya 

Popular Post Samehada Versi 2

1. Buka Blogger 
2. Klik Tema > Edit HTML
3. Tambahkan kode berikut diatas </style> atau </b:skin>
Tampilkan Kode
.PopularPosts .post-main:nth-child(1):before {
  position: absolute;
  bottom: 0;
  left: 10px;
  z-index: 2;
  border: 0;
  background: #262626;// bisa kalian ganti warna backgroundya
  color: #fff;
  padding: 10px;
  border-radius: 0;
  min-height: 50px;
}
.PopularPosts .post-main:before {
  float: left;
  padding: 5px 8px;
  border: 1px solid;
  margin: 12px 7px 0 0;
  border-radius: 5px;
  font-size: 12px;
  content: counter(num);
  counter-increment: num;
}
.PopularPosts .post-main:first-child .post-content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  min-height: 152px;
  width: 100%;
}
.PopularPosts .post-main:first-child .post-img img {
  width: 100%;
  height: 140px;
  object-fit: cover;
}
.PopularPosts .post-main:first-child .post-title {
  position: absolute;
  bottom: 17px;
  left: 0;
  right: 0;
  padding: 10px 10px 10px 45px;
  background: linear-gradient(
    to bottom,
    rgb(0 0 0 / 0%) 6%,
    rgba(0, 0, 0, 0.85) 70%
  );
}
.PopularPosts .post-main:first-child {
  position: relative;
  overflow: hidden;
  min-height: 135px;
  counter-reset: num;
}
.PopularPosts .post-main:nth-child(1n + 2) {
  background: #262626;// bisa kalian ganti warna backgroundya
  padding: 10px;
  color: #fff;
}
.PopularPosts .post-main:nth-child(1n + 2) .post-img {
  float: left;
  max-width: 50px;
  max-height: 50px;
  margin-right: 10px;
  border-radius: 3px;
  overflow: hidden;
  padding: 1px;
  border: 1px solid;
}
.PopularPosts .post-content .post-title h3 {
  font-size: 13px; // bisa kalian ukuran fontnya
  font-family: "open sans", sans-serif;
  line-height: normal;
}
.PopularPosts .post-content .post-title h3 a {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.PopularPosts .post-date,
.PopularPosts .post-desc {
  font-size: 11px;
  padding: 6px 0 0;
  opacity: 0.7;
}
4. Selanjutnya, tambahkan Javascript diatas kode </body>
Tampilkan Kode
<script>//<![CDATA[
$(document).ready(function() {$('img').attr('src', function(i, src) 
{return src.replace( 's72-c', 's640' );});});
//]]></script>
5. Tambahkan kode berikut diatas </b:section> pada widget Sidebar
Tampilkan Kode
<b:widget id='PopularPosts1' locked='false' title='Populart Anime' type='PopularPosts' version='3' 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'>false</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'>
          <h3><span><data:title/></span></h3>
        </div>
   <div class='widget-content'>
    <b:loop values='data:posts' var='post'>
         <article class='post-main' itemscope='itemscop' itemtype='https://schema.org/BlogPosting'>
          <div class='post-content'>  
           <div class='post-img'>
           <b:if cond='data:postDisplay.showFeaturedImage'>
             <a expr:href='data:post.link ? data:post.link : data:post.url' expr:title='data:post.title ? data:post.title : data:messages.noTitle'>
              <img expr:alt='data:post.title ? data:post.title : data:messages.image' expr:src='data:post.featuredImage ? resizeImage(data:post.featuredImage, 1400, &quot;1400:700&quot;) : &quot;https://placehold.it/240x240/222/eee?text=&quot; + data:blog.title + &quot;&quot;' expr:srcset='sourceSet(data:post.featuredImage, [240,360], &quot;240:240&quot;)' expr:title='data:post.title ? data:post.title : data:messages.image'/>
             </a>
            
           </b:if>
                          </div>
           <div class='post-title'><h3>
            <a expr:href='data:post.link ? data:post.link : data:post.url' expr:title='data:post.title ? data:post.title : data:messages.noTitle'>
             <b:eval expr='data:post.title ? data:post.title : data:messages.noTitle'/>
            </a>
             </h3></div> 
           <div class='post-info'>
            <span class='post-date'>
             <i class='fa fa-clock-o'/>
             <a expr:href='data:post.link ? data:post.link : data:post.url' expr:title='data:post.title ? data:post.title : data:messages.noTitle'>
              <time class='published' expr:datetime='data:post.date.iso8601' expr:title='data:post.date.iso8601'>
               <data:post.date/>
              </time>
             </a>
            </span>
           </div>
           <div class='post-desc'>
           <b:if cond='data:postDisplay.showSnippet'>
              <b:eval expr='data:post.snippets.long snippet { length: 150, links: false, linebreaks: false, ellipsis: false }'/>              
           </b:if>
            </div>
          </div>
         </article>
    </b:loop>
   </div>
  </b:includable>
    <b:includable id='snippetedPostByline'/>
    <b:includable id='snippetedPosts'/>
  </b:widget>
6. Untuk lebih jelasnya contoh seperti ini
Tampilkan Kode
<aside id='sidebar-wrapper' itemscope='itemscope' itemtype='http://schema.org/WPSideBar'>
<b:section class='sidebar' id='sidebar'>
Kodenya taruh disini
</b:section>
</aside>
7. Simpan Tema dan lihat hasilnya 

Hasilnya jadi seperti ini

See the Pen Popular Post Same Samehadaku by Koderian (@koderian) on CodePen.

Sampai disini saja dulu dan artikel pada blog ini akan terus saya update Setiap Hari meskipun cuman Satu atau Dua saja tapi itu lebih baik daripada Tidak :#

Rian

Kota: Bandung, Pasirkoja - Kabupaten bandung.

Post a Comment