Membuat Artikel Terkait

Setelah kemarin ngak bisa posting tips blog akhirnya sekarang aku bisa berbagi tips blog lagi buat kalian. Tips kali ini adalah cara membuat artikel terkait di bawah posting. Artikel terkait yaitu artikel atau posting 1 label atau 1 kategori. Mau tau cara membuat nya? Ok langsung saja ya ^_^v

1. Login ke blogger kamu

2. Klik tulisan Rancangan >> setelah itu klik bagian Edit HTML >> centang tulisan Expand Template Widget

3. Kemudian cari kode <data:post.body/> untuk lebih mudah mencari nya gunakan CTRL + F

4. Jika sudah ketemu dan ada 2 kode yang sama, pilih kode yang ke 2 atau yang terakhir

5. Copy kode berikut dan taruh tepat di bawah kode <data:post.body/>

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

6. Kemudian cari lagi kode ]]></b:skin> dan letakkan kode berikut ke bawah kode tadi

.rbbox{
border: 1px solid #87CEEB; 
padding: 5px; 
background-color: #f0f0f0;
-moz-border-radius:5px; margin:5px;
}
.rbbox:hover{
background-color: #ffffff; 
border: 1px solid #ff6100;
}

Ganti warna biru dengan kode warna lain nya, untuk lebih mudah di blog ini sudah ada gadget kumpulan kode warna untuk menentukan kode warna, kamu bisa memakainya kok untuk lebih mudah ^_^

7. Simpan template dan  lihat hasil nya

Share 'Membuat Artikel Terkait' On ...

Taufiq Azhari