Cara Menciptakan Artikel Terkait/Related Post Di Dalam Postingan

Artikel kali ini saya akan menawarkan panduan cara menciptakan related post atau artikel terkait di dalam postingan secara otomatis. Sebenarnya cara menciptakan artikel terkait ini sudah saya bahas pada artikel sebelumnya yaitu cara memasang iklan Adsense dan related post dalam postingan yang saya peruntukkan khususnya bagi teman-teman blogger yang sudah menjadi publisher Adsense alasannya yaitu didalamnya ada slot untuk pasang iklan.

Makara artikel ini saya buat untuk memandu anda yang belum memiliki akun Adsense tetapi ingin menciptakan artikel terkait atau related post. Biasanya Related Post selain dipasang di bawah postingan juga dapat ditempatkan di tengah atau di dalam artikel.

Baca juga : Cara Membuat Related Post di Bawah Postingan dengan Mudah

Sebelum kita mulai memasang related post di dalam postingan, akan saya singgung sedikit perihal seberapa penting menciptakan related post/artikel terkait ini.

Membuat related post sangat penting sebagai salah satu teknik SEO untuk mengurangi nilai bounce rate yang tinggi.

Dengan adanya artikel terkait, memberi fasilitas navigasi kepada pengunjung untuk mendapat konten yang masih ada keterkaitan dengan artikel yang sedang dibaca. Hal ini tentunya akan menciptakan pengunjung menjadi betah untuk berlama-lama di blog anda.

Sebenarnya related post otomatis dalam postingan ini hanya untuk mempermudah kerja kita dalam meningkatkan secara optimal SEO on page. Seperti yang pernah saya bahas dalam artikel saya perihal optimasi SEO On page dan SEO off page, bahwa menciptakan internal link dan anchor text dalam konten sangat penting baik untuk pengunjung maupun mesin pencari.

Dengan menciptakan related post di dalam postingan secara otomastis berarti anda sudah memasang internal link dalam postingan anda. Hal ini tentu sedikit membantu meringankan kerja anda dalam menciptakan konten bukan ?

Related post di tengah atau didalam artikel ini sama dengan menciptakan related post di bawah postingan, yaitu diambil dari label tertentu dari label-label artikel yang dibuat. Berikut ini panduan tutorial cara memasangnya :

Pastikan sebelum melaksanakan pemasangan related post ini, Anda memback up dahulu HTML template Anda untuk berjaga-jaga kalau terjadi error dikala penerapan related post ini.

Cara Memasang Related Post atau Artikel Terkait di dalam Postingan

1. Buka dasbord Blogger > Template > Edit HTML > Tambahkan isyarat script di bawah ini sebelum </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>

2. Selanjutnya, cari isyarat <data:post.body/> (yang kedua), atau cari kode <div class='artbody' itemprop='articleBody description'><data:post.body/></div> untuk pengguna template dari bungfrangki.

Hapus dan ganti isyarat diatas dengan isyarat dibawah ini

<div expr:id='&quot;post1&quot; + data:post.id'/>
<div class='post-terkait'>
<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>

3. Untuk menyempurnakan tampilan dari related post ini, silahkan pilih salah satu isyarat CSS di bawah ini dan copy paste diatas kode </style> atau ]]></b:skin>

Style 1

/* Related Post di dalam postingan Style 1 */
.post-terkait {position:relative;background:#fff;padding:0;margin:10px 15px 0 0;float:left;width:165px;border:1px solid #1b71bc}
.post-terkait h4{background:#1b71bc !important;padding:5px 0 !important;margin:0;text-align:center !important;font-size:15px !important;font-weight:400;text-transform:uppercase;color:#fff !important}
.post-terkait ul {margin:0;padding:0}
.post-terkait ul li {list-style:none !important;padding:7px 0;margin:0 7px;border-bottom:2px dotted #ddd;line-height:1.4em !important;text-align:left !important}
.post-terkait ul li:last-child{border:none !important}
.post-terkait a {color:#1b71bc;font-size:13px !important}
.post-terkait a:hover {text-decoration:underline}

Style 2

/* Related Post di dalam Postingan Style 2 */
.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)}}

Style 3

/* Related Post di dalam Postingan Style 3 */
.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}}

Untuk memasang Style 2 dan Style 3, pastikan blog Anda sudah memasang font awesome semoga icon dapat tampil

4. Simpan template

Demikian tutorial cara menciptakan related post atau artikel terkait di dalam postingan. Semoga bermanfaat untuk Anda, selamat mencoba dan terima kasih atas atensi Anda pada artikel ini.

Sumber isyarat script :
https://www.mastrikece.xyz//search?q=cara-memasang-iklan-adsense-dan-related-post-di-tengah-postingan
https://www.mastrikece.xyz//search?q=cara-memasang-iklan-adsense-dan-related-post-di-tengah-postingan

Share this post