Membuat Widget Artikel Terkait

Artikel Terkait merupakan salah satu widget untuk blog / website yang berguna untuk menampilkan artikel yang masih berkaitan dengan artikel / posting yang telah dibaca oleh pengunjung, sehingga dapat memberikan referensi kepada pengunjung tentang apa yang sedang dicari oleh pengunjung tersebut . Adapun cara memasang / membuat Artikel Terkait pada blog / website adalah sebagai berikut :

Login ke blogger
Klik template
Backup dulu template anda untuk cadangan apabila terjadi error atau kesalahan saat pengeditan, anda tinggal mengupload ulang untuk memulihkan ke seperti semula.
Klik cadangan / pulihkan lalu klik unduh template lengkap
Klik edit html, jangan lupa centang expand widget

Cari kode ]]></b:skin> kemudian Tempatkan kode berikut tepat di atas kode ]]></b:skin>


.rbbox {
border:1px solid silver;
background-color:#f0f0f0;
-moz-border-radius:5px;
margin:5px;
padding:5px;
}

.rbbox:hover {
background-color:#fff;
}



Selanjutnya masih dalam posisi edit html cari kode <data:post.body/> , apabila template anda sudah terpasang Readmore otomatis  biasanya anda menemukan kode <data:post.body/> lebih dari satu bahkan bisa sampai tiga, silahkan tempatkan script berikut  ini tepat di bawah kode <data:post.body/> yang ada Readmore-nya
.



<b:if cond='data:blog.pageType == &quot;item&quot;'>
<H2>Related Article :</H2>
<div class='rbbox'>
<div style='margin:; 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>




Setelah itu, klik pratinjau dulu untuk memeriksa apakah terjadi error, jika ada pesan error mungkin kode yang anda pastekan kurang atau bahkan kelebihan, teliti lagi sampai tidak ada pesan error.
Klik simpan template
Klik lihat blog untuk melihat perubahan atau hasilnya, untuk contoh tampilannya bisa anda lihat artikel terkait di bawah ini, sekian selamat mencoba .

Keterangan
Tulisan yang berwarna merah bisa anda ganti sesuai dengan keinginan .



0 Response to "Membuat Widget Artikel Terkait"

Posting Komentar