Memasang Artikel Terkait atau Related Post di Dalam Postingan

Description: Cara Membuat dan Memasang Artikel Terkait atau Related Post di Dalam Artikel atau Postingan ~ Tutorial yang bisa saya bagikan hari ini adalah cara membuat artikel terkait di dalam postingan, artikel terkait fungsinya agar visitor atau orang yang mengunjungi blog Anda dapat melihat artikel atau postingan apa saja yang sudah Anda publish kepada mereka, dan nantipun mereka para visitor akan mengunjungi artikel yang menurut dia menarik.

Widget artikel terkait di tengah postingan ini juga fungsinya sama dengan artikel terkait yang biasanya berada di akhir dari artikel, yaitu diambil dari label tertentu yang telah ditentukan pada artikel-artikel tertentu, ada beberapa tutorial yang bisa Anda pilih untuk dipasang di blog sobat, kali ini saya menyediakan satu tutorial dan satu tutorial lagi saya yang buat, maksudnya saya edit.

Baca juga : Membuat Sitemap Valid HTTP dan HTTPS di Blog

Sebelum Anda menerapkan tutorial kali ini, ada baiknya Anda untuk back up template yang sedang Anda pakai untuk berjaga-jaga bila tutorial ini tidak cocok pada template yang Anda pakai, bila Anda ingin memakai template yang dipakai SEOCIPS, Anda bisa lihat disini.

Baca juga : Download Template Seocips Saat Ini Silakan Anda simak tutorial membuat artikel terkait di tengah post ini.

Cara Membuat Widget Artikel Terkait di Dalam Postingan

Langkah pertama :
Masuk ke Blogger > Template > Edit HTML. Masukkan kode di bawah ini di atas 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>

Langkah kedua :
Silakan Anda cari kode ]]></b:skin> dan letakkan kode dibawah ini diatas kode tadi

/* Related Post Style 1 */

.related-lostcips{position:relative;padding:20px 12px 12px 12px;margin:32px auto 24px auto;width:93%;border:2px solid #ddd;}

.related-lostcips h4{background:#fff;padding:8px 10px;position:absolute;margin:0;font-size:17px;font-weight:700;color:#000;top:-21px;left:2.5%}

.related-lostcips ul{margin:0;padding:0}

.related-lostcips ul li{position:relative;list-style:none;padding:9px 0;margin:auto;line-height:1.4em;transition:all .3s}

.related-lostcips 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-lostcips ul li:hover:before{content:'\f0c8';font-family:fontawesome;color:#0383d9;}

.related-lostcips a{color:#000;font-size:14px;margin:0 0 0 30px;}

.related-lostcips a:hover{color:#0383d9;}

.related-lostcips ul li:nth-child(n+4) {display:none;}

@media only screen and (max-width:768px){

.related-lostcips{padding:15px 0 10px 0;width:100%;border:2px solid #e74c3c;border-left:0;border-right:0}

.related-lostcips h4{color:#e74c3c;padding:8px;font-size:15px;top:-18px;left:3.5%}

.related-lostcips a{font-size:14px;margin:0}.related-simplify a:hover{color:#e74c3c}

.related-lostcips ul li{padding:5px 0}

.related-lostcips ul li:before,.related-simplify ul li:hover:before{display:none}}

Langkah ketiga :
Lalu Anda cari kode <data:post.body/> dan ganti kode tersebut dengan kode dibawah ini

- Biasanya disetiap template pasti akan ada beberapa kode sama seperti <data:post.body/>, dan cobalah satu persatu sampai artikel terkait muncul
- Biasanya saya terapkan di tengah-tengah kode iklan blog saya

<div expr:id='&quot;post1&quot; + data:post.id'/>

<div class='related-lostcips'>

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

Silakan Anda Save, dan lihat hasilnya.

Jika Anda ingin memasang artikel terkait versi saya silakan Anda terapkan kode dibawah ini diatas ]]><b:skin>

/* Related Post Ala Lostcips */

.related-lostcips{background:#fcf4ca;position:relative;padding:20px 12px 12px 12px;margin:32px auto 24px auto;width:93%;border:2px solid #ddd;}

.related-lostcips h4{padding:15px 0px;position:absolute;margin:15;font-size:17px;font-weight:700;color:#555;top:-21px;left:2.5%}

.related-lostcips ul{margin:0;padding:0}

.related-lostcips ul li{position:relative;list-style:none;padding:9px 0;margin:auto;line-height:1.4em;transition:all .3s}

.related-lostcips 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-lostcips ul li:hover:before{content:'\f0c8';font-family:fontawesome;color:#0383d9;}

.related-lostcips a{color:#000;font-size:14px;margin:0 0 0 30px;}

.related-lostcips a:hover{color:#0383d9;}

.related-lostcips ul li:nth-child(n+4) {display:none;}

@media only screen and (max-width:768px){

.related-lostcips{padding:15px 0 10px 0;width:100%;border:2px solid #e74c3c;border-left:0;border-right:0}

.related-lostcips h4{color:#e74c3c;padding:8px;font-size:15px;top:-18px;left:3.5%}

.related-lostcips a{font-size:14px;margin:0}.related-simplify a:hover{color:#e74c3c}

.related-lostcips ul li{padding:5px 0}

.related-lostcips ul li:before,.related-simplify ul li:hover:before{display:none}}

Dan simpan, lihatlah hasilnya, mungkin tampilannya tidak bagus karna saya tidak jago untuk mengedit tapi tidak apa-apa, namanya juga belajar yaga? :D.

Untuk tampilannya seperti gambar dibawah ini

Dan berakhirlah sudah artikel yang saya buat kali ini, semoga bermanfaat bagi Anda. Jangan lupa untuk share artikel ini kepada teman Anda, terimakasih telah berkunjung di blog saya. Jika ada masalah, Anda bisa comment dibawah.