Just another WordPress.com site

>

Cara membuat Related Post atau Posting Terkait yang standar sudah pernah dijelaskan pada posting sebelumnya. Tetapi kali ini saya akan memberikan cara membuat Related Post dengan fungsi scroll. Dengan mengaktifkan fungsi scrolling pada widget related post 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 scroll? Tapi tunggu dulu.. Jika anda terlanjur memasang widget related post versi lama (tanpa fungsi scrolling), maka harus dihapus dulu. Untuk membuat Related Post dengan fungsi scroll sangatlah mudah :
1. Login ke blog anda
2. Masuk menu ‘Layout lalu pilih Edit HTML’
3. Centang kotak ‘Expand Widgets Template’
4. Cari kode ini <p><data:post.body/></p>
5. Letakkan script berikut ini, persis di bawah kode <p><data:post.body/></p> tadi (kalau ada 2 kode tersebut, Letakkan pada kode 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>
6. Jika sudah, sekarang cari kode ]]></b:skin>
7. Letakkan kode berikut ini di bawah kode tadi :
/*– modifikasi related posts oleh http://situslakalaka.blogspot.com–*/
.rbbox{border: 1px solid #D8D8D8;padding: 5px;
background-color: #E0F8E0;-moz-border-radius:5px; margin:5px;}
.rbbox:hover{background-color: #EFFBEF;}
6. Klik Pratinjau (jika blog bisa dibuka berarti terpasang dengan benar)
7. Simpan Template. Selesai.

“Cara ini sudah diuji coba di dapur blog admin dan terbukti 100% berhasil”

Iklan

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

Awan Tag

%d blogger menyukai ini: