CARA MEMBUAT ARTIKEL TERKAIT ATAU RELATED POST DI BLOG

Cara Membuat Artikel Terkait Atau Related Post di Blog – Artikel terkait biasa dikenal dengan related post. Artikel terkait ini berfungsi untuk menamilkan artikel – artikel yang ada di blog kita yang sesuai dengan artikel yang sedang dibaca. Artikel terkait ini banyak macam dan jenisnya. Ada artikel terkait dengan scroll ada juga yang artikel terkait dengan thumbnail atau gambar. Bahkan ada juga yang artikel terkait sederhana yang hanya judul saja.

Cara Membuat Artikel Terkait atau Related Post Di Blog

Namun kali ini, kita akan membahas mengenai cara membuat artikel terkait atau related post di blog dengan scroll. Artikel – artikel akan menampilkan judul saja dan sederhana dengan tambahan scroll untuk menurunkan dan menaikkan artikel terkait. Biasanya ini banyak disukai orang – orang yang sederhana dan simple.

Baiklah langsung saja kita masuk kepada langkah – langkah cara membuat artikel terkait atau related post di blog dengan scroll. Berikut adalah cara – caranya.

• Pastikan kita telah terhubung dengan internet.
• Setelah itu, kita login ke blogger.com.
• Pada tampilan dashboard, kita pilih panah ke bawah dan klik Template.

  

  Cara Membuat Artikel Terkait atau Related Post Di Blog (1)

• Selanjutnya, kita klik Edit HTML.

  

  Cara Membuat Artikel Terkait Atau Related Post Di Blog (2)

• Setelah itu, kita cari kode ]]></b:skin> . Untuk memudahkan, kita bisa menggunakan CTR+F.

  

  Cara Membuat Artikel Terkait Atau Related Post Di Blog (3)

• Jika sudah ketemu dengan kode tersebut.
• Maka, copy paste kode di bawah ini tepat diatas kode ]]></b:skin>.

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

• Belum selesai, kita cari kembali kode <data:post.body/>.
• Kemudian kita copy Paste kode di bawah ini tepat di bawah kode tersebut.

<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 warna biru = judul.

Kode warna merah = tinggi kotak scroll.

Kode warna kuning = banyaknyya artikel yang akan ditampilkan.

Kode warna ungu = jumlah label atau kategori yang ditampilkan.

• Setelah itu kita klik Simpan atau Save.
• Setelah itu kita bisa lihat hasilnya di blog kita masing – masing.
• Selesai.

# Baca Juga : Cara Menampilkan Widget Recent Comment di Blog

Itulah beberapa langkah yang dapat kita lakukan Cara membuat artikel terkait atau related post di blog dengan scroll. Cukup mudah bukan? Bagi orang yang sudah terbiasa untuk mengedit HTML blog, ini sangat mudah. Jadi, kita harus terbiasa untuk mencobanya.

Sekian yang bisa kita beri informasi tentang cara membuat artikel terkait atau related post di blog dengan scroll. Mohon ma’af atas kesalahan dan terima kasih atas kunjungannya. Jangan lupa like Fanspage di paling bawah. Sekian dan Terima kasih.