Home » » Related Post di Tengah Postingan Blog - Bukan di Akhir

Related Post di Tengah Postingan Blog - Bukan di Akhir

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:

Artikel Terkait di Tengah Postingan


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! (http://www.contohblog.com).*



Thanks for reading & sharing Related Post di Tengah Postingan Blog - Bukan di Akhir

Previous
« Prev Post

10 comments:

Comment Page:
  1. Penampakan Related Posts ini apakah akan ditampilkan berdasarkan setelah paragraf tertentu, misalnya akan ditampilkan setelah paragraf ke 3 lalu related posts ini muncul?

    ...atau sebelum artikel dipublikasikan harus di Preview terlebih dahulu untuk menyesuaikan tampilannya?

    Ngomong-ngomong ana jadi penasaran nih kalo ditampilkan di smartphone, apakah responsive atau tidak ya :D

    ReplyDelete
    Replies
    1. 1. Dibaca yang teliti tong tulisannya, biar gak ada yng kelewat, noh di atas disebutkan munculnya di mana
      2. Dicoba saja, bikin blog demo

      Delete
    2. ((( Tong ))) Hahaaa... Iya sudah jelas pak.

      Delete
  2. misalnya diganti iklan bisa gak?

    ReplyDelete
    Replies
    1. bisa saja, cuma untuk iklan beda lagi kodenya, sila cari di kotak pencarian

      Delete
  3. Kadang jumlah related yang muncul ada 10 buah..
    Jadi panjang banget...

    Bagaimana cara untuk menentukan jumlah post terkaitnya...
    Ane pengennya cuma 3 - 4 :D

    ReplyDelete
    Replies
    1. perhatikan kode warna merah di atas, max result 5

      Delete
  4. mas.. udah saya ganti yang kedua, kok masih ga bisa ya?

    ReplyDelete

Komentar spam, menyertakan link aktif dan alamat blog tidak akan muncul. Tidak semua pertanyaan sempat atau bisa dijawab. Thanks for visiting and the comment :)

E-mail Newsletter

Receive Latest Posts from CB Blogger Straight in Your Email Inbox