February 28, 2016

Cara Menampilkan Related Post di Tengah Postingan Blog - Bukan di Akhir

February 28, 2016

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

See Live Demo

Cara Membuat Related Post di Tengah Postingan

1. KODE JS

Simpan kode related post di tengah artikel berikut ini 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

Untuk memunculkan related post di tengah artikel, 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 kode untuk memunculkan related post di tengah artikel berikut ini 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%.

Cara Lain Related Post di Tengah Artikel (Recommended!)

Ini cara lainnya, tepatnya kode related post tengah postingan blog lainnya. Penampakannya seperti gambar di bawah ini.

Related Post di Tengah Artikel

1. Tema > Edit HTML
2. Copas Kode CSS berikut ini di atas kode </head>

<b:if cond='data:view.isPost'>
<style>
.related-middlepost{background:#f1f1f1 none repeat scroll 0 0;margin:30px auto;padding:35px 15px 5px;position:relative}
.related-middlepost h4{color:#c00;font-size:16px;font-weight:700;left:23px;margin:0;position:absolute;text-transform:uppercase;top:10px}
.related-middlepost ul{margin:0;padding:0}
.related-middlepost ul li {border-bottom: 1px solid #e3e3e3;font-size: 15px;font-weight: 700;margin: auto;padding: 7px 0 7px 7px;position: relative;transition: all 0.3s ease 0s;list-style:none;}
.related-middlepost a{color:#444}
.related-middlepost a:hover{color:#48d}
.related-middlepost ul li:nth-child(n+4){display:none}
.related-middlepost ul li:nth-child(3){border-bottom:medium none}
</style>
<script type='text/javascript'>
//<![CDATA[
var relatedmiddle = new Array(); var relatedmiddleNum = 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]; relatedmiddle[relatedmiddleNum] = entry.title.$t; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') {relatedUrls[relatedmiddleNum] = entry.link[k].href; relatedmiddleNum++; 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] = relatedmiddle[i];}} relatedmiddle = 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((relatedmiddle.length - 1) * Math.random()); var i = 0; document.write('<ul>'); while (i < relatedmiddle.length && i < 20) { document.write('<li><a href="' + relatedUrls[r] + '">' + relatedmiddle[r] + '</a></li>'); if (r < relatedmiddle.length - 1) { r++; } else { r = 0;} i++;} document.write('</ul>');}
//]]>
</script>
        </b:if>

3. Temukan (Ctrl+F) dan ganti kode <data:post.body/> yang kedua atau ketiga dengan kode HTML
related post tengah postingan berikut ini:

 <div expr:id='&quot;post1&quot; + data:post.id'/>
<div class='related-middlepost'>
<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/1.5);
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. Save! Simpan Tema.
5. Selesai!

Masih ada satu lagi Cara Menampilkan Related Post di Tengah Postingan Blog. Desainnya adalah posting terkaitnya "menyebar" di artikel atau terpisah.

Related Post di Tengah Artikel secara Terpisah

Jika ingin memasang artikel terkait dengan cara terpisah, artinya menyebar di tengah-tengah postingan, gunakan cara dari Arlina berikut ini.

Related Post di Tengah Artikel


1. Tema > Edit HTML

Copas kode berikut ini di atas kode </head>

<b:if cond='data:blog.pageType != &quot;index&quot;'>
<style type='text/css'>
/* Multi Related Post */
.arldzgnMultiRelated{background-color:#2a2a2a;color:#fff;margin:15px auto;display:-moz-box;display:-ms-flexbox;display:flex;flex-wrap:nowrap;justify-content:space-between;overflow:hidden;transition:all .3s}
.arldzgnMultiRelated:hover{background-color:#222}
.arldzgnMultiRelated .content{padding:12px 15px}
.arldzgnMultiRelated .content .text{margin-right:5px}
.arldzgnMultiRelated .content a{color:#fff;text-decoration:none;line-height:1.5em}
.arldzgnMultiRelated .content a:hover{text-decoration:underline}
.arldzgnMultiRelated .icon{height:auto;min-width:55px;background:#f44336 url(&quot;data:image/svg+xml,%3Csvg viewBox=&#39;0 0 24 24&#39; xmlns=&#39;http://www.w3.org/2000/svg&#39;%3E%3Cpath d=&#39;M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z&#39; fill=&#39;%23fff&#39;/%3E%3C/svg%3E&quot;) center / 40px no-repeat;transition:all .3s}
</style>
</b:if>

2. Copas kode berikut ini di bawah kode <data:post.body/> yang kedua atau ketiga.

<b:if cond='data:view.isPost'>
<script type='text/javascript'>
//<![CDATA[
// Multi Related Post
(function() {var jumlah = 4;let post = document['querySelectorAll']('.post-body br, .post-body p'),a = jumlah + 1,b = post['length'] / a;c = Array['from']({length: jumlah}, (redfx, blufx) => blufx + 1);
for (let d = 0; d < c['length']; d++) {let e = c[d],f = parseInt((b * e)),g = document['createElement']('div');g['className'] = 'arldzgnMultiRelated';if (post[f]['nodeName'] == 'P') {post[f]['parentNode']['insertBefore'](g, post[f])} else {post[f]['parentNode']['insertBefore'](g, post[f]['nextSibling'])}}})();
var relatedTitles = new Array();var relatedTitlesNum = 0;var relatedUrls = new Array();function related_results_labels(nerdfx) {for (var desfx = 0; desfx < nerdfx['feed']['entry']['length']; desfx++) {var nefx = nerdfx['feed']['entry'][desfx];relatedTitles[relatedTitlesNum] = nefx['title']['$t'];for (var ciafx = 0; ciafx < nefx['link']['length']; ciafx++) {if (nefx['link'][ciafx]['rel'] == 'alternate') {relatedUrls[relatedTitlesNum] = nefx['link'][ciafx]['href'];relatedTitlesNum++;break}}}}
function removeRelatedDuplicates() {var viefx = new Array(0);var labfx = new Array(0);for (var desfx = 0; desfx < relatedUrls['length']; desfx++) {if (!contains(viefx, relatedUrls[desfx])) {viefx['length'] += 1;viefx[viefx['length'] - 1] = relatedUrls[desfx];labfx['length'] += 1;labfx[labfx['length'] - 1] = relatedTitles[desfx]}};relatedTitles = labfx;relatedUrls = viefx}
function contains(yelfx, yufx) {for (var grefx = 0; grefx < yelfx['length']; grefx++) {if (yelfx[grefx] == yufx) {return true}};return false}
//]]>
</script>
  <b:if cond='data:post.labels'>
    <b:loop values='data:post.labels' var='label'>
      <b:if cond='data:view.isPost'>
        <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=100&quot;'/>
      </b:if>
    </b:loop>
  </b:if>
<script type='text/javascript'>
//<![CDATA[
(function arldzgnMultiRelated() {var text = 'Also read :';let r = Math['floor']((relatedTitles['length'] - 1) * Math['random']());let i = 0;let jumlah = document['querySelectorAll']('.arldzgnMultiRelated');while (i < relatedTitles['length'] && i < jumlah['length']) {for (let a = 0; a < jumlah['length']; a++) {jumlah[a]['innerHTML'] = '<span class="content"><span class="text">' + text + '</span><a href="' + relatedUrls[r] + '" title="' + relatedTitles[r] + '">' + relatedTitles[r] + '</a></span><span class="icon"></span>';if (r < relatedTitles['length'] - 1) {r++} else {r = 0};i++}}})();
//]]>
</script>
</b:if>

Anda bisa mengubah jumlah 4 dan tulisan Also read dengan versi Anda.

3. Simpan! Save.

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).*

Previous
« Prev Post
Author Image

CB Blogger

Recommended Posts

Related Posts

Show comments
Hide comments

18 comments on Cara Menampilkan Related Post di Tengah Postingan Blog - Bukan di Akhir

  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
  4. mas.. udah saya ganti yang kedua, kok masih ga bisa ya?

    ReplyDelete
  5. Gak bisa gan pake kode yang kedua hanya muncul tilisan related post nya aja gak ada tulisannya

    ReplyDelete
  6. Punya ane gak bisa gan, apa gara2 tengah postingan ane pake buat pasang iklan ya?

    ReplyDelete
  7. uda coba berhasil, tapi kalo di artikelnya kita pasang tag pre (contoh artikel yg isinya tutorial program) sama ada bullet/numbering dan kebetulan penempatan si related tadi muncul di dalam tag pre nya kok jadi semrawut ya tampilannya, itu knp ya?

    ReplyDelete
  8. kok punya ane muncul nya di bagian atas ya min?

    ReplyDelete
    Replies
    1. Dianya suka di atas kali :) Coba terus

      Delete
  9. mimin ini kan pasti ditengah, saya nambahin cara ini pas artikel udh ada diblog sktar 20 , pas ane lihat ada kotak kepotong gara gara ini min. solusinya gmna ya spaya bisa agak kbwah gtu

    ReplyDelete
    Replies
    1. Ubah kode var jumlah = 4 menjadi lebih tinggi (5,6, 7....)

      Delete
  10. Makasih banyak, kodenya work pisan

    ReplyDelete

Contact Form

Name

Email *

Message *