.
Home » » Cara membuat related post/artikel terkait menjadi scroll

Cara membuat related post/artikel terkait menjadi scroll

Written By Admin on Rabu, 30 November 2011 | 7:12 PM

Artikel terkait berguna untuk memunculkan artikel-artikel terkait atau lebih singkatnya satu label jika memunculkan suatu postingan tertentu. Ini sangat berguna bagi pembaca pada saat posting dan melihat artikel-artikel lainnya yang terkait pada artikel yang pertama tadi ia baca.

Langsung Saja ini nih caranya:
1. Biasa, Login ke akun Blogger.
2. Pilih Rancangan,

    lalu pilih menu Edit HTML.
3. Download Template Lengkap (fungsinya jika gagal bisa di kembalikan lagi ke template sebelumnya)
4. Centang Expand Template Widget
5. Cari kode seperti ini: (gunakan Perintah Pencarian Keyboard Pencet Ctrl+F, )

<data:post.body/>

Keterangan:
Jika sudah menggunakan Fitur Read More, maka akan terdapat 2 kode <data:post.body/>. Maka kita pasang script Artikel Terkait atau Related Post di bawah <data:post.body/> yang ke 2 yang lebih tepat di bawah tag </b:if> . Tekan enter saja untuk mencari kode <data:post.body/> yang ke2
6. Jika sudah ketemu menggunakan Ctrl+F , maka copy paste-kan kode yang banyak ini letakkan dibawah 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>

     Kemudian :
7. Cari kode ini : ]]></b:skin>
8. Copy kode ini dan paste diatas ]]></b:skin> :

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




Semoga berhasil ya teman.
Share this article :

4 komentar:

Anonim mengatakan... Reply Comment

makasih infonya sangat membantu sekali untuk yang belum pasang, nice share and happy blogging

Oktora mengatakan... Reply Comment

Sudah Berhasil Gan Cek di sini

karim mengatakan... Reply Comment

sip gan, udah ane coba dan berhasil...

indranesia mengatakan... Reply Comment

saya sudah pasang bang related postnya.. thanks yah bang...

Posting Komentar

Terimakasih telah membaca artikel ini, komentar Anda sangat membantu blog ini :)

Komentar Blogger Sejati

Saya adalah

Foto saya
Bekasi, Jawa Barat, Indonesia
Rizky Gunawan, Seorang yang lagi belajar menulis dan berbisnis online (Inernet Marketing) lahir di Rawa Panjang, Bekasi.
 
Support : Rizkygunawan1@gmail.com | Facebook | Twitter
Copyright © 2011. Catatan Rizgun - All Rights Reserved
Template Modify by Rizgun Blog
Proudly powered by Blogger