Membuat Related Post

Related post, artikel yang terkait, article by category, artikel berdasarkan label, pada intinya adalah sama yang menunjukkan hubungan antara konten atau isi kandungan dari suatu postingan degan postingan lainnya. Nah bagaimana membuat related post atau artikel yang berhubungan pada postingan yang memiliki kesamaan pembahasan. Untuk membuatnya, tentunya kita harus memberi label atau kategori yang sama terhadap postingan yang satu dengan postingan yang lain. di bawah ini merupakan contoh dari related post tersebut dengan kesamaan label yaitu tips dan trik blog.

Kalau kalian ingin membuat related post seperti tampilan gambar di atas dan menampilkannya pada setiap postingan yang kalian miliki, ikuti langkah-langkahnya di bawah ini.

Login » Tata Letak » Edit HTML

Pada bagian "Edit HTML", kalian perlu melakukan "Expand Template Widget". Kemudian carilah kode ]]></b:skin> dan letakkan kode css tepat di atas kode ]]></b:skin> tersebut.

Kode Css

.related-post {
border: 1px solid rgb(192, 192, 192);
padding: 5px;
background-color: #f0f0f0;
-moz-border-radius:5px;
margin:5px;
font-family: "Times New Roman", Serif;
font-size:13px;
}
.related-post :hover {
background-color: rgb(255, 255, 255);
font-family: "Times New Roman", Serif;
font-size:13px;
}

Langkah selanjutnya kalian harus mencari lagi kode di bawah ini.

<data:post.body/>

Jika suda kalian temukan, silahkan kalian copy (Ctrl-C) dan letakkan kode related post tepat di bawah kode <data:post.body/> tersebut.

Kode Related Post

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<h2 style='font-size:14px; text-transform:capitalize'>Artikel Terkait:</h2>
<div class='related-post'>
<div style='margin:0; padding:10px;height:200px;overflow:auto;border:1px solid #ccc;'>
<div id='2yu'/>
<script type='text/javascript'>
var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;
maxNumberOfPostsPerLabel = 100;
maxNumberOfLabels = 3;
function listEntries10(json) {
var ol = document.createElement(&#39;ol&#39;);
var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i &lt; maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;
for (var k = 0; k &lt; entry.link.length; k++) {
if (entry.link[k].rel == &#39;alternate&#39;) {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement(&#39;li&#39;);
var a = document.createElement(&#39;a&#39;);
a.href = alturl;
if(a.href!=location.href) {
var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ol.appendChild(li);
}
}
for (var l = 0; l &lt; json.feed.link.length; l++) {
if (json.feed.link[l].rel == &#39;alternate&#39;) {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);
var txt = document.createTextNode(label);
var h = document.createElement(&#39;b&#39;);
h.appendChild(txt);
var div1 = document.createElement(&#39;div&#39;);
div1.appendChild(h);
div1.appendChild(ol);
document.getElementById(&#39;2yu&#39;).appendChild(div1);
}
}
}
function search10(query, label) {
var script = document.createElement(&#39;script&#39;);
script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;
+ label +
&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
document.documentElement.firstChild.appendChild(script);
}
var labelArray = new Array();
var numLabel = 0;
<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = &quot;<data:label.name/>&quot;;
var test = 0;
for (var i = 0; i &lt; labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel &lt; maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>
</div>
</b:if>

Langkah terakhir, simpan template dan lihat blog kalian. Nah bagaimana boss, udah kelihatan blum related post atau artikel terkaitnya? kalau sudah, kalian harus berterima kasih kepada Hoctro sebagai original authornya. Sampai di sini saja penjelasan saya semoga ini bermanfaat.