TUTORIAL

Trend 2015

Minggu, Januari 9

Trik Membuat Artikel Terkait Dalam Kotak Scroll Bar

Artikel Terkait (Related Post) dalam blog menunjukkan keterkaitan antara artikel yang sedang ditampilkan dengan artikel sejenisnya(satu kategori). Membuat Artikel Terkait dapat membantu dan mempermudah pengunjung mendapatkan artikel-artikel yang sedang dicarinya.
Pembuatan artikel terkait dapat dilakukan dengan syarat semua artikel dalam blog sudah diberi label. Meskipun di Google sudah ribuan artikel membahas tentang cara membuat Artikel Terkait tetapi tidak ada salahnya jika pada kesempatan ini saya bahas tentang Trik Membuat Artikel Terkait dalam Kotak Scrol Bar.
Jika Anda berminat ikutilah langkah-langkah berikut ini;

1. Masuk dulu ke blogger dengan ID anda
2. Setelah berada di Dasbor klik Rancangan
3. Kemudian klik Edit html, jangan lupa kasih centang pada kotak Expant Template Widget

4. Pada area html cari kode <data:post.body/> untuk memudahkan pencarian klik f3 atau ctrl f,
5. Copy kode dalam kotak di bawah ini dan paste di bawah kode <data:post.body/> tepatnya di bawah kode </b:if>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<br/>
<br/>
<H2>Artikel yang Anda Cari:</H2>
<div class='rbbox'>
<div style='margin:0; padding:15px;height:150px;overflow:auto;border:5px solid #ccc;'>
<div id='albri'/>
<script type='text/javascript'>
var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;
maxNumberOfPostsPerLabel = 10;
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>

5. Jika sudah selesai jangan lupa klik Simpan Template
Selanjutnya klik Lihat blog

Silahkan mencoba semoga berhasil.




Menarik untuk Dibaca:

23 Comments:

Michaell Andre Steven said...

nice posting gan baca juga artikel saya tentang MEMBUAT ARTIKEL TERKAIT DENGAN SCROLL BAR

http://michaellandresteven96.blogspot.com/2012/02/cara-membuat-artikel-terkait-dengan.html

Immang Iman said...

thanks,,, sangat bermanfaat...

Mintarja (Bang Jack) said...

salam. mas, kok di blo ku tidak ku temukan di edit HTML nya?

Makhasin said...

@Mintarja: coba dicentang kotak kecil di pojok kanan atas area html sebelum mencari kode data.post body.

Fahrul walid said...

MANTABBB...thanks sharing nya bos...
its working..amazing...extraordinary...excelent...
wonderfull....ahahaha
Ikut gabung bos...salam kenal...
OTODIDAKERS
http://otodidakers.blogspot.com

Akbar Abustang said...

mas,
kok saya cuman muncul beberapa artikel didalam kolomnya ? gag muncul semua
mohon pencerahannya

Makhasin said...

@Akbar Abustang: sobat bisa setting angka pada bagian maxNumberOfPostsPerLabel sesuai jumlah posting yang anda ingin munculkan,tq.

Ballistick Jen said...

klo arti dari "var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;
maxNumberOfPostsPerLabel = 10;
maxNumberOfLabels = 3;" itu apa yah??? itu kode untuk pengaturan apanya?
mohon penjelasannya ya gan,,,

Makhasin said...

@Ballistic Jen: kurang lebih pengertian dari kode tsb jml (4) maks tiap label 4 judul, dan jumlah maks judul dari semua label 10,dan jmlh maks label yg dapat dimuat 3, untuk lebih jelasnya sobat bisa coba ganti angka2 tsb, tetapi sebelum disimpan preview dulu.tq

Akbar Abustang said...

@Makhasinmakasih mas..sudah beres

Bacaan Menarik said...

cara ganti warna gimana bro? mohon petunujuk

Makhasin said...

@Bacaan Menarik: coba perhatikan contoh pd kotak biru tempat kode html di atas, di bawah tulisan/kode padding... ada kode #ccc, nah ganti kode tersebut sesuai kode warna yang anda inginkan. untuk kode warna silahkan googling. trims mas brow kunjungannya

Tutorial lampung said...

artikel yg bagus tapi sayang agan lupa mengganti angka2nya( var maxNumberOfLabels = 10;
maxNumberOfPostsPerLabel = 10;
maxNumberOfLabels = 3)yar ga buat pusing bagi blog pemula, kunjungi http://tutorial-lampung.blogspot.com

Rian Spycer said...

thanks gan ...
izin pakai ya :)

http://berbagi02.blogspot.com/

a fariij said...

nice info gannn..
sukses terus yaa buat blognya..
oia,,ane masih newbie ni dalam masalah blog..
butuh backlinknya donk gann..??
thanks :)
http://fariij21.blogspot.com/

ktukuliah said...

Tutorialnya mantap...
Ini yang saya cari

bicara tentang wanita said...

Makasih mas...
Semoga tutorialnya semakin mantap

Paid to review said...

Terima kasih. Sudah berhasil...

Tentang wanita said...

Nice Info gan...
Salam kenal

miracle rumondor said...

Mantap infonya

olahraga said...

makasih brow....

skorbola said...

salam kenal ..

dinda said...

mantap kali bah..

blogger templates | Make Money Online