Membuat Postingan Terkait di Blogger / Blogspot Sendiri dengan 2 Pilihan Style

July 24, 2018 - #blog_tutorial

Membuat Postingan Terkait di Blogger / Blogspot Sendiri dengan 2 Pilihan Style

Post terkait yang biasa disebut Related Posts merupakan sebuah hal yang dapat memungkinkan pengunjung bisa lebih lama di dalam sebuah halaman web/blog karena menampilkan tautan post atau artikel yang berkaitan dengan post atau artikel yang dibaca.

To the point

Biasanya jika anda mencari cara membuat hal ini di halaman blog lain, mereka hanya "copas" lalu merubah gaya CSS sedikit tanpa tau sendiri cara membuatnya, seperti untuk penambahan snippet, tanggal, label, dll yang biasanya di artikel-artikel lain hanya menampilkan gambar dan judul. Bagaimana saya sendiri membuat Related Posts, bisa dilihat sendiri di bawah halaman. Lengkap dengan yang tidak hanya thumbnail dan judul. Namun, tetap itu bergantung pada selera masing-masing. Oleh karena itu, di artikel ini dijelaskan bagaimana membuat related posts dengan 2 Pilihan Style serta lebih configurable karena mengerti cara membuatnya sendiri.

Tetapi ada Pros and Cons dari cara pembuatan post terkait ini. Pros nya yaitu lebih configurable, simple, dan mudah dimengerti untuk dirombak kembali. Terlebih jika tidak hanya sekedar copy-paste. Cons dijelaskan pada Tahap 1

Tahap 1

Pastinya, harus paham dulu tentang pemahaman penggunaan Blogger JSON Feed API, boleh cari referensi di luar blog ini, atau di blog ini sendiri. (Klik di sini). Postingan terkait diambil dari postingan yang berlabel sama dengan acuan postnya. Jika acuan postnya berlabel Label_A, maka postingan terkait diambil dari Label_A. Jika acuan postnya berlabel lebih dari 1, misalnya Label_A dan Label_B, maka postingan terkait diambil dari Label_A dan Label_B, dan seterusnya.

Perlu diketahui, kalau related posts yang akan berjalan nantinya, yaitu mengambil feed post yang berlabel sama. Disinilah Cons nya, jika menggunakan max-results=2 pada URI external source script untuk mengambil feed nantinya pada postingan related, dan jika ada label lebih dari 1, misalnya Label_A dan Label_B, maka hasil akhir akan memunculkan 4 atau kurang dari 4 postingan related hasil akhir dikurangi dari postingan yang sama setiap Label_A dan Label_B serta dikurangi dari postingan yang sama pada acuan related posts setiap Label_A dan Label_B. Saat di set untuk menampilkan total 4 postingan related, terkadang yang ditampilkan kurang dari 4 postingan, karena postingan yang tidak mencukupi untuk ditampilkan setelah dikurangi beberapa post yang tidak seharusnya tampil dan postingan yang sama atau ganda.

Pada saat di-set dengan total 4 postingan yang muncul. Related Posts yang muncul benar-benar bertotal 4 postingan jika, banyak data atau postingan yang mencukupi untuk ditampilkan. Dijelaskan pada Tahap 2 untuk mengatasi hal tersebut.

Tahap 2

Setelah paham bagaimana related posts bekerja di blogger, selanjutnya, cari lah

<b:includable id='post' var='post'>

dan geserlah kebawah perlahan sampai bertemu dengan tag penutup seperti dibawah ini untuk penutup markah di atas

</b:includable>

Buatlah script ini untuk mengambil feed post dengan external script berdasarkan label di atas tag penutup sebelumnya

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='relatedpost widget'><h2>Related Posts</h2>
<div class='relateditem-cont'>
<script type='text/javascript'>
var currenttitle=&quot;<data:post.title/>&quot;; //mengambil data judul post acuan untuk pengecekan agar tidak memunculkan post acuan kembali sebagai post terkait
</script>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'><b:if cond='data:label.isLast != &quot;true&quot;'/>
<script expr:src='&quot;/feeds/posts/summary/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=relatedpost&amp;max-results=8&quot;' type='text/javascript'/></b:loop></b:if>
//LETAKKAN Script tahap "Penyelesaian" di sini
</b:if>

max-results=8
Saya mengambil 8 data post setiap label dari post acuan. Sengaja diambil lebih, untuk menutupi kekurangan disebabkan pengurangan jumlah related posts.(Sudah dijelaskan sebelumnya pada tahap 1). Pada penyelesaian, saya mengambil total 4 post terkait.

Script di atas belum selesai, ada tambahan untuk tahap penyelesaian. Lanjut ke tahap 3

Tahap 3

