Related Post di Tengah Postingan Blog - Bukan di Akhir

Oleh admin

Minggu, 28 Februari 2016

Bagikan :

Tweet

Cara Membuat Posting Terkait / Artikel Terkait di Tengah Postingan Blog - Bukan di Akhir. Related Posts Widget Inside or Within Blog Post for Blogger.

UMUMNYA widget Related Post ada di bawah postingan, bisa langsung di akhir alinea penutup, bisa juga di bawah tombol share media sosial.

Kode berikut yang CB "intip" dan modif dari Related Post ala MagOne Blogger Template yang menampilkan posting terkait di awal postingan.

Di bawah ini cara menampilkan tulisan terkait di tengah, yakni setelah alinea ketiga. Biasanya related post di tengah posting blog ini ada di situs-situs berita.

Ini penampakannya:

See Live Demo

Cara Membuat Related Post di Tengah Postingan

1. KODE JS:
Simpan di atas kode </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. KODE HTML/XML
Ganti kode <data:post.body/> yang kedua dengan kode berikut ini:

<div expr:id='&quot;post1&quot; + data:post.id'/>
<div class='related-post'>
<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=5&quot;' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>
<h4>Related Posts</h4>
<script type='text/javascript'>
removeRelatedDuplicates();
printRelatedLabels();
</script>
</div>
<div expr:id='&quot;post2&quot; + data:post.id'>
<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. KODE CSS:
Simpan di atas kode </style> atau ]]></b:skin>

/* Related Post Inside Blog Posts */
.related-post {position: relative;background: #fff;padding: 0;margin: 10px 15px 8px 0;float: left;width: 50%;border: 1px solid #999;}
.related-post h4{background:#666 !important;padding:5px 0 !important;margin:0;text-align:center !important;font-size:15px !important;font-weight:400;text-transform:none;color:#fff !important}
.related-post ul {margin:0;padding:0}
.related-post 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}
.related-post ul li:last-child{border:none !important}
.related-post a {color:#1b71bc;font-size:13px !important}
.related-post a:hover {text-decoration:underline}

Catatan:
1. Kode #fff merupakan warna latar putih, bisa diganti
2. Kode width:50% menampilkan widget related post within blog post setengah area. Jika ingin tampil full, bisa diubah menjadi 100%.

Demikian cara membuat Related Post di Tengah Postingan Blog - Bukan di Akhir. Untuk membuat Related Post seperti di blog CB ini, silakan buka Related Post with Thumbnail Image.

Good Luck & Happy Blogging! (https://goglazculture.blogspot.com).*

Tag : Desain Blog, Panduan Blogging