Home > Artikel Terkait, TIPS NGEBLOG > Membuat Artikel Terkait – Related Article [posts] dengan scroll

Membuat Artikel Terkait – Related Article [posts] dengan scroll

Membuat Artikel terkait atau Related Article [post] dengan scroll maksudnya secara bahasanya buwel ya memberikan semacam widgets yang mencantumkan artikel artikel yang berhubungan yang disatukan dalam sebuah label, yang bentuknya semacam widgets ntu dengan sebuah scroll, yaitu sesuatu yang bisa ditarik keatas kebawah untuk kepraktisan.
(seperti gambar yang diperoleh dari sini)


Nah, mungkin yang udah pernah pasang related posts kek gini udah tahu, bagi yang belum pasang jadi tahu dan buwelpun mosting hanya tuk arsip cara membuat artikel terkait denga pake scroll ini. Jadi tanpa lama lama, langsung menuju ke cara membuatnya, pun diambil dari yang punya gambar artikel terkait diatas. he

seperti biasa login ke blogger.com, tata letak atau rancangan (sekarang), lalu klik edit html kemudian centang kotakkan kecil expaand widgetsnya, lha truss cari kode ini

<p><data:post.body/></p>

, kalo ketemu letakkan kode dibawah, dibawah kode tadi yang pertama

<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('ul');
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 == 'alternate') {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement('li');
var a = document.createElement('a');
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 == 'alternate') {
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('b');
h.appendChild(txt);
var div1 = document.createElement('div');
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById('albri').appendChild(div1);
}
}
}
function search10(query, label) {
var script = document.createElement('script');
script.setAttribute('src', query + 'feeds/posts/default/-/'
+ label +
'?alt=json-in-script&amp;callback=listEntries10');
script.setAttribute('type', 'text/javascript');
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>

selanjutnya cari ]]></b:skin> , dan pasang kode berikut ini diatasnya

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

Selesai dah cara membuat artikel terkait atau related article atau related posts ini, tentang misal script backgroundnya beda dengan warna blognya(script yang ini EFFBEF) anda mungkin bisa diganti ganti kode warnanya di kode warna htmlnya dini.
Salam…
Anak SMP

  1. December 15, 2010 at 4:02 pm

    blogwalking dimalam hari

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: