Membuat Related Post Pada Blogger

Assalamaualaikum.
Qiqi kembali lagi nih, tentunya untuk berbagi ilmu kepada sobat blogger semua. Kali ini Qiqi akan berbagi ilmu tentang cara membuat related post (artikel terkait) yang biasanya berada pada akhir sebuah artikel. Pasti sobat blogger yang banyak yang sudah tidak asing lagi, tapi bagaimana bagi sobat bloger yang masih newbie. Tutorial ini pas banget dan patut untuk di coba. Gak perlu banyak ngomong lagi, langsung saja hajar,   untuk mengaplikasikannya pada blog milik sobat, berikut stpe-stepnya :

• masuk akun blogger sobat
• pilih Template --> Edit HTML --> klik Procced
• jangan lupa centang pada expand widget
• lalu copas code berikut di atas kode ]]></b:skin>

.rbbox{-moz-box-shadow: inset 0 0 20px  #ffb60b ;
-webkit-box-shadow: inset 0 0 20px  #ffb60b ;
box-shadow: inset 0 0 20px  #ffb60b ;
.rbbox:hover{background-color:#000000);}

• jika sudah terlaksana semua langkah di atas, selanjutnya copas kode di bawah ini tepat di bawah kode <data:post.body/>

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

• untuk finishing simpan tempalte sobat dan lihat hasilnya

NB : Jika ingin mengganti warna dari tabel related post, silahkan ganti kode yang berwarna merah ( #ffb60b ) dengan warna yang sobat sukai. Untuk melihat kode HTML warna yang sobat sukai gak perlu susah-susah nyari Qiqi sudah sediakan tinggal sobat lihat disini.

Semoga tutorial ini bermanfaat bag kita semua.

Jika ada kesalahan, kritik, saran, maupun request, silahkan sobat blogger layang lewat kotak komentar.

Sumber : http://www.japarus.com/

Artikel Terkait :

Posted in: Blogger