Cara Membuat Related Post Dengan Fungsi Scroll

Kali ini saya akan berbagi Cara Membuat Related Post Dengan Fungsi Scroll. Related Post bisa diartikan sebagai artikel terkait. Biasanya related post terletak dibawah postingan. Fungsi dari related post ini adalah untuk memudahkan pengunjung melihat artikel lain yang sebelumnya sobat posting. Bisa juga untuk menambah pageview blog sobat. Related Post ini juga dilengkapi fasilitas scroll jadi blog sobat akan menjadi semakin enak dipandang. Ingin mencobanya! Simak tutorialnya berikut :

Cara Membuat Related Post Dengan Fungsi Scroll

• Login ke akun blogger sobat 
• Klik Template > Edit HTML > Centang Expand Widget Template
• Karena setiap template berbeda maka cari salah satu kode berikut yang ada pada template sobat <p><data:post.body/></p> dan <data:post.body/>
• Kalau sudah ketemu letakkan kode dibawah ini sesudah kode <data:post.body/> atau <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>

• Langkah selanjutnya cari kode ]]></b:skin>
• Letakkan kode dibawah ini di atas kode ]]></b:skin>

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

• Save template

Keterangan :
 #E0F8E0 adalah kode warna background related post ganti sesuai selera sobat.
#EFFBEF adalah kode warna dari bacgkround kotak related post pada saat disorot mouse ganti sesuai selera sobat

Anda baru saja membaca artikel yang berkategori Tutorial Blog dengan judul Cara Membuat Related Post Dengan Fungsi Scroll. Anda bisa bookmark halaman ini dengan URL https://malang-cyber4rt.blogspot.com/2013/02/cara-membuat-related-post-dengan-fungsi.html. Terima kasih!

Ditulis oleh: Unknown - Saturday, February 16, 2013