Rabu, 01 Februari 2017

Cara Membuat Artikel Terkait Di Dalam Postingan Blog

Tags

Related post/artikel terkait merupakan widget untuk menunjukan postingan yang sama dengan postingan yang pembaca baca. Biasanya artikel/post yang muncul pada related post berdasarkan labeh yang sama dengan artikel yang sedang dibaca pembaca. Artikel terkait ini akan muncul ditengah-tengah artikel,tidak seperti artikel terkait lainnya yang muncul setelah/dibawah artikel.


Bukan hanya kita bisa memang iklan adsense di tengah-tengah artikel tetapi kita juga bisa memasang artikel terkait di tengah-tengah artkel juga. Tutorial ini saya dapatkan dari blog http://www.arlinadzgn.com/2017/01/memasang-artikel-terkait-di-dalam-postingan.html. Tujuan dari memasang artikel terkait ini pastinya yaitu untuk meningkatkan page view situs kita,selain itu juga membantu pengunjung/pembaca untuk menemukan artikel lain yang bermanfaat. Selain itu juga bertujuan untuk memberikan rujukan kepada pembaca untuk membaca artikel lainnya.




Artikel terkait/related post ini akan muncul secara otomats disetiap artikel yang anda buat,jadi artikel yang lama/lawas pun akan muncul related post nya dtengah. Dengan wdiget ini anda tidak perlu lagi untuk repot-repot memasang link secara manual di postingan.

Baca juga : Cara Membuat Related Post Di Dalam Artikel

Jika anda ingin memasang artikel terkait di tengah-tengah postingan,maka simak langkah-langkahnya berikut ini.

Cara Membuat Artikel Terkait Di Dalam Postingan

1. Silakan buka dasbr blog anda,lalu buka menu Template → Edit HTML

2. Salin kode dibawah ini,lalu letakkan tepat diatas kode </head> 
 
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
var relatedSimply = new Array(); var relatedSimplyNum = 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]; relatedSimply[relatedSimplyNum] = entry.title.$t; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') {relatedUrls[relatedSimplyNum] = entry.link[k].href; relatedSimplyNum++; 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] = relatedSimply[i];}} relatedSimply = 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((relatedSimply.length - 1) * Math.random()); var i = 0; document.write('<ul>'); while (i < relatedSimply.length && i < 20) { document.write('<li><a href="' + relatedUrls[r] + '">' + relatedSimply[r] + '</a></li>'); if (r < relatedSimply.length - 1) { r++; } else { r = 0;} i++;} document.write('</ul>');}
//]]>
</script>
</b:if>

3. Tambahkan CSS dibawah ini tepat sebelum kode ]]></b:skin> atau </style>

/* Related Post Style 2 */
.related-simplify{position:relative;padding:20px 12px 12px 12px;margin:32px auto 24px auto;width:93%;border:4px double rgba(0,0,0,0.2)}
.related-simplify h4{background:#fff;padding:8px 10px;position:absolute;margin:0;font-size:17px;font-weight:700;color:#000;top:-21px;left:2.5%}
.related-simplify ul{margin:0;padding:0}
.related-simplify ul li{position:relative;list-style:none;padding:9px 0;margin:auto;line-height:1.4em;transition:all .3s}
.related-simplify ul li:before{content:'\f0c8';font-family:fontawesome;position:absolute;margin:0 5px 0 2px;color:rgba(0,0,0,0.5);overflow:hidden;font-size:60%;left:10px;transition:all .3s}
.related-simplify ul li:hover:before{content:'\f0c8';font-family:fontawesome;color:#0383d9;}
.related-simplify a{color:#000;font-size:14px;margin:0 0 0 30px;}
.related-simplify a:hover{color:#0383d9;}
.related-simplify ul li:nth-child(n+4) {display:none;}
@media only screen and (max-width:768px){
.related-simplify{padding:15px 0 10px 0;width:100%;border:2px solid #e74c3c;border-left:0;border-right:0}
.related-simplify h4{color:#e74c3c;padding:8px;font-size:15px;top:-18px;left:3.5%}
.related-simplify a{font-size:14px;margin:0}.related-simplify a:hover{color:#e74c3c}
.related-simplify ul li{padding:5px 0}
.related-simplify ul li:before,.related-simplify ul li:hover:before{display:none}}

4. Lalu silakan cari kode <data:post.body/> ,lalu ganti kode <data:post.body/> dengan kode dibawah ini.
Catatan!
Ditemplate blog nanti anda akan menemukan lebih dari satu kode <data:post.body/> ,jadi silakan coba satu persatu dan lihat kecocokannya
<div expr:id='&quot;post1&quot; + data:post.id'/>
<div class='related-simplify'>
<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'><p><data:post.body/></p></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/2);
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>

Sebelumnya menyimpan template,blog anda harus terpasang Font Awesome . Jika belum silakan baca artikel berikut Cara memasang kode font awesome di Blog

5. Lalu jangan lupa simpan template dan lihat hasilnya

Itulah tutorial cara membuat related post di tengah-tengah artikel. Semoga bisa bermanfaat.

10 komentar

Info yang sangat bermanfaat gan.

mau dicoba tapi takut ada error nanti gan hehehe

Aman gan...gk ada yg error pas

infonya sangat bermanfaat, ini yang dicari banyak orang...

teruslah menjadi seorang blogger yang memberikan konten-konten bermanfaat bagi orang lain.

Thanks Banget bro cara membuat artikel di dalam postingan thanks mas


EmoticonEmoticon