Cara Menyisipkan "Artikel Terkait" di Tengah Artikel Postingan

Cara menyisipkan "Artikel Terkait" di tengah-tengah artikel postingan - Mempunyai jumlah pengunjung blog yang banyak dan stabil adalah impian dari setiap masing-masing blogger. Tak terkecuali Saya yang meskipun terbilang masih pemula juga sama mengidamkan hal yang demikian.

Siapa sih yang tidak pengen punya blog dengan pengunjung yang banyak? Bagaimana dengan kamu? Apakah juga begitu? Hayo ngaku sajalah hehehee.

Untuk itu memanjakan pengunjung agar nyaman ketika berada di blog kita adalah hal yang wajib dilakukan. Tujuannya adalah agar para pengunjung blog tidak bosan untuk berlama-lama menyusuri artikel demi artikel yang ada.

Beri juga keleluasaan pada pengunjung untuk menanggapi artikel kamu dalam bentuk komentar, hal ini akan dapat menciptakan suasana yang akrab antara kamu dan pengunjung blog kamu.

Menyuguhkan konten yang segar dan banyak ilmu manfaat adalah salah satu caranya. Dengan demikian maka "sepulang" dari blog pengunjung akan mendapatkan "sesuatu" yang baru.

Salah satu langkah yang bisa dilakukan adalah dengan menghadirkan artikel terkait yang biasanya berada di bawah atau di akhir postingan. Tujuannya adalah agar pengunjung beralih ke artikel lainnya yang masih relevan untuk mendapatkan informasi yang dibutuhkannya.

Namun kali ini adalah cara menyisipkan artikel terkait tersebut di tengah artikel postingan. Bagaimana caranya?

Cara Menyisipkan "Artikel Terkait" di Tengah Artikel Postingan

Nah jika temans masih ingin membuat tautan artikel terkait yang berada di tengah-tengah postingan artikel bisa menggunakan cara ini. Dan pastinya dengan cara ini akan membuat blog tetap valid AMP.

Jadi bagi kamu yang blognya sudah AMP tidak perlu khawatir lagi jika ingin menambahkan artikel terkait di tengah postingan. Langsung aja temans, hanya perlu mengikuti langkah-langkah dibawah ini :

• Seperti biasa dari dashboard blogger  -> pilih tema -> kemudian pilih edit HTML
• Cari kode </head>, untuk memudahkannya bisa menggunakan CTRL+F
• Kemudian copy kode dibawah ini :

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

• Setelah itu pastekan kode tersebut diatas kode </head> tadi.

Sampai disini pasti tidak ada masalah lah ya, pasti temans pemula bisa sampai ditahap ini. Namun ini belum selesai temans...

Kuy kita lanjutkan :

• Lanjut... Kita cari kode ]]></b:skin>
• Kemudian copy dan paste-kan kode dibawah ini diatas kode ]]></b:skin>

/* Artikel Terkait Ditengah Postingan*/


.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)}}

• Nah jika sudah selanjutnya adalah menemukan kode <data:post.body/>
• Kemudian ganti kode <data:post.body/> dengan kode dibawah ini: (Perhatian, kita akan menemukan beberapa kode <data:post.body/>.
  
  Kalo tidak salah ada 3 s,d 4 kode didalam template dan setiap template itu berbeda-beda jadi coba saja satu persatu mengganti kode <data:post.body/> dengan kode dibawah ini sampai berhasil.

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

Setelah selesai jangan lupa klik simpan templatenya. Dan cek hasilnya, taraaaa kamu sudah mempunyai sisipan artikel terkait yang letaknya berada ditengah postingan. Dengan demikian harapannya adalah meningkatnya jumlah pengunjung di blog kamu. Semoga bermanfaat ya.

Berbagi :