Cara Pasang Artikel Terkait di Tengah Postingan



Hallo, kali ini saya mau ngasih sedikit tutorial tentang artikel terkait pasti udah tau dong apa itu artikel terkait untuk blog yang pasti judul artikel yang ditampilkan di satu konten dengan label yang sama jadi bisa dikatakan punya topik yang sama juga. Nah biasanya artikel terkait ada di akhir postingan atau pun ditambahkan secara manual di tengah postingan seperti contohnya "Baca juga" biasanya blogger kebanyakan menaruh link terkait dengan postingan dengan awalan "Baca juga". Tapi kan ribet kalau dipikir-pikir karna harus menyisipkannya secara manual tapi sebenernya bagus juga sih jadi yang ditaro link tutorial atau konten terkait atau bisa disebut konten lanjutan dari postingan yang sedang dibaca.

Baiklah untuk kali ini tutorial yang cukup mudah untuk menyisipkan artikel terkait seperti yang ada ditengah-tengah artikel-artikel diblog ini kamu bisa liat sendiri, sebenarnya tutorial ini sudah banyak bertebaran digoogle tapi yang saya berikan sekarang style related post yang ada backgroundnya seperti diblog ini, oh ya sebelumnya css-nya dapet dari www.zynationdesign.net. Oke buat kamu yang pengen masang widget ditengah postingan ini langsung saja ikutin langkah-langkahnya dibawah.

1. Buka dashboard blogger kamu lalu masuk ke Template > Edit HTML dan tambahkan kode dibawah ini tepat sebelum tag </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> 

2. Selanjutnya Kamu cari tag ]]></b:skin> atau </style> lalu kamu taruh kode dibawah sebelum kode tersebut
 /*Related Post*/
.related-simplify {
    display: inline-block;
    background: #fafafa url(https://images4.alphacoders.com/714/thumb-1920-714429.png);
    color: #fff;
    position: relative;
    padding: 0;
    margin: 20px auto;
    width: 100%;
    border: 6px double #fff;
    background-size: cover;
    background-position: center;
}
.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 {
    background: rgba(67, 68, 70, 0.64);
    margin: 0;
    padding: 20px;
    color: #fff;
}
.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: '\f005';
    font-family: fontawesome;
    position: absolute;
    margin: 0 5px 0 2px;
    color: #fff;
    overflow: hidden;
    font-size: 60%;
    left: 10px;
    transition: all .3s;
}
.related-simplify ul li:hover:before{content:'\f005';font-family:fontawesome;color:#e74c3c;}
.related-simplify a{color:#fff;font-size:14px;margin:0 0 0 30px;}
.related-simplify a:hover{color:#e74c3c;}
.related-simplify ul li:nth-child(n+4) {display:none;}
@media only screen and (max-width:768px){
.related-simplify{padding:0px 0 0px 0;width:100%;border:0px 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}}
.spoiler .spoiler_title {
  display: inline;
  float: left;
  margin: 3px 10px 0 0;
  padding: 4px 0;
  font-size: 16px;
  line-height: 1;
}
Sebelumnya pastikan blog kamu sudah dipasang font awesome ya, dan juga kamu bisa ubah url background-nya pake background yang kamu mau.

3. Selanjutnya ganti kode <data:post.body/> dengan kode dibawah ini
 <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></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> 
Kamu bakal nemuin beberapa kode <data:post.body/> jadi coba satu persatu diubahnya sampai artikel terkait muncul ditengah postingan

4. Dan yang terakhir tinggal simpan template.

Sekian untuk tutorial kali ini dengan memasang tutorial ini jadi ga perlu capek-capek naro link ditengah post dan juga semoga membantu dan bermanfaat dan jangan lupa follow blog ini supaya update terus, dan terimakasih.

credit: http://www.arlinadzgn.com/2017/01/memasang-artikel-terkait-di-dalam-postingan.html

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel