Cara Membuat dan Memasang Widget Artikel Terkait / Related Post Tanpa Tumbnail di Blog

Beberapa waktu yang lalu saya sudah menjelaskan tentang Cara Meningkatkan Jumlah Pageview Blog dengan Mudah. Salah satu point-nya adalah hendaknya kita memasang widget related post/artikel terkait dalam blog. Dengan adanya widget posting terkait yang diletakkan diakhir postingan, memungkin visitor/pengunjung untuk membaca lebih lanjut artikel-artikel relevan yang ada di blog kita. Sehingga, hal itu akan meningkatkan jumlah pageview blog kita. Alasan selanjutnya kenapa kita harus memasang widget related post adalah tidak semua template terdapat widget ini, sehingga harus dipasang sendiri. Kebetulan template yang saya gunakan ini, Tricks Collections SEO Friendly Blogger Template, sudah terdapat widget related post, sehingga saya tidak perlu memasangnya lagi.

So, bagi anda yang belum mempunyai widget ini dalam blog anda, hendaknya dipasang karena widget ini mempunyai peran yang sangat penting bagi kemajuan tingkat lalu lintas blog anda.

Apabila anda belum mengetahui caranya, saya akan memberikan cara yang sederhana untuk memasang widget ini di blog anda. Tujuannya agar mudah dipahami oleh anda. Berikut langkah-langkahnya. Jangan lupa baca juga Tips Mendapatkan Approval dari Google AdSense.

Cara Membuat dan Memasang Widget Artikel Terkait / Related Post Tanpa Tumbnail di Blog

(i) Silahkan anda log in pada blog anda masing-masing dengan mernggunakan username dan pasword anda.

(ii) Silahkan anda masuk ke Dashbor, kemudian pilih menu Template, dan pilih Edit Template. Kemudian anda akan menjumpai kode HTML/JavaScript yang sangat banyak. Silahkan anda cari Kode <data:post.body/> yang ketiga atau yang ke empat. Untuk mencari kode <data:post.body/>, dengan cara Klik Control F, nanti akan muncul kotak pencarian dipojok kanan atas. Silahkan masukkan kode <data:post.body/> ke dalam kotak pencarian, dan Klik Enter.

(iii) Setelah kode <data:post.body/> sudah anda temukan, silahkan letakkan kode berikut ini tepat dibawah kode <data:post.body/> yang ketiga. Kemudian klik Save, dan lihat hasilnya.

<b:if cond='data:blog.pageType == &quot;item&quot;'><div style='margin-top: 10px;'><strong>Baca Juga Yang Ini Ya</strong> <div class='rbbox'> <div style='margin:0; padding:10px;height:300px;overflow:auto;border:1px solid #ccc;'> <div id='ardi33'/> <script type='text/javascript'> var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;; var maxNumberOfPostsPerLabel = 4; var maxNumberOfLabels = 10; maxNumberOfPostsPerLabel = 100; 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;ardi33&#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 class='ycdr' style='font-family: arial, sans-serif; font-size: 9px;'><a href='' target='_blank' title=''/> <a href='http://kumpulan-informasi-unik.blogspot.com/' target='_blank'/></div></div>  </div> </b:if>

Keterangan:

Kode warna merah, silahkan ganti sesuai dengan selera anda masing-masing

Kode warna hijau adalah ukuran tingginya

Kode warna biru adalah jumlah artikel dan label yang akan muncul

(iv) Apabila eror atau belum berhasil, silahkan letakkan kode tersebut dibawah kode <data:post.body/> yang kedua atau yang keempat. Apabila sudah berhasil, hasilnya akan seperti gambar dibawah ini.

Contoh Tampilan Related Post (Sumber: www.dig.do)

Demikian panduan tentang tata Cara Membuat dan Memasang Widget Artikel Terkait / Related Post Tanpa Tumbnail di Blog. Mungkin anda langsung bisa menerapkannya di blog anda masing-masing, supaya lebih jelas dan paham. Atas perhatiannya saya ucapkan terimakasih. Jangan sampai ketinggalan artikel menarik lainnya di Ririn's Blog tentang Hal-hal yang Tidak Disukai Pengunjung / Visitor Blog.

Share artikel ke: Facebook Twitter Google+ Linkedin Technorati Digg