Cara Membuat Related Post Dengan Menggunakan Scroll

Tips Blogger. Cara Membuat Related Post Dengan Scroll. Jika anda memasang Related Post di blog anda dengan menggunakan Scroll, pastinya anda akan mendapatkan ke untungan tersendiri, Yaitu Selain anda dapat menghemat tempat, blog anda pun akan terlihat ramping.

Kali ini saya akan membahas tentang "Cara Membuat Related Post Dengan Menggunakan Scroll". Dengan menggunakan cara ini, maka anda dapat menampilkan Label yang anda inginkan, dan juga akan dibagi berdasarkan label, Contohnya seperti anda melakukan postingan dan didalam postingan tersebut terdapat 3 jenis lebel, maka hasilnya akan menampilkan maksimal 3 label  tersebut.

Jika anda tertarik, dan ingin mencobanya,, Tunggu apalagi, segera mencobanya, selain blog anda jadi lebih ramping, ini juga bisa memudahkan para pengunjung untuk melihat2 semua isi atau halaman di setiap labelnya. Cara nya anda bisa mnengikuti beberapa langkah yang sudah saya sediakan dibawah ini.

Cara Membuat Related Post Dengan Menggunakan Scroll

• Masuk ke Dasboar Blog anda
• Pilih Template -> Edit HTML
• Cari kode <div class='post-footer-line post-footer-line-1'> (gunakan Ctrl+f untuk lebih mudah pencarian)
• Apabila anda menemukan 2 kode yang sama, Gunakan kode yang pertama
• Letakkan kode dibawah ini tepat Dibawah kode <div class='post-footer-line post-footer-line-1'>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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 = 100;
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>

• Save / Simpan Template anda
• Selesai, dan lihat hasilnya

Caution.!!!Tulisan yang berwarna Merah, Bisa anda ganti dengan Judul yang anda inginkan
Tulisan yang berwarna Biru, merupakan tampilan seperti jarak, posisi dll
Tulisan yang berwarna Hijau merupakan seperti :
=> maxNumberOfPostsPerLabel = 100; adalah jumlah posting atau artikel terkait yang ingin di tampilkan
=> maxNumberOfLabels = 3; adalah jumlah label terkait yang ingin ditampilkan

Baca juga :
=> Cara Memasang Tag Cloud atau Label Berputar di Blog
=> Cara Memasang Widget Resent Comment dengan Avatar
=> Cara Membuat Dynamix Heading SEO Friendly

Sekian artikel yang saya bahas tentang "Cara Membuat Related Post Dengan Menggunakan Scroll". Semoga dengan apa yang saya tulis ini, bisa bermanfaat dan berguna untuk anda. Selamat Mencoba.!

Share :