Related Posts dapat diartikan artikel terkait yang letaknya berada dibawah postingan yang tampil berbeda-beda secara otomatis pada setiap postingan sesuai label artikel tersebut.
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
Post a Comment
Jika ada hal yang kurang jelas, misalnya tips dan trik yang tidak berfungsi, ulasan yang sudah usang, meski mengetahui ada ulasan yang memerlukan pembaruan terkadang kami malas untuk memperbaruinya, jadi silakan tanyakan saja melalui kolom komentar dan akan kita bahas bersama. Regards!