Cara Membuat Related Posts Dengan 3 Style Melalui Layout



Jika pada artikel sebelumnya saya sudah memberikan Cara Memasang Iklan AdSense di Tengah Artikel Melalui Layout, kini giliran Related Post yang bisa sobat pasang langsung di Tata Letak / Layout. Related Posts yang akan saya bagikan ini memiliki tiga style pengaturan, jadi sobat bisa memilih mana yang cocok untuk ditampilkan pada Blog.


Fungsi Related Posts

Namun sebelum melangkah pada tutorial, kita cari tahu sama sama yuk apa fungsi dari Related Posts pada sebuah web atau blog. Related Posts adalah sebuah rujukan atau rekomendasi artikel lain yang masih terkait dengan artikel yang sedang baca saat itu. Dalam artian, artikel masih satu label atau tag dengan artikel yang di baca. Tentu saja ini akan membuat penasaran pembaca dan akan membuat pembaca berlama-lama mengunjungi artikel lain yang masih satu rumpun dengan artikel yang dibaca.

Keuntungan

Jadi jika pada website atau blog sobat memiliki Related Posts atau dalam Bahasa Indonesia Artikel Terkait, tentu saja ini akan mengurangi tingkat bounce rate dan meningkatkan Pageview, yang mana semua ini memberikan pengaruh baik pada kinerja blog (SEO). Karena artikel yang dibaca saat itu saling berkaitan satu sama lain sehingga pembaca pun akan tertarik dan penasaran untuk membaca konten tersebut.

Keuntungan lain dari meningkatnya pageview adalah meningkatnya pendapatan blog sobat jika memasang iklan seperti Google AdSense. Dan bisa juga artikel Anda menarik pengunjung menjadi klien yang pada akhirnya membuat profit pada bisnis sobat. Sebenarnya masih banyak lagi keuntungan menggunakan related post pada blog, jika saya jelaskan satu persatu keuntungannya tentu saja tidak akan habisnya.

Memasang Related yang bisa diubah melalui layout

Kita lanjut pada pembahasan tentang cara pemasangan related posts pada blog, sebenarnya sudah banyak sekali tutorial seperti ini yang beredar di luar sana, namun dikesempatan ini saya akan memberikan Related Posts  dengan 3 style atau istilah english nya Tree in One, bisa dibilang related posts ini lain dari pada yang sudah banyak dibahas. Dimana Related Posts ini bisa diatur sesuai dengan keinginan sobat langsung melalui layout / tata letak.

Cara Pemasangan

Seperti biasa langkah awal yang harus sobat lakukan adalah masuk di Blog tetangga, hehehe... maaf maksudnya pada Blog sobat sendiri. Kemudian masukkan code dibawah ini tepat di atas code </main> atau tepat berada di bawah code penutup </b:section> Atau lebih jelasnya letakkan tepat di bawah code ini
<b:section class='main' id='main' maxwidgets='1' name='Main Posts' showaddelement='yes'>
....
....
....
....
....
....
</b:section>

HTML serta JavaScript yang akan dipasang tepat di atas code </main> sebagai berikut
<div class='related-posts-widget' id='related-posts-widget'>
  <div class='notex'/>
  <b:section class='relatedPost' id='related-post-set-desktop' maxwidgets='1' name='Related Post Setting (Desktop &amp; Tablet)' preferred='yes' showaddelement='no'>
    <b:widget id='HTML745' locked='true' title='Related Post' type='HTML' version='1'>
      <b:widget-settings>
        <b:widget-setting name='content'>numPosts:6,
widgetStyle:3,
summaryLength:101,</b:widget-setting>
      </b:widget-settings>
      <b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
  </b:if>
  <div class='widget-content'>
  <script type='text/javascript'>
var mql = window.matchMedia(&#39;screen and (min-width: 479px)&#39;);if (mql.matches){
var relatedPostConfig={homePage:&quot;<data:blog.homepageUrl/>&quot;,widgetTitle:&quot;<h4><data:title/></h4>&quot;,titleLength:&quot;auto&quot;,thumbnailSize:322,noImage:&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC&quot;,containerId:&quot;related-post&quot;,newTabLink:false,moreText:&quot;Read More&quot;,<data:content/>callBack:function(){}}}
  </script>
  </div>
