Tutorial Membuat Widget "Related Posts" Blogger

👤Mister Guru (Prastowo Ismanto)
12/20/2024 08:37:00 PM
0
D
aftar postingan atau artikel terkait, atau acap kali di sebut "Related Posts", adalah fitur penting di blog yang membantu pembaca menemukan konten terkait dengan mudah. Di samping meningkatkan waktu kunjungan, fitur ini juga dapat mengurangi bounce rate, yaitu persentase pengunjung yang meninggalkan situs web setelah melihat satu halaman saja.

Btw, seperti apa sih elemen "Related Posts" itu? Berikut tangkapan layar dari blog Mister Guru, di mana kode CSS & HTML yang dipakai sama persis dengan yang dibagikan di artikel ini.

Contoh Related Posts

Nah, dalam tutorial ini, kita akan mempelajari langkah-langkah sederhana untuk menambahkan widget "Related Posts" di Blogger dengan desain menarik yang sama persis dengan tangkapan layar di atas. Untuk warna dan jenis maupun ukuran huruf, silahkan dikustomisasi sesuai selera & tema blog. Oh iya, sebelum bereksperimen, lebih baik backup dulu template kalian agar jika terjadi kesalahan, kita bisa dengan mudah mengembalikannya ke template sebelumnya. Yuk, tanpa berlama-lama lagi, let's get going!

Lanjutkan ke halaman berikutnya

1. CSS

#related-posts {
    margin: 0 auto;
    padding: 0 10px;
    box-sizing: border-box;
    overflow: hidden;
    max-width: 100%;}
#related-posts .title {
    margin:10px 0;
    font-size:21px;
    font-weight:500;
    padding:0;
    color:#333333;}
#related-posts .related_items {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;}
#related-posts .related_item {
    flex: 1 1 calc(33.333% - 10px);
    margin: 0;}
#related-posts .url_item {
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: flex-start;}
#related-posts .img_item {
    display: block;
    width: 100%;
    height: auto;
    margin-bottom: 5px;
    padding: 0;
    transition: transform 250ms ease-in-out, opacity 250ms ease-in-out;}
#related-posts .title_item {
    display: block;
    margin: 0;
    padding-right: 10px;
    text-align: left;
    color: #333333;
    line-height: 1.2;
    font-weight: 500;
    transition: color 250ms ease-in-out;}
#related-posts .related_item:hover .img_item, #related-posts .related_item:focus .img_item {
    transform: scale(0.98);
    opacity: 0.7;}
#related-posts .related_item:hover .title_item, #related-posts .related_item:focus .title_item {
    color: #555555;}
/* Responsive */
@media screen and (max-width: 680px) {
    #related-posts {
        padding: 0 15px;}
    #related-posts .related_item {
        flex: 1 1 calc(50% - 20px)}}
@media screen and (max-width: 425px) {
    #related-posts {
        padding: 0 10px;}
    #related-posts .related_item {
        flex: 1 1 calc(50% - 10px);
        margin:0 0 10px 0;}
    #related-posts .related_items {
        margin: 0;
        gap: 10px;}}
@media screen and (max-width: 375px) {
    #related-posts {
        padding: 0 10px;    }
    #related-posts .related_item {
        flex: 1 1 calc(100% - 20px);}
    #related-posts .related_items {
        gap: 0;margin: 0}}
Penempatan kode
Salin dan letakkan kode CSS di atas di antara kode 
<head>
dan 
</head>.
Disarankan untuk menempatkan kode ini dalam satu kelompok yang sama dengan CSS untuk postingan blog, biasanya memiliki nama ".item-post .post-body{...}".
Lanjutkan ke halaman berikutnya

2. HTML & Javascript

