PANDUANEKA

Aneka Panduan & Solusi Anda

11 December 2017

Cara Membuat Artikel Terkait/Related Post di Dalam Postingan

Artikel kali ini saya akan memberikan panduan cara membuat related post atau artikel terkait di dalam postingan secara otomatis. Sebenarnya cara membuat 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 karena didalamnya ada slot untuk pasang iklan.

Jadi artikel ini saya buat untuk memandu anda yang belum mempunyai akun Adsense tetapi ingin membuat artikel terkait atau related post. Biasanya Related Post selain dipasang di bawah postingan juga bisa 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 tentang seberapa penting membuat 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 kemudahan navigasi kepada pengunjung untuk mendapatkan konten yang masih ada keterkaitan dengan artikel yang sedang dibaca. Hal ini tentunya akan membuat pengunjung menjadi betah untuk berlama-lama di blog anda.

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

Dengan membuat 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 membuat konten bukan ?
Cara Membuat Artikel Terkait/Related Post di Dalam Postingan

Related post di tengah atau didalam artikel ini sama dengan membuat related post di bawah postingan, yaitu diambil dari label tertentu dari label-label artikel yang dibuat. Berikut ini panduan tutorial cara memasangnya :
Pastikan sebelum melakukan pemasangan related post ini, Anda memback up dahulu HTML template Anda untuk berjaga-jaga jika terjadi error saat penerapan related post ini.

Cara Memasang Related Post atau Artikel Terkait di dalam Postingan

1. Buka dasbord Blogger > Template > Edit HTML > Tambahkan kode 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 kode <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 kode diatas dengan kode 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 kode 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 agar icon bisa tampil

4. Simpan template

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

Sumber kode script :
https://www.bungfrangki.com/2015/12/membuat-related-pos-dalam-postingan.html
https://www.arlinadzgn.com/2017/01/memasang-artikel-terkait-di-dalam-postingan.html

No comments:

Post a Comment

- Silahkan berkomentar sesuai topik.
- Mohon centang pada Notive me agar tahu balasan dari kami.
- Sebelum bertanya, silahkan Anda cari terlebih dahulu di kotak pencarian (Search)
- Untuk setiap komentar saya akan lakukan kunjungan balik ke situs Anda dengan atau tanpa komentar
Terima kasih atas kunjungan dan komentarnya