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.
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 Blogger2. 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>
5. Selanjutnya, tambahkan Javascript diatas kode </body>
6. Simpan Tema dan lihat hasilnya
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'}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>Popular Post Samehada Versi 2
1. Buka Blogger2. Klik Tema > Edit HTML
3. Tambahkan kode berikut diatas </style> atau </b:skin>
4. Selanjutnya, tambahkan Javascript diatas kode </body>
5. Tambahkan kode berikut diatas </b:section> pada widget Sidebar
6. Untuk lebih jelasnya contoh seperti ini
7. Simpan Tema dan lihat hasilnya
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;
}Tampilkan Kode
<script>//<![CDATA[
$(document).ready(function() {$('img').attr('src', function(i, src)
{return src.replace( 's72-c', 's640' );});});
//]]></script>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, "1400:700") : "https://placehold.it/240x240/222/eee?text=" + data:blog.title + ""' expr:srcset='sourceSet(data:post.featuredImage, [240,360], "240:240")' 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>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>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 :#
