Cara Mudah Membuat Artikel Terkait Di Bawah Postingan Dengan Scroll

Kali ini saya saya menulis artikel tentang Cara Mudah Membuat Artikel Terkait di bawah postingan dengan Scroll untuk lebih jelasnya simak baik-baik pengertianya berikut,  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 thumbnail (gambar/photo) sampai dengan artikel terkait yang hanya judulnya saja.Scroll, 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. 

Contohnya  scrensot nya

Dari pada anda terlalu lama membaca penjelasnya, langsung saja anda mencobanya, berikut langkah-langkah untuk Membuat Artikel Terkait di bawah postingan dengan Scroll :

• Silahkan sobat langsung >> Masuk/Login ke >> Blogger.com 
• Pada Dasbor, pilih Menu >> Template >> Edit HTML Cari kode ]]></b:skin> (Gunakan CTRL+F untuk mempermudah pencarian) Setelah ketemu, masukkan kode berikut 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)}

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

<b:if cond='data:blog.pageType == &quot;item&quot;'> <H2>Baca JUGA ARTIKEL DIBAWAH:</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></b:loop> </b:loop> </script> </div> <script type='text/javascript'>RelPost();</script> </div> </b:if> - See more at: http://4rie-ngr.blogspot.com/2015/01/cara-mudah-membuat-artikel-terkait-di.html

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

• Langkah terakhir klik >> Simpan dan lihat hasilnya pada setiap postingan blog akan terdapat artikel terkait dibawahnya.

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

Sekeian beberapa cara mudah membuat artikel terkait di bawah postingan dengan Scroll, Semoga dengan yang saya tulis ini bisa berguna dan bermanfaat untuk anda, selamat mencoba.

Share :