Skip to main content

Cara Membuat Related Posts dengan Thumbnail di Blogger

Related Posts dapat diartikan artikel terkait yang letaknya berada dibawah postingan yang tampil berbeda-beda secara otomatis pada setiap postingan sesuai label artikel tersebut.

Cara Membuat Related Posts dengan Thumbnail di Blogger

Selain itu terkadang disebut juga sebagai Similiar Posts, Baca Juga, Barangkali Anda menyukai ini, dll. Biasanya hanya ditampilkan 4 buah saja atau lebih dengan judul dan gambar thumbnail. Contohnya bisa dilihat pada gambar di atas atau diakhir postingan ini.

Cara Membuatnya:

1. Salin Css berikut dan pasang ke bagian skin dalam Template Blogger anda.

.related-posts{
margin-top:30px
}
.related-posts ul{
display:-webkit-box;
display:-webkit-flex;
display:-moz-box;
display:-ms-flexbox;
display:flex;
flex-wrap:wrap;
margin:0;
padding:16px 0 0;
}
.related-posts ul li{
list-style-type:none;
width:calc((100% / 2) - 6px);
box-shadow:0 0 0px $(posts.boxshadow.color);
max-width:50%;
text-align:left;
padding:0;
margin-bottom:10px
}
.related-posts ul li:nth-of-type(2n){
margin-left:10px
}
.related-thumbnails{
max-height:130px;
max-width:100%
}
.related-thumbnails img{
border:1px solid $(posts.boxshadow.color);
border-radius:8px;
height:130px;
width:100%
}
h4.related-titles{
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
line-height:1.6em;
font-weight:600;
padding:0;
margin:5px 0
}
h4.related-titles a{
color:$(posts.text.color)
}

Catatan:
Jangan lupa sesuaikan kode warna dengan Template Anda, jika tidak maka akan error.

2. Salin Script Kode JS berikut dan pasang ke dalam Template Blogger anda.

Script ini hanya baru saya coba pasang pada Template Contempo dan Essential saja, kalau untuk Template Notable agar kode bekerja maksimal mungkin harus menambahkan JQuery berikut diatas <body>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'/>

Comments