Cara Menambahkan Related Post Widget Blogger

Salah satu sebab yang membuat pengunjung menghabiskan waktu yang lama di suatu blog atau situs adalah adanya artikel yang saling terkait dan menarik. Oleh karena itu widget related post yang menunjukkan daftar artikel terkait sangatlah berguna. Berikut ini adalah langkah menambahkan widget related post pada template Blogger.

• Masuk log in ke account Blogger.
• Pilih blog yang akan ditambahkan widget related post tersebut.
• Kemudian pilih Template dan Edit HTML.
• Selanjutnya cari kode berikut:

<div class='post-footer-line post-footer-line-1'>

• Untuk memudahkan pencarian dapat menggunakan CTRL+F, bila terdapat lebih dari satu tulisan seperti diatas pilih yang terakhir, yakni setelah isi post artikel. Karena widget ini akan dipasang setelah atau tepat dibawah isi post.
• Bila sudah ditemukan, copy perintah berikut:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<h2>Related Post:</h2>
<div class='rbbox'>
<div style='margin:0; padding:10px;height:200px;overflow:auto;border:1px solid #ccc;'>
<div id='albri'/>
<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 ul = document.createElement(&#39;ul&#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);
ul.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(ul);
document.getElementById(&#39;albri&#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>
<script type="text/javascript">RelPost();</script>
</div>
</b:if>

• Letakkan kode tersebut (paste) tepat dibawah tulisan:

<div class='post-footer-line post-footer-line-1'>

• Bila sudah simpan template tersebut, lakukan peninjauan, bila sudah puas widget related post telah berhasil ditambahkan.

Tambahan catatan widget related post without tumbnail, artinya hanya menampilkan judul artikel terkait tanpa memperlihatkan gambar yang ada dalam artikel tersebut.

Tweet