Cara Membuat Related Post (Artikel Terkait) di Dalam Postingan Blog

Membuat Related Post (Artikel Terkait) di Dalam Postingan Blog. Cara Membuat Related Post/Artikel Terkait di Dalam Postingan. cara membuat widget related post atau artikel terkait di dalam/tengah postingan secara otomatis. Cara membuat widget artikel terkait di tengah atau di dalam postingan. cara memasang iklan dan related post ditengah postingan. cara membuat related post di dalam postingan
Cara Membuat Widget Artikel di Tengah Postingan Blog muncul secara otomatis
AdityTekno.com - Cara Membuat Related Post (Artikel Terkait) di Dalam Postingan Blog. Sebenarnya dipostingan sebelumnya saya juga sudah membahas tentang cara memasang iklan dan related post ditengah postingan. Namun, untuk kali ini saya cuma membahas related postnya saja tanpa ada iklannya.

Widget related post ini memungkinkan pengunjung untuk menjelajahi artikel lain di blog tertentu. Dengan demikian, page views di blog pun akan bertambah. 

Widget related post di tengah postingan ini juga fungsinya sama dengan related post yang biasanya berada di bawah postingan, yaitu diambil dari label tertentu yang telah ditentukan pada artikel-artikel tertentu. 

Berikut adalah tutorial cara membuat widget artikel terkait di tengah atau di dalam postingan.

Cara Membuat Related Post (Artikel Terkait) di Dalam Postingan Blog

Untuk mencegah terjadinya error dalam penerapan ini, alangkah baiknya sebelum melakukan cara ini pastikan anda membackup HTML template terlebih dahulu.
  1. Buka Blogger.
  2. Klik menu Tema >> Edit HTML.
  3. Copy dan Paste kode di bawah ini tepat di atas kode </head>.
  4. <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <script type="text/javascript">
    //<![CDATA[
    var relatedTitles = new Array(); var relatedTitlesNum = 0; var relatedUrls = new Array(); function related_results_labels(json) { for (var i = 0; i < json.feed.entry.length; i++) { var entry = json.feed.entry[i]; relatedTitles[relatedTitlesNum] = entry.title.$t; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') {relatedUrls[relatedTitlesNum] = entry.link[k].href; relatedTitlesNum++; break;}}}} function removeRelatedDuplicates() { var tmp = new Array(0); var tmp2 = new Array(0); for(var i = 0; i < relatedUrls.length; i++) { if(!contains(tmp, relatedUrls[i])) { tmp.length += 1; tmp[tmp.length - 1] = relatedUrls[i]; tmp2.length += 1; tmp2[tmp2.length - 1] = relatedTitles[i];}} relatedTitles = tmp2; relatedUrls = tmp;} function contains(a, e) { for(var j = 0; j < a.length; j++) if (a[j]==e) return true; return false;} function printRelatedLabels() { var r = Math.floor((relatedTitles.length - 1) * Math.random()); var i = 0; document.write('<ul>'); while (i < relatedTitles.length && i < 20) { document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>'); if (r < relatedTitles.length - 1) { r++; } else { r = 0;} i++;} document.write('</ul>');}
    //]]>
    </script>
    </b:if>
  5. Selanjutnya cari kode <data:post.body/> (yang kedua), atau cari kode <div class='artbody' itemprop='articleBody description'><data:post.body/></div>.
  6. Hapus kode tersebut dan ganti dengan kode berikut ini :
    <div expr:id='&quot;post1&quot; + data:post.id'/>
    <div class='post-terkait'>
    <b:if cond='data:post.labels'>
    <b:loop values='data:post.labels' var='label'>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=3&quot;' type='text/javascript'/>
    </b:if>
    </b:loop>
    </b:if>
    <h4>Baca Juga</h4>
    <script type='text/javascript'>
    removeRelatedDuplicates();
    printRelatedLabels();
    </script>
    </div>
    <div expr:id='&quot;post2&quot; + data:post.id' class='artbody' itemprop='articleBody description'><data:post.body/></div>
    <script type='text/javascript'>
    var obj0=document.getElementById(&quot;post1<data:post.id/>&quot;);
    var obj1=document.getElementById(&quot;post2<data:post.id/>&quot;);
    var s=obj1.innerHTML;
    var t=s.substr(0,s.length/3);
    var r=t.lastIndexOf(&quot;&lt;br&gt;&quot;);
    if(r&gt;0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+4);}
    </script>
  7. Untuk memperindah tampilan widget Related Post tersebut, silahkan copy dan paste kode CSS berikut ini di atas kode </style> atau ]]></b:skin>
  8. /* Related Post di dalam Postingan */
    .post-terkait {position:relative;background:#fff;padding:0;margin:10px 15px 0 0;float:left;width:165px;border:1px solid #1b71bc}
    .post-terkait h4{background:#1b71bc !important;padding:5px 0 !important;margin:0;text-align:center !important;font-size:15px !important;font-weight:400;text-transform:uppercase;color:#fff !important}
    .post-terkait ul {margin:0;padding:0}
    .post-terkait ul li {list-style:none !important;padding:7px 0;margin:0 7px;border-bottom:2px dotted #ddd;line-height:1.4em !important;text-align:left !important}
    .post-terkait ul li:last-child{border:none !important}
    .post-terkait a {color:#1b71bc;font-size:13px !important}
    .post-terkait a:hover {text-decoration:underline}
  9. Simpan Tema.
Baca Juga :