Cara Membuat Related Post Seperti di Template Re:Kanna

 

Sebenarnya CSS dan JS ini adalah buatan Igniel.com tapi yang akan saya bagikan ini adalah versi modifikasi nya. Kode nya saya ambil dari template Re:Kanna yang sangat terkenal di Asia Tenggara. Saya hanya merubah dan merapihkan kode CSS nya saja karena saya tidak bisa membaca JS nya.

Ok sekarang kita langsung aja ke cara pasangnya. Lagian ini ga bakal dibaca juga ya kan?

Cara Pasang Grid Related Post

• Salin CSS di dalam ]]></b:skin>

  /* Related Post Grid by igniel.com */
  #ignielRelated::-webkit-scrollbar{width:1px;height:4px;background:#ddd;}
  #ignielRelated::-webkit-scrollbar-thumb{background:$(main.color);}
  #ignielRelated{display:block;margin:20px 0;line-height:1.5em;overflow:auto}
  h3.title{color:white;font-size:17px;font-weight:600;line-height:initial;text-align:left;background:$(main.dark.color);border-radius:5px;padding:10px}
  h3.title span{padding:0 10px;color:white;position:relative;z-index:1}
  #ignielRelated ul{margin-left:15px;width:1014px;display:flex;flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap}
  #ignielRelated ul li{list-style:none;width:155px;border-radius:3px;clear:both;height:185px;text-align:center;margin-right:5.5pt;margin-bottom:9px;padding:0;-webkit-margin-start:0!important;position:relative;box-shadow:0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12);overflow:hidden}
  #ignielRelated ul li .thumb{overflow:hidden;line-height:0;border-radius:3px;position:relative}
  #ignielRelated ul li a{display:block;position:relative}
  #ignielRelated ul li a.judul{font-size:13px;text-shadow:1px 1px grey;position:absolute;text-align:center;width:100%;bottom:-25px;height:50px;padding:0px;font-weight:700;color:white;overflow:hidden}
  #ignielRelated ul li a.judul:hover,#ignielRelated ul li:hover a.judul{color:black;bottom:0;transition:0.5s;cursor:pointer;border:1px #fafafafa;border-top-left-radius:5px;background-color:#fafafafa;text-shadow:1px 1px white;border-top-right-radius:5px;}
  #ignielRelated ul li a img{width:100%;height:185px;transition:all .3s ease;object-fit:cover;border:0;margin:0;position:relative;overflow:hidden}
  #ignielRelated ul li a img:hover,#ignielRelated ul li:hover img{transform:scale(1.1) rotate(-5deg);filter:brightness(75%);-webkit-filter:brightness(75%)}
  #ignielRelated .norelated{text-align:center;font-weight:600}
  @media screen and (max-width:480px){#ignielRelated ul li{margin-right: 8px!important;margin-bottom: 16px;}#ignielRelated ul li:nth-of-type(3n){margin-right:15px}#ignielRelated ul li:nth-of-type(2n){margin-right:0}}
  .related-post h4{display:none}
  .at-dlbox{display:block;margin:10px auto}
  .post img.firstimage{width:100%;height:auto;max-width:100%;margin:auto;display:block}
  .post-body .separator:nth-child(1){display:none};

• Salin Code ini di bawah <data:post.body/> atau replace related post bawaan kamu

  
  <!--Related Post Grid Igniel.com--> 
  <b:if cond='data:view.isPost'>
   <h3 class='title'><span>Mungkin kamu suka</span></h3>
  <div id='ignielRelated'>
  <script>//<![CDATA[
        var jumlah = 6;
        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=["\\y","\\x\\1f\\f\\k\\h","\\f\\e\\q\\C\\h\\E","\\w","\\k\\q\\A\\e\\1Y\\1d\\P","\\x\\z\\U\\x\\h\\n\\k\\q\\C","","\\1l\\F\\k\\q","\\e\\q\\h\\n\\1E","\\P\\e\\e\\A","\\1H\\h","\\h\\k\\h\\f\\e","\\S\\F\\q\\h\\e\\q\\h","\\x\\z\\v\\v\\g\\n\\1E","\\v\\e\\A\\k\\g\\1H\\h\\E\\z\\v\\U\\q\\g\\k\\f","\\z\\n\\f","\\A\\g\\h\\g\\2n\\k\\v\\g\\C\\e\\D\\1f\\q\\C\\2q\\U\\g\\x\\e\\1M\\1z\\2p\\k\\1t\\1w\\1d\\1C\\1i\\2k\\2j\\2e\\C\\F\\b\\b\\b\\b\\1I\\1n\\Z\\E\\V\\Z\\C\\b\\b\\b\\b\\V\\b\\b\\b\\b\\1w\\O\\b\\1r\\b\\b\\b\\O\\W\\A\\1b\\2f\\e\\b\\b\\b\\b\\b\\1A\\1I\\O\\1n\\1t\\W\\1r\\O\\b\\1l\\U\\1z\\Z\\D\\C\\b\\b\\b\\b\\2h\\V\\f\\V\\W\\1t\\W\\1r\\v\\1T\\1d\\F\\n\\1M\\2g\\2b\\b\\b\\1B\\1X\\b\\1W\\1V\\1j\\1d\\1K\\1G\\1J\\b\\b\\b\\b\\b\\V\\f\\1K\\1J\\1k\\1n\\z\\W\\v\\O\\O","\\f\\k\\q\\1k","\\n\\e\\f","\\g\\f\\h\\e\\n\\q\\g\\h\\e","\\E\\n\\e\\P","\\n\\g\\q\\A\\F\\v","\\P\\f\\F\\F\\n","\\Z\\1C\\1B","\\y\\f\\k\\w","\\y\\A\\k\\1j\\K\\S\\f\\g\\x\\x\\I\\p\\h\\E\\z\\v\\U\\p\\w\\y\\g\\K\\E\\n\\e\\P\\I\\p","\\p\\K\\h\\k\\h\\f\\e\\I\\p","\\p\\w\\y\\k\\v\\C\\K\\x\\n\\S\\I\\p","\\D\\1i\\1b\\2a\\1b\\X\\E\\1b\\1G\\1A\\X\\1f\\X\\1k\\X\\q\\F\\X\\q\\z","\\n\\e\\1f\\f\\g\\S\\e","\\p\\K\\g\\f\\h\\I\\p","\\p\\D\\w\\y\\D\\g\\w\\y\\D\\A\\k\\1j\\w","\\y\\g\\K\\E\\n\\e\\P\\I\\p","\\p\\K\\S\\f\\g\\x\\x\\I\\p\\1l\\z\\A\\z\\f\\p\\w","\\y\\D\\g\\w","\\y\\D\\f\\k\\w","\\1i\\n\\k\\h\\e"];d Q=0,l=J H(),r=J H(),B=J H();1c 2l(t,T){d i=t[a[1]](a[0]);N(d j=0;j<i[a[2]];j++){u(i[j][a[4]](a[3])!=-1){i[j]=i[j][a[5]](i[j][a[4]](a[3])+1,i[j][a[2]])}};i=i[a[7]](a[6]);i=i[a[5]](0,T-1);1q i}1c 2d(T){N(d i=0;i<T[a[9]][a[8]][a[2]];i++){d t=T[a[9]][a[8]][i];l[Q]=t[a[11]][a[10]];1g=a[6];u(a[12]1h t){1g=t[a[12]][a[10]]}1s{u(a[13]1h t){1g=t[a[13]][a[10]]}};u(a[14]1h t){1m=t[a[14]][a[15]]}1s{1m=a[16]};B[Q]=1m;N(d j=0;j<t[a[17]][a[2]];j++){u(t[a[17]][j][a[18]]==a[19]){r[Q]=t[a[17]][j][a[20]];1o}};Q++}}1c 1L(1p,i){N(d j=0;j<1p[a[2]];j++){u(1p[j]==i){1q 1Q}};1q 1P}1c 1R(){d L=J H(0);d R=J H(0);d 1N=J H(0);d Y=J H(0);N(d m=0;m<r[a[2]];m++){u(!1L(L,r[m])){L[a[2]]+=1;L[L[a[2]]-1]=r[m];R[a[2]]+=1;R[R[a[2]]-1]=l[m];1N[a[2]]+=1;Y[a[2]]+=1;Y[Y[a[2]]-1]=B[m]}};l=R;r=L;B=Y;N(d m=0;m<l[a[2]];m++){d G=1a[a[22]]((l[a[2]]-1)*1a[a[21]]());d 1O=l[m];d 1F=r[m];d 1v=B[m];l[m]=l[G];r[m]=r[G];B[m]=B[G];l[G]=1O;r[G]=1F;B[G]=1v};d 1e=0;d o=1a[a[22]]((l[a[2]]-1)*1a[a[21]]());d 1D=o;d M;d 1y=1u[a[23]];2i(1e<1x){u(r[o]!=1y){M=a[24];M+=a[25]+r[o]+a[26]+l[o]+a[27]+B[o][a[29]](/\\/s[0-9]+(\\-c)?/,a[28])+a[2o]+l[o]+a[26]+l[o]+a[2c];M+=a[2m]+r[o]+a[2r]+l[o]+a[1Z];M+=a[1S];1u[a[1U]](M);1e++;u(1e==1x){1o}};u(o<l[a[2]]-1){o++}1s{o=0};u(o==1D){1o}}}',62,152,'||||||||||_0x91f7|x41||var|x65|x6C|x61|x74|_0x46aax8|_0x46aax9|x69|judul|_0x46aax12|x72|_0x46aax18|x27|x6E|urls||_0x46aax6|if|x6D|x3E|x73|x3C|x75|x64|gambar|x67|x2F|x68|x6F|_0x46aax13|Array|x3D|new|x20|_0x46aaxe|_0x46aax1a|for|x43|x66|rel|_0x46aaxf|x63|_0x46aax7|x62|x45|x51|x2D|_0x46aax11|x55|||||||||||Math|x31|function|x4F|_0x46aax17|x70|postcontent|in|x77|x76|x6B|x6A|postimg|x53|break|_0x46aaxc|return|x49|else|x56|document|_0x46aax16|x42|jumlah|_0x46aax1b|x34|x33|x4C|x52|_0x46aax19|x79|_0x46aax15|x32|x24|x4E|x54|x46|contains|x36|_0x46aax10|_0x46aax14|false|true|ignielRelatedGrid|35|x57|36|x37|x58|x2B|x78|34|||||||||||x39|x48|31|relpostimgcuplik|x47|x50|x38|x44|while|x4B|x30|filter|32|x3A|30|x2C|x3B|33'.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&callback=relpostimgcuplik&max-results=25"'/>
        </b:loop>
        <ul>
          <script>ignielRelatedGrid();</script>
        </ul>
        <b:else/>
        Tidak ada post berkaitan dalam kategori ini.
      </b:if>
    </div>
  <div class='clear'/>
    </b:if>
  

• Selesai

Untuk JS silahkan edit variable jumlah sesuai kebutuhan kamu.

Sekian untuk guide kali ini silahkan komentar jika ada pertanyaan dan silahkan request jika ingin tutorial seperti ini lagi.