Rabu, 10 April 2019

Cara Memasang Related Post di Dalam Postingan Seo Friendly

            Kalau kalian biasanya membaca sebuah artike tapi biasanya di tengah – tengah ada artikel terkait yang di pasang penulis untuk memudahkan kalian mendapatkan informasi yang masih terkait dengan yang kalian cari, di sini saya akan memberitahukan Cara Memasang Related Post di Dalam Postingan Seo Friendly, tentu saja manfaat yang di dapat akan menambah trafik pengunjung di blog kita, sehingga blog kita semakin ramai pengunjung dan terlihat professional, langsung saja kita simak penjelasanya
            Cara Memasang Related Post di Dalam Postingan Seo Friendly
1.      Buka Blog kalian langsung ke menu template dan pilih edit HTML cari tag </head> dan tambahkan kode berikut tepat diatasnya tag tersebut
<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.      Cari kode ]]></b:skin> dan tambahkan kode di bawah ini tepat di atas kode tersebut

/* Related Post Style 2 */
.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}}
3.      Pasang Font Awesome agar icon bisa muncul caranya temukan kode </head> dan letakan kode di bawah ini tepat di bawahnya
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"></link>
4.      Langkah selanjutnya cari kode <data:post.body/> biasanya ada beberapa kode dalam HTML kalian, coba satu persatu kode tersebut ganti dengan
<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>
5.      Simpan dan lihat hasilnya, usahakan artikel kalian sudah banyak dalam satu label, biar hasilnya sudah bisa Related Post di Dalam Postingan.
6.      Biasanya kalau ada kendala undefined langkah berikutnya hapus yang saya tandai ini, lihat gambar di bawah ini

Itulah tadi Cara Memasang Related Post di dalam postingan, atau bisa kalian tau cara memasang artikel terkait di dalam postingan blog kita, semoga kalian bisa menerapkan di blog kalian, sudah di coba sudah bisa, dan tentunya Seo Friendly

0 komentar:

Posting Komentar

 

Catatan Faris Java Copyright © 2011 | Template design by O Pregador | Powered by Blogger Templates