Cara Terbaik Memasang Artikel Terkait di Dalam Postingan Blog



Related Content

Cara Terbaik Memasang Artikel Terkait di Dalam Postingan Blog - Dalam dunia blogging tentu teman-teman mengenal istilah related content sebuah isi artikel yang berkaitan. Related Content juga sangat memberikan dampak yang positif bagi sebuah website. Sehingga anda bisa menyajikan artikel yang saling berkaitan. Semakin lama pembaca disitus anda makin semakin baik dan berguna website anda dimata pengunjung.

Related content ini biasanya dipasang diblogger pada sebuah wedget sidebar atau footer. Lalu bagaimana jika ingin menambahkan related content didalam sebuah postingan.

Yuk ikuti langkahnya dibawah ini :
Cara Terbaik Memasang Artikel Terkait di Dalam Postingan Blog
1. Buka Blogger - Template - klik tombol Edit HTML - lalu tambahkan kode dibawah ini sebelum tag </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>

2. Tambahkan CSS dibawah ini sebelum kode ]]></b:skin> atau </style>
Kamu boleh memilih salah satu antara kedua kode diatas. Yang pasti anda harus memastikan dan meletakan kode dibawah ini sebelum kode (salah satu).

Untuk menjaga kemungkinan buruk(error template) biasakan jika teman-teman melakukan editing template dengan mode EDIT HTML terlebih dahulu melakukan Backup Template agar lebih aman dari hal-hal yang tidak diinginkan.

Cara Backup template anda bisa lihat panduannya disini kok :) KLIK
Ok kembali lagi ketopiknya ya. Silahkan letakan kode dibawah ini tepat diatas kode (salah satu) ]]></b:skin> atau </style> pada blog template anda. Jika sudah lakukan Save Template(save theme)

/* Related Post Style 1 */
.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)}}
Contoh hasil related content
NB: Catatan Pastikan blog teman-teman sudah memasang Font Awesome agar icon bisa muncul direlated artikel 3. Selanjutnya, cari dan ganti kode <data:post.body/> dengan kode dibawah ini (jika tidak muncul, pastikan anda mencari kode <data:post.body/> yang mungkin lebih dari satu. Coba anda edit dan coba satu-satu.

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

4. Simpan template anda dan lihat hasilnya :) Dengan cara ini anda tidak perlu lagi membuat related artikel dengan cara manual. Semoga artikel ini bermanfaat bagi anda.

0 Response to "Cara Terbaik Memasang Artikel Terkait di Dalam Postingan Blog"

Post a Comment

Ditunggu komentarnya ya? Semoga sajian dari situs ini bermanfaat dan bisa dishare ke lainnya :)