Tutorial blogging Adalah Kumpulan panduan dan tips mengenai blogger,Google Adsense,SEO,Backlink,adwords, Khusus Bagi yang ingin mendalami ilmu internet marketing

Rabu, 01 Februari 2017

Cara Membuat Related Post Di Dalam Artikel

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.

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 1 */
.related-simplify{position:relative;padding:0;margin:15px auto;width:100%;}
.related-simplify h4{background:#3498db;padding:8px 12px;margin:0;font-size:15px;font-weight:400;color:#fff;border:1px solid #2e88c5}
.related-simplify ul{margin:0;padding:0}
.related-simplify ul li{background:#f6f6f6;position:relative;list-style:none;padding:9px;margin:auto;line-height:1.4em;border:1px solid rgba(0,0,0,0.1);border-bottom:0;transition:all .3s}
.related-simplify ul li:nth-child(odd){background:#fefefe}
.related-simplify ul li:last-child{border-bottom:1px solid rgba(0,0,0,0.1)}
.related-simplify ul li:before{content:'\f138';font-family:fontawesome;position:absolute;margin:0 9px 0 4px;color:#2ecc71;overflow:hidden;transition:all .3s}
.related-simplify ul li:hover:before{content:'\f138';font-family:fontawesome;-webkit-animation:bounceright .3s alternate ease infinite;animation:bounceright .3s alternate ease infinite}
.related-simplify a{color:#0383d9;font-size:13px;margin:0 0 0 30px;}
.related-simplify a:hover{color:#0383d9;text-decoration:underline}
.related-simplify ul li:nth-child(n+4) {display:none;}
@-webkit-keyframes bounceright{from{-webkit-transform:translateX(0)}to{-webkit-transform:translateX(3px)}}
@keyframes bounceright{from{transform:translateX(0)}to{transform:translateX(3px)}}

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.

Cara Membuat Related Post Di Dalam Artikel Rating: 4.5 Diposkan Oleh: Angga Gilang

4 komentar: