Buat, Pasang, Desain "RELATED POST" + "Scrolling"

Barangkali istilah related post atau posting terkait sudah tidak asing lagi bagi teman-teman. Walaupun begitu, saya tetap menuliskan cara membuat related posts fungsi scrolling. Dengan mengaktifkan fungsi scrolling pada widget related posts maka pengunjung tidak lagi merasa terganggu dengan artikel-artikel terkait yang terlalu kepanjangan ke bawah. Apalagi widget related post ini diletakkan di bawah posting. Tertarik ingin memasang related post fungsi scrolling?

Related post fungsi srolling memangnya gimana sih? Oke, biar gampang bisa dilihat seperti gambar di bawah ini :
Di gambar tampak ada scroll yang bisa dinaik-turunkan untuk melihat posting-posting yang terkait. Oke, langsung saja ke cara pasang widget related posts dengan fungsi scrolling di bawah posting blog anda.

1. Login ke blogger dengan id anda
2. Tuju TataLetak
3. Pada tab menu, pilih Edit HTML
4. Centang kotak kecil Expand Template Widget
5. Cari kode <p><data:post.body/></p>

Letakkan kode berikut di bawah kode tadi :

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

# Jika sudah, sekarang cari kode ]]></b:skin>
# Letakkan kode berikut di atas kode tadi :

difikasi related posts oleh http://tes-symoi.blogspot.com--*/
.rbbox{border: 1px solid #D8D8D8;padding: 5px;
background-color: #E0F8E0;-moz-border-radius:5px; margin:5px;}
.rbbox:hover{background-color: #EFFBEF;}

# klik Simpan Template
# Selesai sudah

---

Read in Another Language : -= Choose =-AfrikaansAlbanianArabicBelarusianBulgarianCatalanChinese (Simplified)Chinese (Traditional)CroatianCzechDanishDutchEnglishEstonianFilipinoFinnishFrenchGalicianGermanGreekHebrewHindiHungarianIcelandicIndonesianIrishItalianJapaneseKoreanLatvianLithuanianMacedonianMalayMalteseNorwegianPersianPolishPortugueseRomanianRussianSerbianSlovakSlovenianSpanishSwahiliSwedishThaiTurkishUkrainianVietnameseWelsh by

---

Share

Related Post:

Trik n Tips Blogger

• CARA MUDAH BUAT SPOILER SEDERHANA
• Buat, Pasang, "ICONS SOCIAL BOKMARKING" ke dalam artikel
• "ALERT" pesan Penutup
• "ALERT" penyambut pengunjung
• Buat, Pasang, Desain "SEARcH ENGINE"
• Membuat widget dengan RAPI "alias enak dipandang"
• Buat, Pasang, Desain "Tab View" kayak di blog ini
• Buat, Pasang, Desain "Recent Coments" di blogger
• Pasang "EMOTION" Monyet pada Komentar
• Cara Bikin atau merubah kata Posting lama menjadi icon
• Tukeran Link dan Banner (disini tempatnya)
• Daftar, Buat, Pasang "SITEMETER" (jumlah pengunjung diblog kita)
• Cara Menyembunyikan Buku Tamu (Shoutmix) Mudah
• Buat, Pasang, Desain "READMORE"