Cara Membuat Artikel Terkait (Related Post) dengan Background

Setelah sebelumnya saya posting Cara Membuat Artikel Terkait (related Post) dengan Efek Animasi
sekarang saya akan posting tentang Cara membuat Artikel Terkait (Related Post) dengan Background

Jika sobat masih penasaran, seperti apa sih tampilannya, maka saya akan memperlihatkan Gambarnya seperti berikut :

Teman teman sekarang kita akan mencoba untuk membuat sebuah related post dengan fungsi scroll, nah kegunaannya adalah menampilkan artikel terkait berdasarkan kategorinya, nah untuk membuatnya tidak sulit kok tinggal copy paste aja code code berikut ini :

Ok, bagi teman-teman yang mau membuatnya, silahkan ikuti langkah-langkah di bawah ini:

1. Login ke akun blogspot,
2. Klik Design/Rancangan >> Edit HTML >> Klik Expand Templates Widget,
3. Cari kode : <data:post.body/>  , bagi yang sudah memasang read more akan ada dua kode nah ambil kode yang  pertama, lalu copy kode berikut ini , di bawah kode : <data:post.body/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='padding: 5px; background-image: url(http://i877.photobucket.com/albums/ab333/PlebitaAl100/OTHER%20PICS/line.gif); background-repeat: repeat; background-position: center;'><span style=';font-size:130%;color:white;'>
Related Post :) </span>
</div>
<div class='rbbox'>
<div style='margin:0; padding:10px;height:220px;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>

Sedikit tambahan: silahkan ganti tulisan yang berwarna merah sesuai kehendak sahabat

4. Lalu cari kode :  ]]></b:skin>   lalu kamu copy code di bawah ini :  ( dan letakkan di atas kode :  ]]></b:skin>

.rbbox{border:1px solid black;background:#e0ffff url(http://i492.photobucket.com/albums/rr288/angger07/EmoExcited.gif) no-repeat right bottom;-moz-border-radius:5px;margin:5px;padding:5px}
.rbbox:hover{background-color:#fff}

6. Save Templates..

Nah selesai sudah tutorial nya sekarang tinggal, mengatur sesuai keinginan kamu tulisan related post nya bisa kamu ganti sesuai keinginan kamu misalnya : artikel yang berhubungan, atau apa saja selamat mencoba ya baca juga artikel sebelumnya ya...

Share this history on :

Tweet

Title : Cara Membuat Artikel Terkait (Related Post) dengan Background
URL : http://blogcunayz.blogspot.com/2011/06/cara-membuat-artikel-terkait-related_17.html
Anda boleh menyebar Luaskan atau Meng Copy-Paste Artikel ini bila dapat bermanfaat bagi teman-teman anda, Namun jangan lupa untuk meletakkan Link Cara Membuat Artikel Terkait (Related Post) dengan Background sebagai Sumbernya.