</b:includable>
    </b:widget>
  </b:section>
  <b:section class='relatedPost' id='related-post-set-mobile' maxwidgets='1' mobile='yes' name='Related Post Setting (Mobile)' preferred='yes' showaddelement='no'>
    <b:widget id='HTML746' locked='true' title='Related Post' type='HTML' version='1'>
      <b:widget-settings>
        <b:widget-setting name='content'>numPosts:5,
widgetStyle:1,
summaryLength:60,</b:widget-setting>
      </b:widget-settings>
      <b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
  </b:if>
  <div class='widget-content'>
  <script type='text/javascript'>
var mql = window.matchMedia(&#39;screen and (max-width: 480px)&#39;);if (mql.matches){
var relatedPostConfig={homePage:&quot;<data:blog.homepageUrl/>&quot;,widgetTitle:&quot;<h4><data:title/></h4>&quot;,titleLength:&quot;auto&quot;,thumbnailSize:322,noImage:&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC&quot;,containerId:&quot;related-post&quot;,newTabLink:false,moreText:&quot;Read More&quot;,<data:content/>callBack:function(){}}}
  </script>
  </div>
</b:includable>
    </b:widget>
  </b:section>
    </div>

Sehingga terlihat seperti ini
<b:section class='main' id='main' maxwidgets='1' name='Main Posts' showaddelement='yes'>
....
....
....
....
....
....
</b:section>
<div class='related-posts-widget' id='related-posts-widget'>
  <div class='notex'/>
  <b:section class='relatedPost' id='related-post-set-desktop' maxwidgets='1' name='Related Post Setting (Desktop &amp; Tablet)' preferred='yes' showaddelement='no'>
    <b:widget id='HTML745' locked='true' title='Related Post' type='HTML' version='1'>
      <b:widget-settings>
        <b:widget-setting name='content'>numPosts:6,
widgetStyle:3,
summaryLength:101,</b:widget-setting>
      </b:widget-settings>
      <b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
  </b:if>
  <div class='widget-content'>
  <script type='text/javascript'>
var mql = window.matchMedia(&#39;screen and (min-width: 479px)&#39;);if (mql.matches){
var relatedPostConfig={homePage:&quot;<data:blog.homepageUrl/>&quot;,widgetTitle:&quot;<h4><data:title/></h4>&quot;,titleLength:&quot;auto&quot;,thumbnailSize:322,noImage:&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC&quot;,containerId:&quot;related-post&quot;,newTabLink:false,moreText:&quot;Read More&quot;,<data:content/>callBack:function(){}}}
  </script>
  </div>
</b:includable>
    </b:widget>
  </b:section>
  <b:section class='relatedPost' id='related-post-set-mobile' maxwidgets='1' mobile='yes' name='Related Post Setting (Mobile)' preferred='yes' showaddelement='no'>
    <b:widget id='HTML746' locked='true' title='Related Post' type='HTML' version='1'>
      <b:widget-settings>
        <b:widget-setting name='content'>numPosts:5,
widgetStyle:1,
summaryLength:60,</b:widget-setting>
      </b:widget-settings>
      <b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
  </b:if>
  <div class='widget-content'>
  <script type='text/javascript'>
var mql = window.matchMedia(&#39;screen and (max-width: 480px)&#39;);if (mql.matches){
var relatedPostConfig={homePage:&quot;<data:blog.homepageUrl/>&quot;,widgetTitle:&quot;<h4><data:title/></h4>&quot;,titleLength:&quot;auto&quot;,thumbnailSize:322,noImage:&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC&quot;,containerId:&quot;related-post&quot;,newTabLink:false,moreText:&quot;Read More&quot;,<data:content/>callBack:function(){}}}
  </script>
  </div>
</b:includable>
    </b:widget>
  </b:section>
    </div>

Langkah selanjutnya letakkan code pemanggilnya tepat berada di bawah code <data:post.body/> karena di dalam template adalah lebih dari satu code tersebut maka cari yang khusus untuk postingan

Code Pemanggil
<b:if cond='data:view.isPost'>
<div class='related-wrapper' id='related-wrapper'>
<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>];
  </script>
  </div>
