Cara Memasang Related Posts (Tulisan Terkait) Simple Keren di Blogger

Follow @romel_tea
Cara Memasang Widget Related Posts (Tulisan Terkait) di Blogger
Cara Memasang Widget Related Posts (Tulisan Terkait) Simple Keren di Blogger.

Related Posts, Related Articles, Posting Terkait, atau Tulisan Terkait adalah widget atau elemen yang biasa ada di bawah setiap tulisan di blog.

Fungsinya menampilkan posting lain yang se-label atau kategori sama sekaligus menawarkan konten blog lain setelah pengunjung selesai membaca satu tulisan.

Widget Related Posts ini membuat blog atau website lebih ramah mesin telusur (seo friendly) dan ramah pengguna (user friendly).

Widget Related Posts tidak ada di template bawaan blogger. Jika Anda menggunakan template default blogger dan akan menambahkan widget related post, lakukan langkah di bawah ini.

Cara Memasang Widget Related Posts (Tulisan Terkait) di Blogger

Yang berikut ini memasang jenis posting terkait simple, hanya berupa judul posting, seperti yang saya pasang di blog Romeltea Media ini. Jika ingin pasang yang lebih variatif, misalnya plus gambar, bisa dilihat di DTE.

1. Di dashboard blogger: klik "Template" > "edit HTML"

klik "Template" > "edit HTM"

2. Cari (Ctrl+F) kode ]]></b:skin>
3. Copy & Paste kode berikut ini di atas kode ]]></b:skin>

#related-posts{float:left;width:100%;margin:10px;padding:1px 0 10px}
#related-posts .widget h2,#related-posts h3{font:18px Oswald;color:#000;text-transform:none;margin:0 0 10px;padding:0;font-weight:500}
#related-posts a{color:#0973CF;font:14px Arial,Sans-serif;}
#related-posts li{background:url(http://2.bp.blogspot.com/-EcBIblBtYTQ/TqALuRS_IzI/AAAAAAAAAx0/E-vzWTTOgXs/s1600/bullet-list.gif) no-repeat 0 10px;text-indent:0;line-height:1.3em;border-bottom:1px dotted #ccc;margin:0;padding:3px 0 8px 12px}
#related-posts a:hover{color:#c00;text-decoration:none}
#related-posts .widget{margin:0;padding:0}
#related-posts ul{list-style:none;margin:0;padding:0}

3. Cari kode </head>
4. Copas kode berikut ini di atasnya:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type='text/javascript'>
var numposts = 5;
var showpostthumbnails = false;
var showpostdate = false;</script>
<script type='text/javascript'>
var relatedpoststitle=&quot;Related Posts&quot;;
</script>
<script type='text/javascript'>
//<![CDATA[
var relatedTitles=new Array();var relatedTitlesNum=0;var relatedUrls=new Array();function related_results_labels(c){for(var b=0;b<c.feed.entry.length;b++){var d=c.feed.entry[b];relatedTitles[relatedTitlesNum]=d.title.$t;for(var a=0;a<d.link.length;a++){if(d.link[a].rel=="alternate"){relatedUrls[relatedTitlesNum]=d.link[a].href;relatedTitlesNum++;break}}}}function removeRelatedDuplicates(){var b=new Array(0);var c=new Array(0);for(var a=0;a<relatedUrls.length;a++){if(!contains(b,relatedUrls[a])){b.length+=1;b[b.length-1]=relatedUrls[a];c.length+=1;c[c.length-1]=relatedTitles[a]}}relatedTitles=c;relatedUrls=b}function contains(b,d){for(var c=0;c<b.length;c++){if(b[c]==d){return true}}return false}function printRelatedLabels(a){for(var b=0;b<relatedUrls.length;b++){if(relatedUrls[b]==a){relatedUrls.splice(b,1);relatedTitles.splice(b,1)}}var c=Math.floor((relatedTitles.length-1)*Math.random());var b=0;if(relatedTitles.length>1){document.write("<h3>"+relatedpoststitle+"</h3>")}document.write("<ul>");while(b<relatedTitles.length&&b<20&&b<maxresults){document.write('<li><a href="'+relatedUrls[c]+'">'+relatedTitles[c]+"</a></li>");if(c<relatedTitles.length-1){c++}else{c=0}b++}document.write("</ul>");relatedUrls.splice(0,relatedUrls.length);relatedTitles.splice(0,relatedTitles.length)};
//]]>
</script>

Kode warna merah gak usah ditambahkan jika sudah ada di template blog Anda.

5. Cari kode <div class='post-footer'> atau <data:post.body/>
6. Copas kode berikut ini di atas kode <div class='post-footer'> atau <data:post.body/> yang kedua:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
var maxresults=5;
removeRelatedDuplicates(); printRelatedLabels(&quot;<data:post.url/>&quot;);
</script>
</div>
<div class='clear'/>
<div style='clear: both;'/>
</b:if>

