Membuat artikel terkait dibawah postingan

Oia satu lagi nih sob tentang artikel terkait. denger-denger sih dengan memasang artikel terkait seperti gambar dibawah ini entah menggunakan gambar atau hanya teksnya saja itu sudah masuk syarat bahwa blog kita disukai oleh google, nggak cuman itu saja sobat, dengan kita memasang artikel terkait di blog kita, juga memudahkan bagi pengunjung untuk search againt dan nggak usah ribet-ribet nyari sani nyari sini untuk si pengunjung ke blog kita alias bahwa blog kita telah berhasil memanjakan sedikit atau banyak bagi si pengunjung. nih gambar untuk Artikel Terkaityang saya share kali ini

Tidak menutup kemungkinan bahwa sekian banyak para pengguna blogspot atau semacamnya ingin memanjakan para pengunjung. dengan memanjakannya para pengunjung sudah barang otomatis para pengunjung akan lebih sering bermain ke blog kita (ini fakta loh). tapi dalam rangka memanjakan pengunjung jangan terlalu berlebihan juga, karena jika kita terlalu memanjakan pengunjung dengan berbagai aneka hiasan seperti terlalu banyak gadget diblog kita, ini akan mempengaruhi berat loading blog kita. dan yang harus sobat ketahui bahwa para pengunjung/visitor lebih suka apabila blog yang ia kunjungi tidak terlalu rame oleh gadget-gadget yang tidak bermanfaat dan loading yang ringan. so, sobat pun mengerti dengan apa yang saya maksudkan.

baik, untuk mempersingkat cerita langsung saja ke tahap pembuatan Artikel Terkaitnya.

• Seperti biasa Login di akun Blogger Anda, Klik Rancangan > Template > Edit HTML > centang Expand Template Widget, Lalu cari kode  ]]></b:skin>

• Masukan Kode CSS di bawah ini tepat di atas kode ]]></b:skin>

 /* Artikel Terkait */ 
.related_posts{margin-top:5px;padding:0 10px;border:1px solid #B7E8FF;background:#EEEEEE;} 
.related_posts h4{color:#111;font:normal 19px/19px Arial, sans-serif;letter-spacing:-0.5px;padding:7px 0;border-bottom:solid 1px #fafafa;} 
.related_posts a{color:#000;} 
.related_posts ul{padding:0;} 
.related_posts ul li{list-style:none;padding:4px 5px 4px 17px;border-bottom:1px solid #f9f9f9;line-height:18px;background: #EEEEEE;}

• Kemudian cari kode <div class='post-footer-line post-footer-line-1'> jika sudah menemukan kode tersebut silahkan Copy/paste kode script dibawah ini tepat dibawah kode <div class='post-footer-line post-footer-line-1'>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='related_posts'>
<div class='widget-content'>
<h4>Artikel Terkait</h4>
<div id='data2007'/><br/><br/>
<script type='text/javascript'>
var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 10;
var maxNumberOfLabels = 2;
maxNumberOfPostsPerLabel = 10;
maxNumberOfLabels = 2;
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;data2007&#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>

• Yang berwarna merah bisa sobat ganti dengan kalimat apapun sesuka sobat
• Langkah terakhir Save dan selesai

Apabila ada pertanyaan tentang Artikel terkait ini silahkan sobat tanyakan melalui komentar dibawah ini...

Keterangan...