Cara Membuat Artikel Terkait / Related post Di Blog

Artikel terkait adalah postingan blog yang terkait dengan postingan yang sedang dibaca atau dikunjungi, artikel terkait yang juga biasa dikenal dengan related post untuk bahasa luasnya didunia. Banyak sekali jenis dan modelnya dari artikel terkait untuk blog, mulai dari artikel terkait dengan gambar/photo sampai dengan artikel terkait yang hanya judulnya saja.
Artikel terkait / Related post sangat bermanfaat untuk para pengunjung blog, karena akan memudahkan pengunjung untuk membaca artikel-artikel yang masih mempunyai topik yang sama.

Kali ini saya akan share untuk anda semua mengenai Cara Membuat Artikel Terkait / Related post di Blog, dengan artian artikel terkait yang akan diterapkan pada blog ini memiliki tampilan hanya judulnya saja dengan fungsi scroll dan memperlihatkan artikel terkait dari beberapa label/kategori secara bersamaan beserta list daftar artikel masing-masing label/kategori.
Selanjutnya jika anda tertarik untuk memasang artikel terkait ikuti langkah-langkah yang saya berikan dibawah. Gambar di bawah ini adalah contoh artikel terkait yang akan saya jelaskan cara membuatnya.

Keterangan Gambar Diatas :

• Kotak warna Merah adalah Title dari artikel terkait.
• Kotak  warna Biru adalah Label/Kategori.
• Kotak  warna Hijau adalah Daftar list artikel terkait berdasarkan masing-masing label/kategori.
• Kotak  warna Pink adalah Scroll.

Cara Membuat Artikel Terkait / Related post Dengan Fungsi Scroll Di Bawah Postingan Blog

• Masuk/Login ke => Blogger.com
• Pada Dasbor, pilih Menu => Template => Edit HTML
• Cari kode “]]></b:skin>”  (Tanpa tanda petik) Gunakan CTRL+F pada keyboard untuk mempercepat pencarian
• Setelah ketemu, masukkan kode dibawah ini tepat diatas kode “]]></b:skin>”  (Tanpa tanda petik)

.rbbox{border:1px solid rgb(192,192,192);padding:5px;background-color:# 505A54;-moz-border-radius:5px;margin:5px}.rbbox:hover{background-color:rgb(255,255,255)}

• Masih dalam Edit HTML, cari kode “<data:post.body/>” (Tanpa tanda petik)  Gunakan CTRL+F pada keyboard untuk mempercepat pencarian.
• Masukkan semua kode berikut tepat dibawah kode “<data:post.body/>” (Tanpa tanda petik).

Apabila pada blog anda menggunakan Readmore, kode <data:post.body/> ada lebih dari satu. Maka letakkan semua kode diatas dibawah kode <data:post.body/> paling terakhir.

<b:if cond='data:blog.pageType == &quot;item&quot;'> <H2>Artikel Terkait:</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 = 10; 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>


Keterangan Kode Diatas:

• Artikel Terkait : Adalah title, Anda bisa menggantinya dengan title Related Post, Related Article atau juga posting terkait.
• height:200px Adalah ukuran tinggi kotak scroll, silahkan Anda ganti nilainya sesuai dengan keinginan Anda.
• maxNumberOfPostsPerLabel = 10 Adalah jumlah daftar list artikel terkait berdasarkan label/kategori yang akan ditampilkan, silahkan Anda ganti nilainya sesuai dengan keinginan Anda.
• maxNumberOfLabels = 3 Adalah jumlah label/kategori yang list daftar artikel terkaitnya akan ditampilkan.

7.    Kemudian klik => Simpan

Lihat hasilnya pada setiap postingan blog, jika sudah terdapat artikel terkait dibawahnya maka cara diatas berhasil anda terapkan.

Sekian artikel tentang cara membuat artikel terkait / Related post di blog, semoga bermanfaat

Artikel Terkait: