Cara Memasang Related Post di Bawah Postingan

Related Post atau bisa disebut juga artikel terkait memang suatu widget yang harus ada pada blog, mengapa demikian??, yah sudah jelas karena widget ini berfungsi menampilkan daftar postingan terkait. selain untuk memudahkan penngunjung dalam mencari artikel kita, manfaat lainnya adalah blog kita lebih disukai Google, Kenapa?? gak tau juga seh kenapa. :p

Cara Memasang Related Post di Bawah Postingan

Masuk Ke Edit HTML

Silahkan Cari Kode ]]></b:skin> atau </style>. Silahkan Copy Kode dibawah ini dan taruh tepat di atas kode yang ditemukan.

#related-post {
    border-top: 2px solid #ccc;
    width: auto;
    margin-top: 5px;
    margin-bottom: 10px;
    padding: 10px 20px 20px 20px;
}

#related-post h2 {
    font-family: '
    Oswald'
    , Arial, sans-serif;
    font-size: 16px;
    color: #4a4a4a;
    text-transform: uppercase;
    margin: 0 0 15px;
    padding: 0;
    font-weight: normal;
}

#related-post a {
    color: #2c3e50;
}

#related-post li {
    background: url(http: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyvHuvUhb8lazVCt6o4E9jxvp9IS2MamuLC5yLAMd_PgohqKJ3JNxbIvyHNTqvYFI-n6FtH8udt5oPIcepiwqpcvNqxyBnnh-0m2_S8SOlPYCjHHBMEphKawIh_M7PUQZZZfF2QjrRaSLg/s1600/bullet.png) no-repeat 1px 5px;
    color: #2c3e50;
    text-indent: 0;
    line-height: 1.6em;
    margin: 0;
    padding: 0 0 3px 19px;
}

#related-post a:hover {
    color: #5295c6;
    text-decoration: none;
}

#related-post .widget {
    margin: 0;
    padding: 0;
}

#related-post ul {
    margin: 0;
    padding: 0;
}

Jika sudah, Sekarang Cari Kode <data:post.body/>. Kalau sudah ketemu, Pastekan Kode berikut tepat di bawah kode <data:post.body/>.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='clear: both;'/>
<div class='related-post' id='related-post'/>
<script type='text/javascript'>
  var labelArray = [<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>
          &quot;<data:label.name/>&quot;<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
      </b:loop></b:if>];
  var relatedPostConfig = {
      homePage: &quot;<data:blog.homepageUrl/>&quot;,
      widgetTitle: &quot;&lt;h4 style=&#39;color: #BE6A10;font:20px Oswal&#39;&gt;Artikel Terkait Yang Mungkin Anda Butuhkan:&lt;/h4&gt;&quot;,
      numPosts: 5,
      titleLength: &quot;auto&quot;,
      containerId: &quot;related-post&quot;,
      newTabLink: false,
      widgetStyle: 1,
      callBack: function() {}
  };
  </script>
<script src='http://yourjavascript.com/6414511674/related-post.js' type='text/javascript'/>
<div style='clear:both'/>
</b:if>
<!-- Related Post End -->

Perlu diperhatikan! biasanya <data:post.body/> lebih dari satu, silahkan pasang pada kode yang ditemukan pada urutan nomor dua.

Simpan Template dan lihat hasilnya.

Belum berhasil???
Mungkin anda salah menaruh kodenya. Pada <data:post.body/> biasanya terdapat kode tag kondisionalnya, kira-kira seperti ini.

<div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='articleBody'>
  <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <data:post.body/>

Maka jika kasusnya seperti di atas, anda hanya perlu memasang kodenya seperti ini:

<div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='articleBody'>
  <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <data:post.body/>
<div style='clear: both;'/>
<div class='related-post' id='related-post'/>
<script type='text/javascript'>
  var labelArray = [<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>
          &quot;<data:label.name/>&quot;<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
      </b:loop></b:if>];
  var relatedPostConfig = {
      homePage: &quot;<data:blog.homepageUrl/>&quot;,
      widgetTitle: &quot;&lt;h4 style=&#39;color: #BE6A10;font:20px Oswal&#39;&gt;Artikel Terkait Yang Mungkin Anda Butuhkan:&lt;/h4&gt;&quot;,
      numPosts: 5,
      titleLength: &quot;auto&quot;,
      containerId: &quot;related-post&quot;,
      newTabLink: false,
      widgetStyle: 1,
      callBack: function() {}
  };
  </script>
<script src='http://yourjavascript.com/6414511674/related-post.js' type='text/javascript'/>
<div style='clear:both'/>
<!-- Related Post End -->
......... kode
           panjang kebawah ..........

Dalam pemasangan kode, anda harus mengerti antara kode pembuka maupun penutup, jika anda sudah mengerti, anda tak akan kebingungan jikalau hanya memasang hal mudah seperti di atas.
Jika masih belum mengerti Cara Memasang Artikel Terkait Di Atas, silahkan saja bertanya.