</b:if>

Kemudian letakkan code JavaScriptnya tepat diatas code </body> atau &lt;!--</body>--&gt;&lt;/body&gt;

<script>
//<![CDATA[
var randomRelatedIndex, showRelatedPost;
(function (n, m, k) {
 var d = {
  widgetTitle: "<h4>Related Posts:</h4>",
  widgetStyle: 1,
  homePage: "http://www.dte.web.id",
  numPosts: 7,
  summaryLength: 125,
  titleLength: "auto",
  thumbnailSize: 200,
  noImage: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC",
  containerId: "related-post",
  newTabLink: false,
  moreText: "Baca Selengkapnya",
  callBack: function () {}
 };
 for (var f in relatedPostConfig) {
  d[f] = (relatedPostConfig[f] == "undefined") ? d[f] : relatedPostConfig[f]
 }
 var j = function (a) {
  var b = m.createElement("script");
  b.type = "text/javascript";
  b.src = a;
  k.appendChild(b)
 },
 o = function (b, a) {
  return Math.floor(Math.random() * (a - b + 1)) + b
 },
 l = function (a) {
  var p = a.length,
  c, b;
  if (p === 0) {
   return false
  }
  while (--p) {
   c = Math.floor(Math.random() * (p + 1));
   b = a[p];
   a[p] = a[c];
   a[c] = b
  }
  return a
 },
 e = (typeof labelArray == "object" && labelArray.length > 0) ? "/-/" + l(labelArray)[0] : "",
 h = function (b) {
  var c = b.feed.openSearch$totalResults.$t - d.numPosts,
  a = o(1, (c > 0 ? c: 1));
  j(d.homePage.replace(/\/$/, "") + "/feeds/posts/summary" + e + "?alt=json-in-script&orderby=updated&start-index=" + a + "&max-results=" + d.numPosts + "&callback=showRelatedPost")
 },
 g = function (z) {
  var s = document.getElementById(d.containerId),
  x = l(z.feed.entry),
  A = d.widgetStyle,
  c = d.widgetTitle + '<ul class="related-post-style-' + A + '">',
  b = d.newTabLink ? ' target="_blank"': "",
  y = '<span class="bg_overlay"></span>',
  v,
  t,
  w,
  r,
  u;
  if (!s) {
   return
  }
  for (var q = 0; q < d.numPosts; q++) {
   if (q == x.length) {
    break
   }
   t = x[q].title.$t;
   w = (d.titleLength !== "auto" && d.titleLength < t.length) ? t.substring(0, d.titleLength) + "&hellip;": t;
   r = ("media$thumbnail" in x[q] && d.thumbnailSize !== false) ? x[q].media$thumbnail.url.replace(/.*?:\/\//g, "//").replace(/\/s[0-9]+(\-c)?/, "/s" + d.thumbnailSize) : d.noImage;
   u = ("summary" in x[q] && d.summaryLength > 0) ? x[q].summary.$t.replace(/<br ?\/?>/g, " ").replace(/<.*?>/g, "").replace(/[<>]/g, "").substring(0, d.summaryLength) + "&hellip;": "";
   for (var p = 0, a = x[q].link.length; p < a; p++) {
    v = (x[q].link[p].rel == "alternate") ? x[q].link[p].href: "#"
   }
   if (A == 2) {
    c += '<li><div class="related-post-item-thumbnail"><img alt="" src="' + r + '" width="' + d.thumbnailSize + '" height="' + d.thumbnailSize + '"></div><div class="related-post-item-text"><a class="related-post-item-title" title="' + t + '" href="' + v + '"' + b + ">" + w + '</a><span class="related-post-item-summary"><span class="related-post-item-summary-text">' + u + '</span> <a href="' + v + '" class="related-post-item-more"' + b + ">" + d.moreText + "</a></span></div>" + y + "</li>"
   } else {
    if (A == 3 || A == 4) {
     c += '<li class="related-post-item" tabindex="0"><a class="related-post-item-title-thumb" href="' + v + '"' + b + '><div class="related-post-item-thumbnail"><img alt="" src="' + r + '" width="' + d.thumbnailSize + '" height="' + d.thumbnailSize + '"></a></div><div class="related-post-item-tooltip"><a class="related-post-item-title" title="' + t + '" href="' + v + '"' + b + ">" + w + "</a><span>" + u + "</span></div>" + y + "</li>"
    } else {
     if (A == 5) {
      c += '<li class="related-post-item" tabindex="0"><a class="related-post-item-wrapper" href="' + v + '" title="' + t + '"' + b + '><div class="related-post-item-thumbnail"><img alt="" src="' + r + '" width="' + d.thumbnailSize + '" height="' + d.thumbnailSize + '"><span class="related-post-item-tooltip">' + w + "</span></a>" + y + "</li>"
     } else {
      if (A == 6) {
       c += '<li><div class="related-post-item-tooltip"><div class="related-post-item-thumbnail"><img alt="" src="' + r + '" width="' + d.thumbnailSize + '" height="' + d.thumbnailSize + '"></div><a class="related-post-item-title" title="' + t + '" href="' + v + '"' + b + ">" + w + '</a><span class="related-post-item-summary"><span class="related-post-item-summary-text">' + u + "</span></span>" + y + "</div></li>"
      } else {
       c += '<li><a title="' + t + '" href="' + v + '"' + b + ">" + w + "</a></li>"
      }
     }
    }
   }
  }
  s.innerHTML = c += "</ul>" + y;
  d.callBack()
 };
 randomRelatedIndex = h;
 showRelatedPost = g;
 j(d.homePage.replace(/\/$/, "") + "/feeds/posts/summary" + e + "?alt=json-in-script&orderby=updated&max-results=0&callback=randomRelatedIndex")
})(window, document, document.getElementsByTagName("head")[0]);
//]]>
</script> 

Simpan code CSS nya tepat di dalam code <style> ... </style> atau <b:skin<![CDATA[ ... ]]></b:skin>
/* CSS Related Post */
#related-wrapper {
  margin: 20px auto 0;
  padding: 0;
  display: block;
  overflow: hidden;
}
.related-post {
  font-family: &#39;
  Poppins&#39;, sans-serif;
  margin: 0 auto;
  padding: 0;
  text-align: center;
}
.related-post h4 {
  margin: 5px 0 15px 0;
  font-size: 15px;
  line-height: 1.2em;
  padding: 0 15px;
  position: relative;
  color: #292828;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  background-color: #ffffff;
  display: inline-block;
}
.related-post h4:before {
  display: block;
  width: 500px;
  height: 0;
  border-bottom: 1px solid #dddddd;
  position: absolute;
  right: 100%;
  left: auto;
  top: 50%;
  content: &quot;
  &quot;
}
.related-post h4:after {
  display: block;
  width: 500px;
  height: 0;
  border-bottom: 1px solid #dddddd;
  position: absolute;
  left: 100%;
  right: auto;
  top: 50%;
  content: &quot;
  &quot;
}
.related-post .related-post-style-1, .related-post .related-post-style-2, .related-post .related-post-style-3 {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.related-post .related-post-item-summary, .related-post-style-3 span {
  font-size: 83%;
  color: #656565;
  line-height: 1.4em;
  display: inline-block;
  text-align: left;
}
/* Related Post Style 3 */
.related-post-style-3 {
  margin: 0 0 0 -1% !important;
}
.related-post-style-3 li {
  list-style: none;
  margin-left: 1% !important;
  padding: 0;
  width: calc(33.3333% - 1%);
  float: left;
}
.related-post-style-3 .related-post-item-thumbnail {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 125px;
  padding: 0;
  margin: 0 auto 8px;
  overflow: hidden;
}
.related-post-style-3 li img {
  width: 100%;
  height: auto;
}
.related-post-style-3 a.related-post-item-title {
  display: block;
  text-align: left;
  overflow: hidden;
  line-height: 1.3em;
  font-size: 100% !important;
  color: #111111;
  margin: 0 auto 15px;
}
.related-post-style-3 a:hover.related-post-item-title {
  text-decoration: underline;
}
.related-post-style-3 span {
  display: none !important;
  height: 0;
  width: 0;
  overflow: hidden;
}
// this is summary
/* Related Post Style 2 */
.related-post-style-2 {
  margin: 0 auto !important;
}
.related-post-style-2 li {
  list-style: none;
  margin: 0 auto 10px;
  padding: 10px 0 0;
  display: block;
  width: 100%;
  border-top: 1px solid #eeeeee;
}
.related-post-style-2 li:first-child {
  border-top: none;
}
.related-post-style-2 .related-post-item-thumbnail {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  width: 125px;
  height: 80px;
  max-width: none;
  max-height: none;
  padding: 0;
  overflow: hidden;
  display: inline-block;
  float: left;
}
.related-post-style-2 .related-post-item-thumbnail img {
  width: 100%;
  height: 100%;
}
.related-post-style-2 a.related-post-item-title {
  line-height: 1.3em;
  display: block;
  text-align: left;
  font-size: 107% !important;
  color: #2d2d2d;
  margin: 0 0 7px;
  font-weight: 700;
}
.related-post-style-2 a:hover.related-post-item-title {
  text-decoration: underline;
}
.related-post-style-2 a.related-post-item-more {
  display: none;
}
.related-post-style-2 .related-post-item-text {
  display: inline-block;
  text-align: left;
  width: calc(100% - 140px);
  float: right;
}
/* Related Post Style 1 */
.related-post-style-1 li a {
  line-height: 1.3em;
  display: block;
  position: relative;
  font-size: 100% !important;
  color: #2d2d2d;
  margin: 0 0 7px;
  padding: 0 0 0 28px;
  font-weight: 400;
}
.related-post-style-1 li a:before {
  content: &#39;
  &#39;
  width: 7px;
  height: 7px;
  border-radius: 100%;
  background-color: #08aadb;
  display: inline-block;
  position: absolute;
  top: 6px;
  left: 7px;
}
.related-post-style-1 li a:hover {
  text-decoration: underline;
}
/* Related Posts Responsive */
@media screen and (max-width: 600px) {
  .related-post-style-3 .related-post-item-thumbnail {
    height: 110px;
  }
}
@media screen and (max-width: 480px) {
  .related-post-style-2 a.related-post-item-title {
    line-height: 1.2em;
    font-size: 100% !important;
    margin: 0 0 5px;
  }
  .related-post-style-3 .related-post-item-thumbnail {
    height: 75px;
  }
  .related-post-style-3 a.related-post-item-title {
    line-height: 1.2em;
    font-size: 95% !important;
    margin: 0 auto 9px;
  }
  .related-post .related-post-item-summary, .related-post-style-3 span {
    font-size: 79%;
  }
}
@media screen and (max-width: 320px) {
  .related-post-style-1 li a {
    line-height: 1.2em;
  }
  .related-post-style-3 {
    margin: 0 auto !important;
  }
  .related-post-style-3 li {
    margin: 0 auto 20px !important;
    padding: 0;
    width: 100%;
    float: none;
  }
  .related-post-style-3 li img {
    display: flex;
    align-items: center;
  }
  .related-post-style-3 .related-post-item-thumbnail {
    height: auto;
    margin: 0 auto 8px;
  }
  .related-post-style-3 a.related-post-item-title {
    line-height: 1.3em;
    font-size: 100% !important;
  }
}

Terakhir simpan.

Selanjutnya pergi ke tata letak, kemudian temukan Widget Related Posts tepat berada di bawah Widget Blog Post, Untuk mengaplikasikannya sebagai berikut
  1. Isi angka 1 atau terserah pada code
  2. numPosts
  3. Isi angka 1, 2 atau 3 pada code
  4. widgetStyle
  5. Isi angka 0 atau terserah pada code
  6. summaryLength

Catatan

Jika sobat menerapkan widget ini tetapi tidak mengikuti seluruh rangkaian tutorial yang saya jabarkan di atas dengan benar, maka dapat dipastikan pemasangannya akan gagal total.

Sumber: https://www.bungfrangki.com/2018/07/cara-pasang-related-posts-responsive.html
Sumber Script: https://www.dte.web.id/2013/07/widget-artikel-terkait-blogger-6-dalam-1.html

Hanya Blogger Pemula yang suka menulis dan membaca

Disqus Comments