Cara Membuat Artikel Terkait di dalam Postingan Blog Otomatis

Bagikan artikel ke:

Facebook Google+ Twitter

Penulis Muhamad Nurul Huda

Cara Membuat Artikel Terkait di dalam Postingan Blog Otomatis - Artikel terkati, atau related posts, adalah salah satu menu blog dimana pengunjung dapat menemukan artikel yang berkaitan atau yang berkategori atau berlabel sama dengan artikel yang sedang dibaca oleh pengunjung. Contoh saja jika artikel ini berkategori " BLOG ", maka secara otomatis artikel terkaitnya adalah artikel yang berkategori " BLOG" 

Nah, dengan adanya hal ini, akan semakin membuat pembaca menjadi semakin tertarik untuk terus membaca pada blog atau website yang kamu buat. Dan tentu saja, pengunjungmu juga akan naik juga nantinya.

Mungkin kamu pernah menjumpai beberapa artikel yang berkaitan berada tepat dibawah atau diakhir postingan. Nah, itu juga disebut artikel terkait. Jika yang itu artikel terkaitnya berada dibawah postingan, saat ini mari buat didalam postingan.

Baca dulu :

Cara Membuat Logo Keren untuk Blog atau Website 5 Cara Mendapatkan Domain Gratis untuk Blog Website Cara Mengganti Alamat Blog di Blogspot

Bagaimankah caranya ?


Cara Membuat Artikel Terkait di dalam Postingan Blog Otomatis :

1. Log in ke blogger.com jika kamu membuat blog di Blogspot atau blogger.com

2. Pilih Tema atau Template 

3. Klik " Edit HTML "

4. Cari kode </head> dengan menekan tombol CTRL+F

5. Copas kode berikut dan letakkan diatas atau sebelum tag </head>

<b:if cond='data:blog.pageType == &quot;item&quot;'> <script type='text/javascript'> //<![CDATA[ var relatedSimply = new Array(); var relatedSimplyNum = 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]; relatedSimply[relatedSimplyNum] = entry.title.$t; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') {relatedUrls[relatedSimplyNum] = entry.link[k].href; relatedSimplyNum++; 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] = relatedSimply[i];}} relatedSimply = 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((relatedSimply.length - 1) * Math.random()); var i = 0; document.write('<ul>'); while (i < relatedSimply.length && i < 20) { document.write('<li><a href="' + relatedUrls[r] + '">' + relatedSimply[r] + '</a></li>'); if (r < relatedSimply.length - 1) { r++; } else { r = 0;} i++;} document.write('</ul>');} //]]> </script> </b:if>

6. Cari kode ]]></b:skin> atau </style>  dengan menekan tombol CTRL+F

7. Copas kode berikut sebelum kode tersebut

/* Related Post Style 1 */ .related-simplify{position:relative;padding:0;margin:15px auto;width:100%;} .related-simplify h4{background:#3498db;padding:8px 12px;margin:0;font-size:15px;font-weight:400;color:#fff;border:1px solid #2e88c5} .related-simplify ul{margin:0;padding:0} .related-simplify ul li{background:#f6f6f6;position:relative;list-style:none;padding:9px;margin:auto;line-height:1.4em;border:1px solid rgba(0,0,0,0.1);border-bottom:0;transition:all .3s} .related-simplify ul li:nth-child(odd){background:#fefefe} .related-simplify ul li:last-child{border-bottom:1px solid rgba(0,0,0,0.1)} .related-simplify ul li:before{content:'\f138';font-family:fontawesome;position:absolute;margin:0 9px 0 4px;color:#2ecc71;overflow:hidden;transition:all .3s} .related-simplify ul li:hover:before{content:'\f138';font-family:fontawesome;-webkit-animation:bounceright .3s alternate ease infinite;animation:bounceright .3s alternate ease infinite} .related-simplify a{color:#0383d9;font-size:13px;margin:0 0 0 30px;} .related-simplify a:hover{color:#0383d9;text-decoration:underline} .related-simplify ul li:nth-child(n+4) {display:none;} @-webkit-keyframes bounceright{from{-webkit-transform:translateX(0)}to{-webkit-transform:translateX(3px)}} @keyframes bounceright{from{transform:translateX(0)}to{transform:translateX(3px)}}

8. Cari kode <data:post.body/> 
9. Ganti dengan kode berikut ini ( Biasanya, kode  <data:post.body/> yang harus diganti adalah kode yang kedua) 

<div expr:id='&quot;post1&quot; + data:post.id'/> <div class='related-simplify'> <b:if cond='data:post.labels'> <b:loop values='data:post.labels' var='label'> <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=3&quot;' type='text/javascript'/> </b:if> </b:loop> </b:if> <h4>Baca Juga</h4> <script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels(); </script> </div> <div expr:id='&quot;post2&quot; + data:post.id'><p><data:post.body/></p></div> <script type='text/javascript'> var obj0=document.getElementById(&quot;post1<data:post.id/>&quot;); var obj1=document.getElementById(&quot;post2<data:post.id/>&quot;); var s=obj1.innerHTML; var t=s.substr(0,s.length/2); var r=t.lastIndexOf(&quot;&lt;br&gt;&quot;); if(r&gt;0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+4);} </script>

10. Simpan

11. Selesai

Catatan : Apabila kamu menggunakan halaman statis sebagai homepage blogmu, akan lebih baik jika kamu menggantinya. Jika tidak, nanti akan muncul kalimat " Baca juga " pada halaman tersebut.

Mudah bukan ?
Sekian "  Cara Membuat Artikel Terkait di dalam Postingan Blog Otomatis "