Tahap ini, membuat sebuah function untuk di panggil external source script yang tulis pada Tahap 2 sebelumnya, sesuai dengan nama callback yang dibuat pada Tahap 2.

<script type='text/javascript'>//<![CDATA[
var relatedposttitle=new Array();var relatedposturl=new Array();var relatedpostsummary=new Array();var relatedpostcommentnum=new Array();var relatedposttag=new Array();var relatedpostimg=new Array();var relatedpostdate=new Array();
function relatedpost(json){
for(var i=0;i<json.feed.entry.length;i++){var entry = json.feed.entry[i];
  for(var j=0;j<entry.link.length;j++){
    if(entry.link[j].rel == 'alternate'){
      relatedposturl.push(entry.link[j].href); //masukkan (link url post ke-i) ke global array relatedposturl
      break;
    }
  }
var posttag=[];
  for(var k=0;k<entry.category.length;k++){
   posttag.push(entry.category[k].term); //masukkan (kategori/label ke-k dari post ke-i) ke array posttag
  }
relatedposttag.push(posttag);//masukkan array posttag ke global array relatedposttag
var postsnippet = entry.summary.$t;
relatedpostsummary.push(postsnippet.substr(0,133));//mendapatkan snippet, 133 memotong snippet hingga tersisa 133 karakter untuk ditampilkan, dan dimasukkan ke global array relatedpostsummary
relatedpostcommentnum.push(entry.thr$total.$t);//mendapatkan jumlah comment dari post ke-i, dan dimasukkan ke global array relatedpostcommentnum
var img;//mendapatkan gambar sebagai thumbnail
if(entry.media$thumbnail===undefined){//cek jika gambar kosong, maka pakai gambar dengan url gambar dibawah
  img = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi64eW57-iHwncpUp1sWoHjamDtHGqYY9B9zYTigbQC0pLvh4cLtxvDCoK-d-ij0dYHfPu-hGb-st3_42iYQ1swyvgKdy31VWUrwQ147Q22tuLnGVk7Pec0J7MqKuBYHOCtpdsVIY4Jvp4k/s1600/no-thumbnail.png';
}
else{img=entry.media$thumbnail.url}//jika gambar tidak kosong, ambil gambar seharusnya sebagai thumbnail
relatedpostimg.push(img.replace(/s72-c/g, 'w500').replace('default.jpg', 'sddefault.jpg'));//mengambil variabel img sebagai sumber thumbnail, serta mendapatkan gambar yang lebih besar dengan mengganti URL parameter Blogger Image
//memasukkan (gambar sebagai thumbnail post ke-i) ke global array relatedpostimg
var relateddate = entry.published.$t;var year = relateddate.substring(0,4);var nmonth = relateddate.substring(5,7);var date = relateddate.substring(8,10);
if(nmonth=="01"){var month = 'Jan'}else if(nmonth=="02"){var month='Feb'}else if(nmonth=="03"){var month='Mar'}else if(nmonth=="04"){var month='Apr'}else if(nmonth=="05"){var month='May'}else if(nmonth=="06"){var month='Jun'}else if(nmonth=="07"){var month='Jul'}else if(nmonth=="08"){var month='Aug'}else if(nmonth=="09"){var month='Sep'}else if(nmonth=="10"){var month='Oct'}else if(nmonth=="11"){var month='Nov'}else if(nmonth=="12"){var month='Dec'}
var relateddatewrite=""+month+" "+date+", "+year+"";
relatedpostdate.push(relateddatewrite);
}
}
//]]>
</script>

Penyelesaian

Sebelum dilanjutkan, pilihlah salah satu dari 2 styles di bawah ini. Setelah memilih salah satu style. CSS diletakkan di atas tag penutup head, yaitu </head> tentunya. Lalu terakhir, script kedua disisipkan pada script yang ditulis pada tahap 2.

Basic-Style

