Saturday, February 22, 2014

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.
Panduan Cara Membuat dan Memasang Widget Artikel Terkait
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.
Cara Membuat dan Memasang Widget Artikel Terkait / Related Post Tanpa Tumbnail di Blog
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 Blog Dicintai.com tentang Hal-hal yang Tidak Disukai Pengunjung / Visitor Blog.
Share artikel ke: Facebook Twitter Google+ Linkedin Technorati Digg

31 comments:

  1. Mba ririn cewek.
    kok pasang foto cewek sih, seharusnya tu ya pasang foto mas mas super junior. he he...

    ReplyDelete
    Replies
    1. sebagian besar blogger itu cowok, jadinya pasang foto cewek biar yang baca tambah semangat :)

      Delete
    2. Biar yang baca artikel nya pada semangat mas hehehe :D

      Delete
  2. Widget seperti ini memang sangat penting untuk blog profesional, bisa menjadi manfaat tersendiri bagi blog

    ReplyDelete
  3. Seiring waktu saya jugaselalu mempelajari mana yang penting buat kemajuan blog mbak dan ini salah satunya...makasih ya mbak

    ReplyDelete
  4. related post penting bangat ya mbak, untuk mengarahkan pembaca ..

    ReplyDelete
  5. Kalau blog saya lebih suka pake thumbnail biar lebih jelas gambaran isi postingannya dan bisa menarik, makaish mbak buat ulasannya.

    Berkunjung ya ada postingan terbaru.

    ReplyDelete
  6. benar ya bisa membuat meningkatkan pageview blog kita
    nice info mbak

    ReplyDelete
  7. selamat sinag mbak ririn . . .
    selalu membantu blogger pemula seperti saya mbak ririn ini . . .
    thanks ya mbak .

    ReplyDelete
  8. coba dipraktekan, biasanya sy bikin manual mbak, btw foto siapa mbak, ririn ta'

    ReplyDelete
  9. artikel terkait memang sangat diperlukan ya mbk dalam meningkatkan sebuah blog. terus gimana nih mbk kira2 kalau blog kita gak ada artikel terkait, artikel terbaru dan lain sebagainya apa itu gak baik sama sekali buat blog??

    ReplyDelete
    Replies
    1. sebaiknya widget tersebut dipasang mas. Tujuannya untuk memberikan referensi bacaan yang lebih banyak kepada pengunjung, sehingga bisa meningkatkan pageview blog, dan juga bisa menurunkan bounce rate :)

      Delete
    2. ow,, begitu ya. ohya tentang bounce rate saya masih kurang mengerti mbk. apa maksudnya dan kenapa ada bounce rate?? terima kasih sebelumnya..

      Delete
    3. Mas Bas Studio bisa baca artikel ini ya http://tautweb.com/apa-itu-bounce-rate-konsep-kualitas-kunjungan-web/

      Delete
  10. kodenya panjang bgt mbak,tpi gpp deh tinggal di copy aja.. kebetulan di blogku udh ada related postnya

    ReplyDelete
  11. kodenya panjang bgt mbak,tpi gpp deh tinggal di copy aja.. kebetulan di blogku udh ada related postnya

    ReplyDelete
  12. Selain buat ningkatin pv..juga jd keliat lengkap sama turunan artikel lainnya ya mbak :)

    Oh ya mbak Rin..caranya gimana ya..biar label yg keluar di related post nya cuma satu..padahal di artikelnya nanamin lebelnya..lebih dari satu
    Trims ya,mbak :)

    ReplyDelete
  13. klik widget related post tanpa gambar ini, tertarik sama screnshotnya yang cantik itu deh...sekilas mirip dengan mantan pacar yang udah jadi ibunya anak-anak....hmmmm.....:o)

    ReplyDelete
    Replies
    1. wah mas cilembu, betul tu mas mirip orang rumahnya mas, heeeheee

      Delete
  14. Hiii.script-nya serem. Tapi fotonya, seneng :)

    ReplyDelete
  15. Script buat related postnya sudah di test di blog saya dan berhasil, terima kasih atas bantuannya.

    ReplyDelete
  16. makasih banyak gan :'(
    gua capek nyari kemana2 baru ini yg completed banget .
    gua share pakai g+ ^_^

    ReplyDelete
  17. This comment has been removed by a blog administrator.

    ReplyDelete