<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<script>
//<![CDATA[
var relatedTitles=new Array();var relatedTitlesNum=0;var relatedUrls=new Array();var thumburl=new Array();function related_results_labels_thumbs(json){for(var i=0;i<json.feed.entry.length;i++){var entry=json.feed.entry[i];relatedTitles[relatedTitlesNum]=entry.title.$t;try{thumburl[relatedTitlesNum]=entry.gform_foot.url}catch(error){s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl[relatedTitlesNum]=d.replace(/.*?:\/\//g, "//")}else thumburl[relatedTitlesNum]='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC'}if(relatedTitles[relatedTitlesNum].length>300)relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0,300)+"";for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){relatedUrls[relatedTitlesNum]=entry.link[k].href;relatedTitlesNum++}}}}function removeRelatedDuplicates_thumbs(){var tmp=new Array(0);var tmp2=new Array(0);var tmp3=new Array(0);for(var i=0;i<relatedUrls.length;i++){if(!contains_thumbs(tmp,relatedUrls[i])){tmp.length+=1;tmp[tmp.length-1]=relatedUrls[i];tmp2.length+=1;tmp3.length+=1;tmp2[tmp2.length-1]=relatedTitles[i];tmp3[tmp3.length-1]=thumburl[i]}}relatedTitles=tmp2;relatedUrls=tmp;thumburl=tmp3}function contains_thumbs(a,e){for(var j=0;j<a.length;j++)if(a[j]==e)return true;return false}function printRelatedLabels_thumbs(){for(var i=0;i<relatedUrls.length;i++){if((relatedUrls[i]==currentposturl)||(!(relatedTitles[i]))){relatedUrls.splice(i,1);relatedTitles.splice(i,1);thumburl.splice(i,1);i--}}var r=Math.floor((relatedTitles.length-1)*Math.random());var i=0;if(relatedTitles.length>0)document.write('<div class="title">'+relatedpoststitle+'</div>');document.write('<div class="related_items"/>');while(i<relatedTitles.length&&i<20&&i<maxresults){document.write('<div class="related_item"><a class="url_item');if(i!=0)document.write('"');else document.write('"');document.write(' href="'+relatedUrls[r]+'" title="'+relatedTitles[r]+'"><img class="img_item" alt="'+relatedTitles[r]+'" width="16" src="'+thumburl[r]+'" title="'+relatedTitles[r]+'" height="9" loading="lazy"/><div class="clear"></div><div class="title_item">'+relatedTitles[r]+'</div></a></div>');if(r<relatedTitles.length-1){r++}else{r=0}i++}document.write('<div class="clear"></div></div>');relatedUrls.splice(0,relatedUrls.length);thumburl.splice(0,thumburl.length);relatedTitles.splice(0,relatedTitles.length)}
//]]>
</script>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'/>
<script>
var RelatedLabel = "<data:label.name/>";
    RelatedLabel = encodeURIComponent(RelatedLabel.trim());
(function(){var script = document.createElement('script');script.setAttribute('src', '/feeds/posts/default/-/' + RelatedLabel + '?alt=json-in-script&orderby=updated&callback=related_results_labels_thumbs&max-results=8');document.write(script.outerHTML)})();
</script>
</b:loop>
<script>
var currentposturl="<data:post.url/>";
var maxresults=6;
var relatedpoststitle="Baca Artikel Terkait";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div>
</b:if>
Penempatan kode
Salin dan letakkan kode HTML & Javascript ini pada tempat yang dikehendaki, biasanya setelah artikel atau postingan blog. Ada beberapa pilihan penempatan yang bisa dilakukan, tetapi pada umumnya ada di bagian "post-footer". Cari kode 
<div class='post-footer'>
dan letakkan kode HTML & Javascript di atas tepat di bawah kode "post-footer". Jika pada template blog terdapat dua (2) kode "post-footer" yang sama persis, pilih kode yang kedua.

Pada bagian "post-footer", biasanya terdapat beberapa elemen, misal "About Author" (tentang penulis) dan elemen "share". Anda bisa menempatkannya sesuai urutan yang Anda kehendaki.

Setelah selesai, coba lakukan pratinjau halaman untuk melihat apakah "Related Post" seperti pada blog ini sudah muncul. Untuk nama atau "tagline", silahkan sesuaikan dengan selera, misal "Postingan Terkait", "You Might Also Like", dll.

Begitulah cara memasang "Related Post" pada "Blogger". Mudah bukan? Silahkan berkreasi. Jika ada kesulitan atau pertanyaan, silahkan bagikan di kolom komentar.

Happy blogging! And ... Jangan lupa ngopi.☕

123

Baca juga:

📘 Tutorial Pagination: Membagi Postingan Blog Menjadi Beberapa Halaman 📘 Tips Mempercepat Loading Website / Blog
Tags

Posting Komentar

0 Komentar

Posting Komentar (0)
Bagikan ke aplikasi lainnya
Salin Tautan Pos