Cara Pasang Related Post dalam Postingan Blog

Blog

Salah satu cara membuat pengunjung bisa mengeksplor dan membaca seluruh artikel blog kita adalah dengan menampilkan sebanyak mungkin artikel dalam blog tersebut. Maksudnya, ketika pengunjung membaca sebuah halaman, maka di halaman tersebut juga tersaji beberapa artikel yang berhubungan dengan artikel yang sedang dibacanya.

Salah satu manfaat jika pengunjung bisa berlama lama di blog Anda dan membaca lebih dari satu artikel adalah untuk menurunkan bounced rate blog. Dari beberapa tutorial blogging, semakin rendah bounced rate blog, bisa dikatakan blog tersebut semakin bagus.

Penempatan related post atau artikel terkait biasanya ada di akhir sebuah postingan. Namun tak ada salahnya jika Anda coba untuk meletakkan related post atau artikel terkait di dalam postingan. Bagaimana caranya? Berikut catatan dari kami,

1) Menuju Editor Template HTML, temukan tag </head>. Selanjutnya taruh script dibawah ini di atasnya.

<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) Di atas tag ]]>< b:/skin> letakkan kode CSS di bawah ini. Anda bisa pilih salah satu dari CSS di bawah ini,
CSS I

/* Related Post Gaya 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)}}

Tampilannya seperti ini dalam artikel Anda.

CSS II

/* Related 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}}

CSS III

/* CS MODE  3 */
.related-simplify{display:inline-block;background:#34495e;color:#fff;position:relative;padding:0;margin:20px auto;width:100%;border:6px double #fff;}
.related-simplify ul{background:rgba(38,62,87,0.8);margin:0;padding:20px}
.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(255,255,255,0.7);overflow:hidden;font-size:60%;left:10px;transition:all .3s}
.related-simplify ul li:hover:before{content:'\f0c8';font-family:fontawesome;color:#f1c40f;}
.related-simplify a{color:#fff;font-size:17px;margin:0 0 0 30px;}
.related-simplify a:hover{color:#fff;text-decoration:underline}
.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) Temukan tag <data:post.body/> . Dalam sebuah template blog ada beberapa tag tersebut, silahkan nanti dicoba satu persatu. Ganti tag tersebut dengan kode HTML dibawah ini,

<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>Artikel Terkait</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>

Sekarang Anda tinggal Save/Simpan Template Anda. Kemudian lihat apakah muncul atau tidak. Jika tidak muncul, Anda salah mengganti tag <data:post.body/>. Solusinya Anda coba ganti <data:post.body/> yang lain dengan kode HTML di atas.

Share Yuk

Facebook Twitter Linkedin

Related Posts

Loading...