Related Post dengan Thumbnail Model List di Bawah Postingan Blogspot

Related Post List


Keberadaan Related Post di Bawah postingan blog baik yang model List atau model Grid menunjukkan  perhatian dari seorang pengelola blog terhadap kebutuhan para pengunjung, sehingga dirinya mau menautkan artikel yang sedang dibaca visitor dengan artikel terkait yang masih ada hubungannya dengan artikel yang dibaca seorang pengunjung.

Penyertaan Related Post  pada sebuah Blog, model dan bentuknya bermacam-macam ada yang berbentuk Grid ada yang berbentuk List, keduanya ini menyertakan gambar thumbnail. Bahkan ada juga yang hanya berbentuk tulisan tanpa menyertakan gambar.

Tujuan dari adanya Related Post tidak lain adalah untuk membuat pengunjung blog kita bisa lebih lama berada dalam blog karena dia sudah menemukan artikel terkait dengan permasalahan yang sedang dia cari karena kita telah menyediakan Artikel terkait. Sehingga dia tidak Beranjak Pergi dari blog kita.

Bay the way, Related Post yang saya uraikan di sini adalah untuk template Non-AMP, bukan untuk Template Valid AMP. Karena Antara Template Non-AMP dan Valid AMP itu Berbeda

Artikel terkait atau Related Post dibuat untuk mengelompokkan konten berdasarkan label yang sama

Contohnya begini

Anda menulis konten, lalu mengelompokkan konten tersebut pada Label Blogger, maka Related Post yang yang akan muncul di bawah postingan kelompok label Blogger, bukan yang lain.
Oke langsung saja, kita ke praktik penerapannya

Related Post dengan Thumbnail Model List di Bawah Postingan Blogspot

Cara Membuat Related Post Model List


1. Login ke akun Blogger kita dan pilih menu TEMA => Edit HTML

2. Taruh Kode CSS di bawah ini di atas ]]></b:skin> atau </style>


/* Related Post List by suhux.com */
#suhuxRelatedList{
  display:block;
  margin:20px 0px;
  line-height:1.25em;
}
#suhuxRelatedList h3.title{
  font-size:16px;
  font-weight:600;
  text-align:center;
  text-transform:uppercase;
  line-height:initial;
}
#suhuxRelatedList h3.title span{
  background-color:#fff;
  padding:0px 15px;
  position:relative;
  z-index:1;
}
#suhuxRelatedList h3.title:before{
  content: '';
  display: block;
  position: relative;
  top:10px;
  width: 100%;
  border-top: 2px solid #cccccc;
}
#suhuxRelatedList ul{
  margin:20px 0px 0px;
  padding:0px;
}
#suhuxRelatedList ul li{
  list-style:none;
  margin-bottom:15px;
  padding-bottom:15px;
  border-bottom:1px solid #ccc;
  -webkit-margin-start:0px !important;
  display:inline-block;
  width:100%;
  clear:both;
}
#suhuxRelatedList ul li:last-child{
  border:0px;
  padding:0px;
}
#suhuxRelatedList ul li .thumb{
  overflow:hidden;
  line-height:0px;
  border-radius:7px;
  float:left;
  margin-right:15px;
}
#suhuxRelatedList ul li a{
  display:block;
}
#suhuxRelatedList ul li a.judul{
  color:#000; /* Warna Huruf */
  font-weight:600;
  font-size:16px;
  overflow:hidden;
  line-height:1.25em;
}
#suhuxRelatedList ul li .snippet{
  color:#444;
  font-size:13px;
  overflow:hidden;
  margin:7px 0px 0px;
  padding:0px;
}
#suhuxRelatedList ul li a.judul:hover, #suhuxRelatedList ul li:hover a.judul{
  color:#ff5722; /* Warna Huruf Ketika Disorot */
}
#suhuxRelatedList ul li a img{
  width:120px;
  height:90px;
  transition:all .3s ease;
  border:0px;
  margin:0px;
}
#suhuxRelatedList ul li a img:hover, #suhuxRelatedList ul li:hover img{
  transform:scale(1.1) rotate(-5deg);
  filter: brightness(75%);
  -webkit-filter: brightness(75%);
}
#suhuxRelatedList .norelated{
  text-align:center;
  font-weight:600;
}
@media screen and (max-width:480px){
  #suhuxRelatedList ul li a.judul{
    font-size:14px;
  }
  #suhuxRelatedList ul li .snippet{
    font-size:12px;
  }
}

