Home » , , » Cara Membuat Artikel Terkait Di Blog Dengan Scroll

Cara Membuat Artikel Terkait Di Blog Dengan Scroll

Written By Lizna Wati Aye on Friday, 28 February 2014 | 2/28/2014 06:30:00 pm

KUCOPAS - Cara Membuat Artikel Terkait Di Blog Dengan Scroll. 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.

Kali ini saya akan share untuk sobat mengenai trik Cara Membuat Artikel Terkait Di Blog Dengan 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. Agar sobat tidak penasaran lagi tentang penampakannya seperti apa, sobat bisa melihat contohnya pada blog ini atau screenshot dibawah ini.

Cara Membuat Artikel Terkait Di Blog Dengan Fungsi Scroll

Keterangan Gambar:
  • Tanda panah <= warna pink adalah Title dari artikel terkait.
  • Tanda panah => warna biru adalah Scroll.
  • Kotak       warna merah adalah Label/Kategori.
  • Kotak       warna kuning adalah Daftar list artikel terkait berdasarkan masing-masing label/kategori.
Cara Membuat Artikel Terkait Dengan Fungsi Scroll Di Bawah Postingan Blog
  1. Silahkan sobat langsung >> Masuk/Login ke >> Blogger.com
  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>

  5. .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)}
  6. Masih dalam Edit HTML, cari kode <data:post.body/> (Gunakan CTRL+F untuk mempercepat pencarian)
  7. Masukkan semua kode berikut tepat dibawah kode <data:post.body/>

  8. <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 = 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.
  9. 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 tutorial ringan seputar dunia blogger yang mengulas tentang trik Cara Membuat Artikel Terkait Di Blog Dengan Fungsi Scroll, semoga bisa bermanfaat untuk sobat KUCOPAS semua.

Artikel Terkait:

thumbnail Title: Cara Membuat Artikel Terkait Di Blog Dengan Scroll
Posted by:Lizna Wati Aye
Published :2014-02-28T18:30:00+07:00
Rating: 5
Reviewer: 737 Reviews
Cara Membuat Artikel Terkait Di Blog Dengan Scroll
Comments
10 Comments

10 comments:

  1. thanks gan sangat bermanfaat

    handexcel.blogspot.com

    ReplyDelete
  2. Gan Tanya Boleh Gan,
    Blog Ku ko g ada kode "" dan kode gimana dong.
    Mohon Bantuannya.
    Thank gan

    ReplyDelete
    Replies
    1. Kode Skin dan data: post body nya tapi, sekarang aLHAMDULILAH dah ketemu Gan.
      Tetapi setelah ku edit seperti yang di petunjuk kok masih belum muncul ya hasilnya.
      Gimana Ning ?

      Delete
    2. Kode pada tutor ke-4 sudah dipasang lum mas.???
      Pastikan semua kode diterapkan, tanda kode titik pun juga harus dipasang.
      contoh .rbbox
      jika masih menemui kesulitan, silahkan bertanya lagi.

      Delete
    3. kode tutor ke 4 dan tutor ke 6 telah kupasang petunjuknya ning.
      Apa mungkin masih ada yang perlu langkah lain ya? terima kasih

      Delete
    4. TELAH KUISIKAN SEMUA KODE NING, APA ADA LANGKAH LAIN.

      Delete
  3. maaf gan kenapa dak bisa ya gan hasilnya, telah saya coba menurut petunjuk.
    Terima kasih, Matursuwun

    ReplyDelete
    Replies
    1. Apabila pada blog sobat menggunakan Readmore, kode ada lebih dari satu. Maka letakkan semua kode diatas dibawah kode paling terakhir.

      Delete

 
Support : Google | Yahoo | Bing
Copyright © 2011-2013. KUCOPAS - All Rights Reserved
Sitemap | About Me | Contact Us | Privacy Policy
Proudly powered by Blogger