Cara Membuat Artikel Terkait Dengan Scroll Box

Artikel terkait | Beberapa hari yang lalu, saya telah share tutorial Cara Membuat Related Posts Di Bawah Posting Blog yang disinkronisasikan dengan RSS. Dan kali ini, saya akan share Tutorial Cara buat artikel terkait dengan scroll box, yang berfungsi agar setiap post atau artikel yang terkait atau terbit dalam kategori yang sama, dapat ditampilkan juga dalam post yang sedang dibaca pengunjung. 

Selain itu, artikel terkait dengan scroll box ini dapat menghemat tempat dan juga dapat dimasukkan berpuluh-puluh postingan tanpa batas. Jadi, dengan menggunakan artikel terkait, dapat memudahkan para pengunjung untuk melihat posting atau artikel lain yang berkaitan dengan artikel yang sedang dibaca, dalam hal ini artikel yang berkaitan sesuai dengan label atau kategori.

Screenshot

Baik... kita akan langsung praktekkan:
1. Login ke Blogspot sobat.
2. Masuk ke Template > Edit Html.
3. Centang kotak: "Expand Widget Template".
4. Klik: "Download Template Lengkap", untuk menghindari kesalahan pengeditan.
5. Tekan Ctrl f atau f3 untuk mempermudah pencarian.
6. Cari kode <data:post.body/> Jika terdapat 2 kode <data:post.body/> pilih yang kedua.
7. Copy kode di bawah ini dan paste di bawah kode <data:post.body/>

• <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 = 9999; 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>

Semoga bermanfaat...

Artikel Terkait:

Tutorial Blog

• Cara Submit Blog ke Bing Webmaster Tools
• Cara Membuat Related Posts Di Bawah Posting Blog
• Cara Buat Tombol Share Dengan Efek jQuery Nudging
• Cara Mengetahui Backlink
• Cara Cek Template SEO Friendly
• Kelebihan dan Kekurangan Blog Nofollow dan Dofollow
• Cara Membuat Komentar Facebook dan Blog Berdampingan.
• Kode Script Widget Melayang
• Mempercepat Blog di Index Google
• Cara Membuat Header Blog sendiri
• Cek Kecepatan Blog
• Cara Membuat Menu Navigasi Melayang di Sudut Blog
• Cara membuat Menu Bar pada blog
• Cara membuat Kotak komentar disqus
• Cara Membuat gambar Maintenance di Blog
• Cara menambah kolom Widget diatas Header
• Membuat kotak Komentar Facebook Pada Blog
• Bagaimana membuat read more di blog

Posted in: Tutorial Blog

Share it to your friends..!