Cara Membuat Related Post [Postingan Berhubungan]

Posting Komentar
Menurut ical sungguh banyak cara yang bisa bisa dilakukan untuk memperindah blog. Dan untuk saat ini ical akan memberikan trik bagaimana membuat artikel berhubungan atau related post untuk blog teman semua, related post menurut ical juga sangat berguna yaitu untuk menuntun pengujung membaca semua postingan yang mereka inginkan dengan mudah tanpa capek kiri kanan nyari....


Oke berikut langkahnya step by step.

  1. Anggap saja kalau kamu sudah login ke blog
  2. Pilih Blog yang ingin kamu edit, klik layout kemudian klik edit HTML
  3. Seterusnya untuk aman edit blog, kamu harus tahu caranya edit html yang benar.
  4. Cari kode
  5. </head>
  6. Paste kode di bawah ini tepat diatas kode tadi
  7. <style> #related-posts { float : left; width : 540px; margin-top:20px; margin-left : 5px; margin-bottom:20px; font : 11px Verdana; margin-bottom:10px; } #related-posts .widget { list-style-type : none; margin : 5px 0 5px 0; padding : 0; } #related-posts .widget h2, #related-posts h2 { color : #940f04; font-size : 20px; font-weight : normal; margin : 5px 7px 0; padding : 0 0 5px; } #related-posts a { color : #054474; font-size : 11px; text-decoration : none; } #related-posts a:hover { color : #054474; text-decoration : none; } #related-posts ul { border : medium none; margin : 10px; padding : 0; } #related-posts ul li { display : block; background : url("http://www.dogphilosophy.net/graphics/sample1.jpg") no-repeat 0 0; margin : 0; padding-top : 0; padding-right : 0; padding-bottom : 1px; padding-left : 16px; margin-bottom : 5px; line-height : 2em; border-bottom:1px dotted #cccccc; } </style> <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>
  8. Cari kode seperti ini
  9. <p><data:post.body/></p>
  10. Copi code di bawah ini dan letakkan tepat di bawah kode tadi
  11. <b:if cond='data:blog.pageType == "item"'> <div id="related-posts"> <h2>Related Posts on <b:loop values='data:post.labels' var='label'><data:label.name/><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> </h2> <script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels(); </script> </div></b:if> NB: Tulisan Related Post On bisa diganti sesuai keinginanmu
  12. Preview dulu, lihat hasilnya, dan kalau kesalahan tidak terjadi (biasanya muncul tulisan merah kalau terjadi kesalahan) simpan templatenya.
Mudah bukan caranya, monggo dipraktekkan.....


Related Posts

Posting Komentar

Subscribe Our Newsletter