Cara Membuat Related Post Di Dalam Postingan Blog

23:13:00
Cara Membuat Related Post Di Dalam Postingan Blog


Selamat datang agan atau aganwati kali ini saya akan berbagi tips blogging yaitu cara membuat related post di dalam postingan blog. Mungkin sudah banyak orang diantara kalian yang sudah mengenal related post, related post merupakan widget yang memuat artikel-artikel terkait dengan posting yang anda publikasikan biasanya artikel-artikel yang ditampilkan terkait dengan kesamaan label atau kategori pada artikel tersebut.



Widget related post mungkin sudah banyak yang terpasang secara default pada bawaan template yang berada di bawah postingan, namun kali ini kita akan mencoba membuat widget tersebut tampil di dalam postingan anda. Sebelumnya kita akan beri tahu manfaat tentang memasang widget related post. Manfaat kita memasang widget ini kita dapat mencoba memancing para pengunjung untuk membaca artikel lainnya yang terkait sehingga dapat meningkatkan jumlah page view kita serta membuat artikel kita lebih mudah meningkat jumlah pembacanya. Nah untuk itu saya akan berbagi cara untuk membuat related post di dalam postingan, berikut tutorialnya :


Langkah

1. Login pada blog anda masing-masing,

2. Pada menu dashboard pilih menu template, lalu pilih menu edit html,

3. Setelah itu cari kode ]]></b:skin> atau juga bisa </style> dengan cara
Ctrl
+
F
,

4. Setelah itu copy script di bawah ini lalu paste tepat di atas kode ]]></b:skin> atau </style> ,

 
/*Related Post Renaldy Ways*/
.post-reways{display:block;position:relative;background:#fff;padding:0;margin:15px auto 20px;width:100%}.post-reways h4{background:#07ACEC;padding:7px 10px;display:inline-block;font-size:12px;text-transform:uppercase;color:#fff;border-radius:3px;line-height:normal;border:0}.post-reways h4:before{display:none}.post-reways ul{margin:0;padding:0}.post-reways ul li{list-style:none;padding:1px 0;line-height:1.5em}.post-reways a{color:#07ACEC;font-size:13px}.post-reways a:hover{color:#000;text-decoration:underline} 


5. Setelah itu cari kode <data:post.body/> yang kedua atau juga bisa yang ketiga dengan cara
Ctrl
+
F
,

6. Setelah itu hapus kode <data:post.body/> yang kedua atau yang ketiga pilih salah satu, lalu ganti dengan script di bawah ini ,

 <div expr:id='&quot;post1&quot; + data:post.id'/>
<div class='post-reways'>
<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. Setelah itu cari kode </head> dengan cara
Ctrl
+
F
,

8. Setelah itu copy script di bawah ini lalu paste tepat di atas kode </head>,

 <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> 

9 Setelah itu simpan dan lihat hasilnya.



Demo 

Cara Membuat Related Post Di Dalam Postingan Blog


Nah itu saja dari saya semoga bermanfaat tentang cara membuat related post di dalam postingan blog, jangan lupa bagikan serta tinggalkan komentar anda, terima kasih.


Referensi script http://www.idblanter.com/2015/12/cara-memasang-related-post-di-dalam-postingan.html

Share this

I'm CEO & Founder in http://caritema.com & http://renaldyways.blogspot.com/


Artikel Menarik Lainnya

Artikel Selanjutnya
Next Post
Artikel Sebelumnya
Previous Post
Cara style text di komentar Disqus dan Blogger:
  • Untuk menulis huruf bold silahkan gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic silahkan gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline silahkan gunakan <u></u>.
  • Untuk menulis huruf strikethrought silahkan gunakan <strike></strike>.
  • Untuk menulis kode HTML silahkan gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silahkan parse dulu kodenya pada kotak parser di bawah ini.
  • Untuk menggunakan emoji di bawah ini cukup copy kode tersebut dan beri jarak 1 spasi untuk menampilkan emoji pada kolom komentar Blogger.
Parser Kode
FAQ
Emotikon

Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger
Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

2 Comments

Gunawan Studio 2 January 2017 at 11:19

wah mantap nih mas, biar pengunjung bisa dengan mudah cari artikel menarik yg lain diblog kita

Renaldy Ramadani 2 January 2017 at 12:37

iyaa gan, betul hehe :terbaek