Pasang widget artikel terkait di blogger

Pasang widget artikel terkait di blogger begitulah judul pada artikel kali ini karena selain dari widget recent post dll widget artikel terkait juga sangat perlu untuk blog karena dengan adanya widget artikel terkait bisa merangsang rasa penasaran pengunjung blog untuk melihat artikel yang lainnya.biasanya artikel terkait ini di letakkan di bawah postingan walaupun ada juga yang meletakkannya di sidebar.untuk memasang widget artikel terkait sobat bisa ikuti langkah-langkah di bawah ini.

1. widget artikel terkait di bawah postingan blog

Caranya cukup mudah untuk memasang widget artikel terkait di bawah postingan.
login blog >> rancangan/design >> edit html >> Expand template widget.bila perlu download template lengkap terlebih dahulu untuk menjaga terjadinya kesalahan.kemudian cari kode <data:post.body/>.untuk mempermudah pencarian sobat bisa menggunakan tombol F3 di keyboard dan meletakkan kata kuncinya.setelah ketemu copy dan pastekan kode di bawah ini setelah kode <data:post.body/>,apabila sobat menggunakan fasilitas read more otomatis maka letakkan kode <data:post.body/> yang kedua.
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='rel-posts'>
<div style='padding-top:10px;'>
<h4>baca artikel yang lain : </h4>
<b:loop values='data:post.labels' var='label'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();</script>
</div>
</div>
</b:if>
Sobat bisa ganti kata-kata yang bercetak merah dengan yang sobat inginkan.

sampai sini belum selesai karena masih ada kode uang harus sobat copas yaitu di bawah ini dan letakkan sebelum tag </head>.
<script type='text/javascript'>
//<![CDATA[
var relatedTitles=new Array();var relatedTitlesNum=0;var relatedUrls=new Array();function related_results_labels(c){for(var b=0;b<c.feed.entry.length;b++){var d=c.feed.entry[b];relatedTitles[relatedTitlesNum]=d.title.$t;for(var a=0;a<d.link.length;a++){if(d.link[a].rel=="alternate"){relatedUrls[relatedTitlesNum]=d.link[a].href;relatedTitlesNum++;break}}}}function removeRelatedDuplicates(){var b=new Array(0);var c=new Array(0);for(var a=0;a<relatedUrls.length;a++){if(!contains(b,relatedUrls[a])){b.length+=1;b[b.length-1]=relatedUrls[a];c.length+=1;c[c.length-1]=relatedTitles[a]}}relatedTitles=c;relatedUrls=b}function contains(b,d){for(var c=0;c<b.length;c++){if(b[c]==d){return true}}return false}function printRelatedLabels(){var b=Math.floor((relatedTitles.length-1)*Math.random());var a=0;document.write("<ul>");while(a<relatedTitles.length&&a<20){document.write('<li><a href="'+relatedUrls[b]+'">'+relatedTitles[b]+"</a></li>");if(b<relatedTitles.length-1){b++}else{b=0}a++}document.write("</ul>")};
//]]>
</script>
Setelah selesai jangan lupa save template dan lihat hasilnya.

2. widget artikel terkait simple di bawah postingan blog

widget yang kedua ini sama caranya yaitu letakkan kode di bawah ini setelah kode <data:post.body/> hanya saja widget ini judul kategori akan ikut tampil lain hanya widget yang nomer satu judul kategorinya tidak tampil.
<b:if cond='data:blog.pageType == "item"'>
<div class='similiar'>
<div class='widget-content'>
<h3>Related Post</h3>
<div id='data2007'/><br/><br/>
<script type='text/javascript'>
var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;
maxNumberOfPostsPerLabel = 100;
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;data2007&#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>
</div>
</b:if>
jangan lupa simpan template.

3. Widget artikel terkait di sidebar blog

Yang terakhir ini yaitu memasang artikel terkait di sidebar blog dan untuk caranya ikuti langkahnya di bawah ini.

login blog >> rancangan/design >> edit html >> Expand template widget.bila perlu download template lengkap terlebih dahulu untuk menjaga terjadinya kesalahan.kemudian cari kode </head> dan letakkan kode di bawah ini sebelum tag/kode </head>.
<script type="text/javascript">
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;
}
}
}
}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels() {
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
document.write('<ul>');
while (i < relatedTitles.length && i < 20) {
document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>
');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
}
document.write('</ul>
');
}
//]]>
</script>
kemudian lakukan pencarian kode di bawah ini yaitu tekan tombol F3 di keybord dan letakkan kata kuncinya.
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>
setelah ketemu letakkan kode yang berwarna merah setelah kode di atas dan menjadi seperti di bawah ini.
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
<b:if cond='data:blog.pageType == "item"'> <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&amp;callback=related_results_labels&amp; max-results=10"' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>
kemudian save template tetapi sampai sini belum selesai.
Untuk memanggil widget related post tampil di sedebar maka sobat perlu menambah gadget baru/elemen baru dan beri nama " Related Post " kemudian letakkan kode di bawah ini ke dalam conten.
<script type="text/javascript">
removeRelatedDuplicates();
printRelatedLabels();
</script>
setelah selesai pilih save.
untuk menampilkan hanya di single post saja maka lakukan cara di bawah ini.
login blogger >> rancangan/design >> edit HTML >> Expand template widget.lakukan pencarian widget yang sudah kita buat tadi yaitu " Related Post ".contoh yang mirip seperti ini.
<b:widget id='HTML7' locked='false' title='Related Post' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

dan tambahkan kode yang berwarna merah seperti pada contoh di atas.

cukup melelahkan...sampai disini dulu pertemuan kali ini lagi pula tangan saya sudah terlalu kriting tidak bisa untuk mengetik.semoga tiga pilihan untuk cara memasang widget artikel terkait bermanfaat bagi yang membutuhkannya.selamat mencoba apabila ada yang tidak dimengerti bisa meninggalkan pesan.wassalam..

baca artikel yang lain :

3 comments:

Bintang said...

Blogwalking Gan sekalian komen2, , , , Kalo Agan mmbuat Related Postnya pake yang nomer brapa?

Bang Ben said...

@bintang : blog ini pake yang no 1..
selamat mencoba..

sahrul said...

tq gan atas infonya...sangat berguna sekali..

salam persahabatan : http://artikel-sahrul.blogspot.com/

Post a Comment