The Basical

Browse Manual » Wiring » Tipz dan Trick Blog » Cara Membuat Artikel Terkait Related Post Di Blog

---

Cara Membuat Artikel Terkait Related Post Di Blog

Cara Membuat Artikel Terkait Related Post Di Blog - Cara Menambahkan Artikel Terkait Related Post Di Blog - Cara Membuat Artikel Terkait Di Blog - Cara Membuat Artikel Terkait Pada Blogspot - inilah akan saya sharekan buat sobat semua ya tentunya bagi templeate sobat yang tidak dilengkapi oleh Artikel Terkait atau Related Post nah mau tau caranya gimana yuk lihat dibawah sini
dan sebagai contohnya lihat gambar sbb :



Cara Membuat Artikel Terkait Related Post Di Blog :

1.Pastikan sobat login di akun blogger.
2.Kik Rancangan kemudian pilih Edit HTML,centang Expand Template Widget
3.Pencarian kita mulai dengan mencari kode <data:post.body/>  (gunakan Ctrl+F untuk mempermudah pencarian).

Bila di template telah terpasang script Readmore, maka akan terdapat dua kode <data:post.body/> Pasang script Artikel Terkait atau Related Post di bawah   <data:post.body/>  yang ke 2 ,lebih tepatnya di bawah tag </b:if>  jika sudah ketemu,copy paste-kan kode script dibawah  ini persis  dibawahnya.

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

Sebenarnya langkah diatas sudah selesai untuk sebuah Artikel Terkait yang lolos di validasi W3, tinggal save template saja.Namun jika sobat mau menambahkan efek hover pada background artikel terkait(silahkan backgroundnya sesuaikan dengan selera sobat)tambahkan kode dibawah ini, diatas kode ]]></b:skin>

 .rnbox{border: 2px solid #FFFFFF;padding: 5px;
-moz-border-radius:9px; margin:5px;}
.rnbox:hover{background : url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWBaOYG0F-7hJr3C7iHyL1QRwzwMViTEGS-yKnJkylsn32I6hprlp0Ox2-cLNajsiRGPDs81LFVuvzx_vtPxdSyYlVSn-F_Lf98IrYGRDoqj4u3fRqsV0-D6k0r5GLPfAQl7GxRoSA-rDy/s1600/NavMNrn+%2528FILEminimizer%2529.png);}

Dan terahir lakukan Pratijau dulu jika tidak terjadi apa apa lalu save dan lihat hasilnya.....selamat mencoba...................