Tutorial Memasang "Artikel Terkait" di bawah Posting blog dengan Scroll

Tutorial Memasang "Artikel Terkait" di bawah Posting blog dengan Scroll - Kali ini kita akan bahas tentang Memasang "Artikel Terkait" dibawah posting blog dengan Scroll, kami akan menjelaskan cara memasangnya, 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. Agar tidak penasaran kita langsung ke TKP.

Tutorial Memasang "Artikel Terkait" di bawah Posting blog dengan Scroll:

1. Login dulu ke Blog anda >> Blogger
2. Pada Dasbor, pilih Menu >> Template >> Edit HTML
3. Cari kode ]]></b:skin> (Gunakan CTRL+F untuk mempermudah pencarian)
4. 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)}

    5. Masih dalam Edit HTML, cari kode <data:post.body/> (Gunakan CTRL+F untuk                       mempercepat pencarian)

    6. Masukkan semua kode berikut tepat dibawah kode <data:post.body/>

    

<b:if cond='data:blog.pageType == &quot;item&quot;'> <H
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>

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

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

   Keterangan: 

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

Demikian tutornya seputar dengan Tutorial Memasang "Artikel Terkait" di bawah Posting blog dengan Scroll  Mudah tidak ? Pasti mudah dong. Semoga bermanfaat bagi anda pembaca terkait dengan posting ini.

              <<<<<<<<---Selamat Mencoba ya! Jangan Lupa Like Fanpage--->>>>>>>>