Membuat Artikel Berhubungan Blog

Membuat Artikel Berhubungan pada blog kita sangat bagus bagi pengunjung blog untuk membaca, karena kita telah menyediakan link artikel yang terkait selain itu juga blog kita akan kelihatan sempurna..

Langkah-langkah membuat artikel berhubungan sbb:

1. Login ke blogger.com.
2. Pilih Layout/Tata Letak ---> Edit HTML.
3. Silahkan backup dulu, Beri centang pada kotak 'Expand Template Widget'.
4. Cari kode <data:post.body/>.
5. Kemudian copy script di bawah ini dan letakkan di bawah kode tadi.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<br/>
<br/>
<H2>Artikel Terkait:</H2>
<div class='kotak'>
<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 = 10;
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>

Apabila kita ingin merubah tampilan Artikel Berhubungan Di Blog, dari contoh diatas kita tambahkan script cssnya.

.kotak{border: 1px solid rgb(192, 192, 192); padding: 5px; background-color: #f0f0f0;-moz-border-radius:5px;margin:5px;}
.kotak .hover{ background-color: rgb(255, 255, 255); }

Langkah-langkahnya adalah sebagai berikut:

1. Login ke blogger.com
2. Pilih Layout/Tata Letak ---> Edit HTML
3. Silahkan backup dulu, Beri centang pada kotak 'Expand Template Widget'.
4. Cari kode ini, ]]></b:skin>
5. Kemudian copy script di atas dan letakkan di atas kode tadi.

Demikian tutorial Membuat Artikel Berhubungan Blog smoga bermanfaat.

~God Luck~