7. Save Template!
Simpan. Beres.

Itu dia Cara Memasang Widget Related Posts (Tulisan Terkait) Simple di Blogger. Wasalam. (www.romelteamedia.com).*

Thanks for reading Cara Memasang Related Posts (Tulisan Terkait) Simple Keren di Blogger | Tags: | Follow @Romeltea on Twitter

Next Article
« Prev Post
Previous Article
Next Post »

Related Posts

Your Comments

7 komentar on Cara Memasang Related Posts (Tulisan Terkait) Simple Keren di Blogger

  1. Dear,
    rumit juga ya, boss.
    gak ada cara sederhana , seperti menambahkan widget di tata letak blog ?

    Salam
    Rahmad Azly

    ReplyDelete
    Replies
    1. Coba gunakan kode ini di Layout > Add a Gadget > HTML/JavaScript

      <!--SIMPLE RELATED POSTS-->
      <b:if cond='data:post.labels'>
      <data:postLabelsLabel/>
      <b:loop values='data:post.labels' var='label'>
      <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
      </b:loop>
      </b:if>
      <script type='text/javascript'>
      var numposts = 5;
      var showpostthumbnails = false;
      var showpostdate = false;</script>
      <script type='text/javascript'>
      var relatedpoststitle=&quot;Related Posts&quot;;
      </script>
      <script type='text/javascript'>
      //<![CDATA[
      var relatedTitles=new Array();var relatedTitlesNum=0;var relatedUrls=new Array();function related_results_labels(c){for(var b=0;b<c.feed.entry.length;b++){var d=c.feed.entry[b];relatedTitles[relatedTitlesNum]=d.title.$t;for(var a=0;a<d.link.length;a++){if(d.link[a].rel=="alternate"){relatedUrls[relatedTitlesNum]=d.link[a].href;relatedTitlesNum++;break}}}}function removeRelatedDuplicates(){var b=new Array(0);var c=new Array(0);for(var a=0;a<relatedUrls.length;a++){if(!contains(b,relatedUrls[a])){b.length+=1;b[b.length-1]=relatedUrls[a];c.length+=1;c[c.length-1]=relatedTitles[a]}}relatedTitles=c;relatedUrls=b}function contains(b,d){for(var c=0;c<b.length;c++){if(b[c]==d){return true}}return false}function printRelatedLabels(a){for(var b=0;b<relatedUrls.length;b++){if(relatedUrls[b]==a){relatedUrls.splice(b,1);relatedTitles.splice(b,1)}}var c=Math.floor((relatedTitles.length-1)*Math.random());var b=0;if(relatedTitles.length>1){document.write("<h3>"+relatedpoststitle+"</h3>")}document.write("<ul>");while(b<relatedTitles.length&&b<20&&b<maxresults){document.write('<li><a href="'+relatedUrls[c]+'">'+relatedTitles[c]+"</a></li>");if(c<relatedTitles.length-1){c++}else{c=0}b++}document.write("</ul>");relatedUrls.splice(0,relatedUrls.length);relatedTitles.splice(0,relatedTitles.length)};
      //]]>
      </script>
      relatedPostsWidget({
      'containerSelector':'div.post-body'
      ,'loadingText':'loading...'
      });</script>
      <!--SIMPLE RELATED POSTS-->

      Delete
  2. terima kasih. informasinya sangat membantu

    ReplyDelete
  3. kode no 2 dan 5 gak ada gan setelah dicari. ini gimana ya? pakai cara add gadjet HTML/Java Script juga ga bisa nih gan.

    ReplyDelete
  4. mas, saya mau tanya. Ada salah satu blog yg saya kelola dgn niche download dan tertaut dengan GA.
    gimana ya pengaturan agar file yang akan di download oleh pengunjung bisa terdownload otomatis jika mereka share media sosial (facebook, twitter dll) artikel tersebut? Namun jika pengunjung tdk menshare artikel tersebut, file yang ada di artikel tidak dapat terdownload.
    Ada kah widget khusus untuk itu??

    (baru-baru ini saya dapat ide dan terinspirasi dari "scribd" untuk mengoptimasi kepopularan blog kita. hanya saja bedanya klo di scribd jika ingin download lebih banyak file, maka perlu daftar/login, sedangkan ini perlu hanya perlu "share" artikel ke medsos)

    Mohon bantuannya..
    Terima kasih

    ReplyDelete
    Replies
    1. Coba ini:
      https://www.romelteamedia.com/2019/03/cara-membuat-tombol-share-to-unlock.html

      Delete

Komentar SPAM dan LINK AKTIF tidak akan muncul.