Cara Membuat Artikel Terkait Tampil di Sidebar Blog

4.5
Cara Membuat artikel terkait tampil di sidebar blog adalah lanjutannya saja dari postingan kemarin tentang Membuat artikel terkait atau related article[posts] dengan scroll kemarin. Sedang perbedaanya cuman letak artikel terkait itu saja, kalo yang kemarin letaknya di bawah postingan nah widget artikel terkait yang ini letaknya di samping, bisa kiri atau kanan, atau malah di atas postingan, tergantung sidebarnya ada dimana.

Sebagaimana yang tampil di blog cah cikrik ini yaitu pada widget yang tulisannya 'Mungkin Ini Yang Anda Cari'

atau secara gambar yang di paintkan awut2an adalah seperti ini



Nah, Lalu dan kemudian terus cara membuat artikel terkait atau related article atau related artikel atau related posts atau artikel yang berhubungan atau postingan terkait atau artikel yang bersempena minjem bahasanya Bang attayaya agar supaya bisa tampil disidebar adalah sbb : [;-)]

Caranya hampir mirip dengan artikel terkait dibawah postingan, yaitu :

login ke blogger.com, klik tata letak [rancangan], klik edit html, lalu centang kotakkan kecil expand widgetsnya, lalu cari kode </head>

lalu letakkan kode berikut, diletakkan diatas kode head tadi

<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>


bila sudah cari kode lagi, kode yang 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 != &quot;true&quot;'>,</b:if>
</b:loop>
</b:if>

kalo udah ketemu, dihapus dan diganti dengan kode yang 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 != &quot;true&quot;'>,</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=10&quot;' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>

Bila sudah diganti, simpan Templet, lalu menuju kepenempatan gadget, mo ditempatkan dimanakah enaknya artikel terkait itu, jadi ya langsung kecara penempatannya. Ehm make gambar langsung saja dari pemilik script dan artikel ini yaitu Mas Doyok [Artikel terkait tampil di sidebar]. Dengan menambah gadget atau widgets anda.[lihat gambar menambah widgets]







dan masukkanlah kode script berikut ke widgets yang akan anda tempatkan tadi


<script type="text/javascript">
removeRelatedDuplicates();
printRelatedLabels();
</script>

simpan atau tambahkan dan selesai.

Agak njlimet ya cara membuat artikel terkait tampil disidebar ini, namun konon kalo ada widgets ini berguna untuk meningkatkan pageviews blog kita, entah kalo untuk SEO.
Salam...


Anak SMP

Sajak Malam Pertama [SMP]

4.5
Sajak Malam Pertama [SMP]

rembulan sangat terang
kelambu idaman sebegitu rindang
wajah kemalumaluan, tegang

Sesuci, lalu berdoa
memohon Ilahi, jalankan tata krama

memanah terpanah
O, jadilah Anak Shalih Shalikhah

*sajak malam pertama [SMP]
Anak SMP | SMP

Membuat Artikel Terkait - Related Article [posts] dengan scroll

4.5
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(&#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>


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