Topics :
Home » » Cara Pasang Related Post Scroll di Blog

Cara Pasang Related Post Scroll di Blog

Ungkit - Cara Membuat Related Post Scroll pada Blog khususnya di Blogspot dengan mudah. Related Post sendiri artinya adalah artikel terkait dengan setiap postingan yang ada dipostingan Blog. Selain itu Related Post model Scroll ini juga terlihat lebih dinamis untuk dipakai diterapkan di template Blog Kita.


Berikut cara membuat Related Posts dengan fungsi scroll di blog :

1. Login ke Blogger
2. Buka Rancangan => Edit HTML
3. Centang pada Expand Widget Template
4. Cari kode <p><data:post.body/></p> (gunakan Ctrl + F biar cepat pencariannya)
5. Setelah dapat, lalu copy kode di bawah ini
Letakkan di bawah kode 
<p><data:post.body/></p> 


<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>


6. Langkah selanjutnya cari kode ]]></b:skin>
7. Lalu Copy Paste kode di bawah ini
    Letakkan di atas  kode ]]></b:skin>


/*-- Related Post dengan Scroll by www.Gariscerdas.com --*/
.rbbox{border: 1px solid #D8D8D8;padding: 5px;
background-color: #E0F8E0;-moz-border-radius:5px; margin:5px;}
.rbbox:hover{background-color: #EFFBEF;}

8. Simpan Template
9. Selesai
10. Dan Lihat Hasilnya

Keterangan :
1. #E0F8E0 = menunjukkan kode warna dari bacgkround kotak Related Post (ganti menurut selera anda) 
2. #EFFBEF = menunjukkan kode warna dari bacgkround kotak related post pada saat disorot mouse (ganti dengan warna kesukaan anda)

Sumber : www.Gariscerdas.com

0 komentar :

Posting Komentar