<b:if cond='data:blog.pageType == &quot;item&quot;'><style type='text/css'>
/*relatedpost Basic-Style*/
.relatedpost{background:#fff;width:100%;float:left;display:flex;flex-wrap:wrap;overflow:hidden}
.relatedpost.widget{margin:15px 0 0}.relatedpost .relateditem-cont{width:100%;float:left}
.relatedpost .relateditem{flex-basis:50%;width:50%;float:left;padding:10px;line-height:1.4}
.relatedpost .relateditem .cvrimg{width:100%;height:175px;background-size:cover;background-position:center}
.relatedpost .relateditem .title{width:100%;float:left;margin:10px 0;font:600 15px Open Sans}
.relatedpost.widget h2{padding-top:6px;font:400 16px Roboto;letter-spacing:-0.3px;color:#000;background:#fff;text-align:center;}
</style></b:if>

<script type='text/javascript'>//<![CDATA[
for(var x=0;x<relatedposttitle.length;x++){
if(relatedposttitle[x] == relatedposttitle[x]){Array.from(new Set(relatedposttitle));Array.from(new Set(relatedposturl));Array.from(new Set(relatedposttag));Array.from(new Set(relatedpostsummary));Array.from(new Set(relatedpostimg));Array.from(new Set(relatedpostcommentnum));Array.from(new Set(relatedpostdate))}
}
for(var xx=0;xx<4;xx++){
if(relatedposttitle[xx] == currenttitle){relatedposttitle.splice(xx,1);relatedposturl.splice(xx,1);relatedposttag.splice(xx,1);relatedpostimg.splice(xx,1);relatedpostdate.splice(xx,1);relatedpostsummary.splice(xx,1);relatedpostcommentnum.splice(xx,1)}
if(relatedpostimg[xx]===undefined){document.getElementsByClassName('blog-posts')[0].removeChild(document.getElementsByClassName('relatedpost')[0])}
else{
document.write('<div class="relateditem"><a href="'+relatedposturl[xx]+'"><div class="cvrimg" style="background-image:url('+relatedpostimg[xx]+')"></div></a><a href="'+relatedposturl[xx]+'"><div class="title">'+relatedposttitle[xx]+'</div></a></div>');
}
}
//]]>
</script>

Advanced-Style

<b:if cond='data:blog.pageType == &quot;item&quot;'><style type='text/css'>
/*relatedpost*/
.relatedpost{font:14px Arial;background:#fff;width:100%;float:left;display:flex;flex-wrap:wrap;overflow:hidden}
.relatedpost a{color:#000}
.relatedpost.widget{margin:15px 0 0}.relatedpost .relateditem-cont{width:100%;float:left}
.relatedpost .relateditem{flex-basis:50%;width:50%;float:left;padding:10px;line-height:1.4}
.relatedpost .relateditem .cvrimg{position:relative;width:100%;height:175px;background-size:cover;background-position:center}
.relatedpost .relateditem .cvrimg .tt{width:100%;height:100%;position:absolute;top:0;left:0}
.relatedpost .relateditem .cvrimg .tt .commentnum{background:rgba(0,0,0,0.35);padding:2px 3px;color:#fff;position:absolute;top:10px;right:10px}
.relatedpost .relateditem .cvrimg .tt .date{background:rgba(0,0,0,0.35);padding:2px 3px;color:#fff;position:absolute;bottom:10px;left:10px}
.relatedpost .relateditem .title{width:100%;float:left;margin:10px 0;font:600 15px Open Sans}
.relatedpost.widget h2{padding-top:6px;font:400 16px Roboto;letter-spacing:-0.3px;color:#000;background:#fff;text-align:center;}
</style></b:if>

<script type='text/javascript'>//<![CDATA[
for(var x=0;x<relatedposttitle.length;x++){
if(relatedposttitle[x] == relatedposttitle[x]){Array.from(new Set(relatedposttitle));Array.from(new Set(relatedposturl));Array.from(new Set(relatedposttag));Array.from(new Set(relatedpostsummary));Array.from(new Set(relatedpostimg));Array.from(new Set(relatedpostcommentnum));Array.from(new Set(relatedpostdate))}
}
var showtotal=4;
for(var xx=0;xx<showtotal;xx++){
if(relatedposttitle[xx] == currenttitle){relatedposttitle.splice(xx,1);relatedposturl.splice(xx,1);relatedposttag.splice(xx,1);relatedpostimg.splice(xx,1);relatedpostdate.splice(xx,1);relatedpostsummary.splice(xx,1);relatedpostcommentnum.splice(xx,1)}
if(relatedpostimg[xx]===undefined){document.getElementsByClassName('blog-posts')[0].removeChild(document.getElementsByClassName('relatedpost')[0])}
else{
document.write('<div class="relateditem"><a href="'+relatedposturl[xx]+'"><div class="cvrimg" style="background-image:url('+relatedpostimg[xx]+')"><div class="tt"><div class="date">'+relatedpostdate[xx]+'</div><div class="commentnum"><i class="fa fa-comments" aria-hidden="true"></i> '+relatedpostcommentnum[xx]+'</div></div></div></a><a href="'+relatedposturl[xx]+'"><div class="title">'+relatedposttitle[xx]+'</div>'+relatedpostsummary[xx]+'...</a></div>');
}
}
//]]>
</script>

var showtotal=4
Angka 4 menunjukkan berapa post terkait yang dimunculkan.

Berdasarkan tahap 2 sebelumnya,
max-results=8
max-results pada tahap 2, untuk antisipasi kekurangan post terkait untuk ditampilkan setelah pengurangan-pengurangan post terkait yang dijelaskan sebelumnya. Isilah angka max-results lebih besar dari showtotal