Posting terkait atau yang sering disebut related post adalah widget yang menampilkan beberapa artikel, entah itu hanya judul atau pun lengkap dengan gambarnya.Related post dan matched content bisa dibilang sama, sebab keduanya menampilkan artikel kepada pengunjung dan juga fungsinya yang digunakan untuk menarik pengunjung agar membaca artikel yang ditampilkan.
Related post ini biasanya terdapat dibagian bawah artikel, namun, tidak menutup kemungkinan jika ada yang meletakkannya di atas artikel atau sidebar blog.
Tetapi coba bayangkan jika diletakkan di sidebar blog, pasti kayak gimana gitu, mungkin kalau diletakkan di atas artikel masih mendingan, tapi bahayanya, pengunjung belum membaca artikel tersebut sudah pindah ke artikel lainnya.
Cara Membuat Related Post di Blog
1. Buka dashboard blogger kamu.
2. Pilih menu Tema > Edit HTML.
3. Tempel kode di bawah, tepat di atas kode </style>.
/* RELATED POSTS BY BANGOPIT.ID */
.related-post{margin:30px auto 0;overflow:hidden}.related-post h4{position:relative;margin:0;display:inline-block;font-weight:700;color:#212121;text-transform:uppercase;font-size:16px;z-index:1;background:#fff;padding:0 10px}.related-post ul{padding:0!important;font-size:14px;text-align:center}4. Tempel kode di bawah, tepat di atas kode </body>.
<b:if cond='data:blog.pageType == "item"'>
<script>
//<![CDATA[
if(relatedPosts==1){
var randomRelatedIndex,showRelatedPost;!function(e,a,l){var g={widgetTitle:"<h4>Artikel Terkait:</h4>",widgetStyle:3,homePage:"http://www.dte.web.id",numPosts:8,summaryLength:0,titleLength:"auto",thumbnailWidth:255,thumbnailHeight:170,noImage:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC",containerId:"related-post",newTabLink:!1,moreText:"Baca Selengkapnya",callBack:function(){}};for(var t in relatedPostConfig)g[t]="undefined"==relatedPostConfig[t]?g[t]:relatedPostConfig[t];var r=function(e){var t=a.createElement("script");t.type="text/javascript",t.src=e,l.appendChild(t)},A=function(e){var t,a,l=e.length;if(0===l)return!1;for(;--l;)t=Math.floor(Math.random()*(l+1)),a=e[l],e[l]=e[t],e[t]=a;return e},i="object"==typeof labelArray&&0<labelArray.length?"/-/"+A(labelArray)[0]:"";randomRelatedIndex=function(e){var t,a,l=e.feed.openSearch$totalResults.$t-g.numPosts,n=(t=1,a=0<l?l:1,Math.floor(Math.random()*(a-t+1))+t);r(g.homePage.replace(/\/$/,"")+"/feeds/posts/summary"+i+"?alt=json-in-script&orderby=updated&start-index="+n+"&max-results="+g.numPosts+"&callback=showRelatedPost")},showRelatedPost=function(e){var t,a,l,n,r=document.getElementById(g.containerId),i=A(e.feed.entry),s=g.widgetStyle,o=g.widgetTitle+'<ul class="related-post-style-'+s+'">',d=g.newTabLink?' target="_blank"':"",m='<span style="display:block;clear:both;"></span>';if(r){for(var h=0;h<g.numPosts&&h!=i.length;h++){a=i[h].title.$t,l="auto"!==g.titleLength&&g.titleLength<a.length?a.substring(0,g.titleLength)+"…":a,n="media$thumbnail"in i[h]&&!1!==g.thumbnailWidth?i[h].media$thumbnail.url.replace(/.*?:\/\//g,"//").replace(/\/s[0-9]+(\-c)?/,"/w"+g.thumbnailWidth+"-h"+g.thumbnailHeight+"-c"):g.noImage,"summary"in i[h]&&0<g.summaryLength&&i[h].summary.$t.replace(/<br ?\/?>/g," ").replace(/<.*?>/g,"").replace(/[<>]/g,"").substring(0,g.summaryLength);for(var c=0,u=i[h].link.length;c<u;c++)t="alternate"==i[h].link[c].rel?i[h].link[c].href:"#";3==s&&(o+='<li class="related-post-item" tabindex="0"><a class="related-post-item-title" href="'+t+'"'+d+'><img alt="" class="related-post-item-thumbnail" src="'+n+'" width="'+g.thumbnailWidth+'" height="'+g.thumbnailHeight+'"></a><div class="related-post-item-tooltip"><a class="related-post-item-title" title="'+a+'" href="'+t+'"'+d+">"+l+"</a></div>"+m+"</li>")}r.innerHTML=o+="</ul>"+m,g.callBack()}},r(g.homePage.replace(/\/$/,"")+"/feeds/posts/summary"+i+"?alt=json-in-script&orderby=updated&max-results=0&callback=randomRelatedIndex")}(window,document,document.getElementsByTagName("head")[0]);
};
//]]>
</script>
</b:if>5. Tempel kode di bawah, tepat di bawah <data:post.body/> atau letakkan sesuai keinginan kamu.
<b:include data='post' name='relatedpost'/>6. Cari kode (lihat gambar).
Setiap template memiliki kode-kode yang berbeda-beda, jadi, selamat bereksperimen.
7. Lalu ganti dengan kode di bawah.
<b:includable id='relatedpost' var='post'>
<div class='related-post' expr:id='"related-post-" + data:post.id'/>
<script>
var labelArray = [<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>"<data:label.name/>"<b:if cond='data:label.isLast != "true"'>, </b:if></b:loop></b:if>];
var relatedPostConfig = {
homePage: "<data:blog.homepageUrl/>",
widgetTitle: "<div class='label-line-c'><h4><b:switch var='data:blog.locale'><b:case value='id'/>Artikel Terkait<b:default/>Related Post</b:switch></h4></div>",
numPosts: 8,
titleLength: "auto",
thumbnailWidth: 250,
thumbnailHeight: 170,
noImage: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjp-4V5JIjUKpBbp9bP2SVDcSPWihq9tK-cOLH1h_mNBmh4RjDO0RqBnIrXFpSrnVI_kzaGb6ixaeheYItzNB-mypq2qJ51dIeGu5Q2Jqee0zOfihyphenhyphenUx9-tH0K7_4Wh7vJy7mgDAi-10JjN/w255-c-h170/no-image.png",
containerId: "related-post-<data:post.id/>",
newTabLink: false,
moreText: "Read More",
widgetStyle: 3,
callBack: function() {}
};
</script>
</b:includable>8. Simpan tema.
Menemui kendala? silakan hubungi melalui halaman contact.