3. Kalau sudah, silahkan cari Kode ini

<b:includable id='relatedpost' var='post'>...</b:includable>

Agar lebih cepat gunakan CTRL+F

4. Silahkan hapus kode tersebut dan ganti dengan kode ini

<b:includable id='relatedpost' var='post'>
<!-- Related Post List by suhux.com -->
<b:if cond='data:view.isPost'>
  <div id='suhuxRelatedList'>
    <h3 class='title'><span>Related Posts</span></h3>
    <script>//<![CDATA[
      var jumlah = 6;
      var kata = 150;
      eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\b'+e(c)+'\b','g'),k[c])}}return p}('d a=["\w","\q\L\g\j\h","\g\e\l\I\h\G","\v","\j\l\D\e\1X\1d\T","\q\E\Z\q\h\p\j\l\I","","\1o\K\j\l","\e\l\h\p\1x","\T\e\e\D","\1E\h","\h\j\h\g\e","\Q\K\l\h\e\l\h","\q\E\z\z\f\p\1x","\z\e\D\j\f\1E\h\G\E\z\Z\l\f\j\g","\E\p\g","\D\f\h\f\2p\j\z\f\I\e\C\L\l\I\2n\Z\f\q\e\1K\1G\2q\j\1u\1B\1d\1N\1j\1r\2r\2u\I\K\b\b\b\b\1H\1n\1g\G\W\1g\I\b\b\b\b\W\b\b\b\b\1B\O\b\1v\b\b\b\O\1a\D\1P\2c\e\b\b\b\b\b\2s\1H\O\1n\1u\1a\1v\O\b\1o\Z\1G\1g\C\I\b\b\b\b\2l\W\g\W\1a\1u\1a\1v\z\2d\1d\K\p\1K\2k\2t\b\b\1M\2i\b\2j\2g\1p\1d\1Q\1S\1J\b\b\b\b\b\W\g\1Q\1J\1q\1n\E\1a\z\O\O","\g\j\l\1q","\p\e\g","\f\g\h\e\p\l\f\h\e","\G\p\e\T","\p\f\l\D\K\z","\T\g\K\K\p","\1g\1N\1M","\w\g\j\v","\w\D\j\1p\y\Q\g\f\q\q\M\n\h\G\E\z\Z\n\v\w\f\y\G\p\e\T\M\n","\n\y\h\j\h\g\e\M\n","\n\v\w\j\z\I\y\q\p\Q\M\n","\C\1j\1P\1S\1r\1b\G\1Z\1r\1b\L\1b\1q\1b\l\K\1b\l\E","\p\e\L\g\f\Q\e","\n\y\f\g\h\M\n","\n\C\v\w\C\f\v\w\C\D\j\1p\v","\w\f\y\G\p\e\T\M\n","\n\y\Q\g\f\q\q\M\n\1o\E\D\E\g\n\v","\w\C\f\v","\w\q\L\f\l\y\Q\g\f\q\q\M\n\q\l\j\L\L\e\h\n\v","\y\1m\1m\1m\y\w\C\q\L\f\l\v","\w\C\g\j\v","\1j\p\j\h\e"];d R=0,o=J H(),u=J H(),B=J H();F=J H();1c 1O(t,Y){d k=t[a[1]](a[0]);P(d m=0;m<k[a[2]];m++){x(k[m][a[4]](a[3])!=-1){k[m]=k[m][a[5]](k[m][a[4]](a[3])+1,k[m][a[2]])}};k=k[a[7]](a[6]);k=k[a[5]](0,Y-1);1t k}1c 2f(Y){P(d k=0;k<Y[a[9]][a[8]][a[2]];k++){d t=Y[a[9]][a[8]][k];o[R]=t[a[11]][a[10]];1h=a[6];x(a[12]1i t){1h=t[a[12]][a[10]]}1w{x(a[13]1i t){1h=t[a[13]][a[10]]}};F[R]=1O(1h,2h);x(a[14]1i t){1l=t[a[14]][a[15]]}1w{1l=a[16]};B[R]=1l;P(d m=0;m<t[a[17]][a[2]];m++){x(t[a[17]][m][a[18]]==a[19]){u[R]=t[a[17]][m][a[20]];1k}};R++}}1c 1R(1s,k){P(d m=0;m<1s[a[2]];m++){x(1s[m]==k){1t!0}};1t!1}1c 2e(){d S=J H(0);d V=J H(0);d U=J H(0);d X=J H(0);P(d i=0;i<u[a[2]];i++){x(!1R(S,u[i])){S[a[2]]+=1;S[S[a[2]]-1]=u[i];V[a[2]]+=1;V[V[a[2]]-1]=o[i];U[a[2]]+=1;U[U[a[2]]-1]=F[i];X[a[2]]+=1;X[X[a[2]]-1]=B[i]}};o=V;u=S;F=U;B=X;P(d i=0;i<o[a[2]];i++){d A=1e[a[22]]((o[a[2]]-1)*1e[a[21]]());d 1F=o[i];d 1I=u[i];d 1A=F[i];d 1z=B[i];o[i]=o[A];u[i]=u[A];F[i]=F[A];B[i]=B[A];o[A]=1F;u[A]=1I;F[A]=1A;B[A]=1z};d 1f=0;d r=1e[a[22]]((o[a[2]]-1)*1e[a[21]]());d 1L=r;d N;d 1D=1y[a[23]];2m(1f<1C){x(u[r]!=1D){N=a[24];N+=a[25]+u[r]+a[26]+o[r]+a[27]+B[r][a[29]](/\/s[0-9]+(\-c)?/,a[28])+a[2o]+o[r]+a[26]+o[r]+a[2v];N+=a[1Y]+u[r]+a[1T]+o[r]+a[1U];N+=a[1V]+F[r]+a[1W];N+=a[2b];1y[a[2a]](N);1f++;x(1f==1C){1k}};x(r<o[a[2]]-1){r++}1w{r=0};x(r==1L){1k}}}',62,156,'||||||||||_0x7d7f|x41||var|x65|x61|x6C|x74|_0x8ebex12|x69|_0x8ebex8|x6E|_0x8ebex9|x27|judul|x72|x73|_0x8ebex19||_0x8ebex6|urls|x3E|x3C|if|x20|x6D|_0x8ebex13|gambar|x2F|x64|x75|snippet|x68|Array|x67|new|x6F|x70|x3D|_0x8ebex1b|x43|for|x63|rel|_0x8ebexe|x66|_0x8ebex10|_0x8ebexf|x45|_0x8ebex11|_0x8ebex7|x62|||||||||||x51|x2D|function|x4F|Math|_0x8ebex18|x55|postcontent|in|x77|break|postimg|x2E|x53|x6A|x76|x6B|x30|_0x8ebexc|return|x56|x49|else|x79|document|_0x8ebex17|_0x8ebex16|x42|jumlah|_0x8ebex1c|x24|_0x8ebex14|x34|x4E|_0x8ebex15|x54|x36|_0x8ebex1a|x4C|x52|filter|x31|x46|contains|x32|33|34|35|36|x78|32|x39|||||||||||38|37|x50|x57|suhuxRelatedList|relpostimgcuplik|x37|kata|x2B|x58|x38|x44|while|x3B|30|x3A|x2C|x4B|x33|x48|x47|31'.split('|'),0,{}));
      //]]></script>
    <b:if cond='data:post.labels'>
      <b:loop values='data:post.labels' var='label'>
        <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&amp;callback=relpostimgcuplik&amp;max-results=25"'/>
      </b:loop>
      <ul>
        <script>suhuxRelatedList();</script>
      </ul>
      <b:else/>
      There is no other posts in this category.
    </b:if>
  </div>
  <div class='clear'/>
</b:if>
</b:includable>

5. Klik Simpan dan lihat hasilnya
Menyimpan Kode HTML tersebut di atas, di bawah <data:post.body/> Bisa saja, tapi anda akan menyisakan Kode HTML yang tak di gunakan di Template, dan itu akan menjadi beban yang memberatkan pada loading blog anda.

var jumlah: jumlah artikel terkait yang ingin dimunculkan.
var kata : jumlah karakter /huruf pada Sinippet

Mungkin sekian dulu artikel dari Cara Membuat Related Post dengan Thumnail Model List, semoga bermanfaat dan Terima kasih

Jika ada yang belum dimengerti, silahkan ditanyakan di kolom komentar
data:post.title
Seseorang yang lebih suka menulis dan membagikan apa yang di tuliskan agar dunia tahu.
  • Facebook
  • WhatsApp
  • Instagram
  • Berlangganan update artikel terbaru via email:

    0 Response to "Related Post dengan Thumbnail Model List di Bawah Postingan Blogspot"

    Post a comment