Cara Membuat Related Post Grid Responsive di Blogger

Related Post biasa disebut juga Artikel Terkait berfungsi menampilkan artikel yang terkait dengan yang kita baca. Related Post ini bisa dibilang User Freandly karena memudahkan pengunjung untuk membaca artikel-artikel yang masih dalam satu topik yang sama. Related post juga menuntun pengunjung blog kita menuju postingan atau artikel yang lain dan yang berkaitan dengan postingan yang mereka lihat. Jadi pengunjung dapat membaca artikel selanjutnya dengan topik yang sama karena diakhir postingan related post ini muncul. Dengan memasang related post kemungkinan dapat meningkatkan pageview blog anda meningkat.

Screenshoot 1 :

Screenshoot 2 :

Cara Membuat Related Post Grid Responsive di Blogger

Cara Pertama :

1. Buka Blogger - Kemudian Login
2. Dashboard - Tema.
3. Pilih Edit HTML.

Proses Pembuatan :

1. Temukan kode ]]></b:skin> atau </style>
2. Copy & Paste kode berikut ini dan letakkan kode ini diatas kode ]]></b:skin> atau </style>

/* CSS Related Posts Start */
#mdRelated {
    display: block;
    margin: 20px 0px;
    line-height: 1.5em;
}

#mdRelated h3.title {
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    text-transform: uppercase;
    line-height: initial;
}

#mdRelated h3.title span {
    background-color: #fff;
    padding: 0px 15px;
    position: relative;
    z-index: 1;
}

#mdRelated h3.title:before {
    content: '';
    display: block;
    position: relative;
    top: 10px;
    width: 100%;
    border-top: 2px solid #cccccc;
}

#mdRelated ul {
    margin: 20px 0px 0px;
    padding: 0px;
    display: flex;
    display: -webkit-flex;
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
}

#mdRelated ul li {
    list-style: none;
    width: calc((100% / 3) - 15px);
    text-align: center;
    margin-right: 20px;
    margin-bottom: 20px;
    padding: 0px;
    -webkit-margin-start: 0px !important;
}

#mdRelated ul li .thumb {
    overflow: hidden;
    line-height: 0px;
    border-radius: 7px;
}

#mdRelated ul li:nth-of-type(3n) {
    margin-right: 0px;
}

#mdRelated ul li a {
    display: block;
}

#mdRelated ul li a.judul {
    color: #000;
    font-weight: 600;
    margin-top: 7px;
}

#mdRelated ul li a.judul:hover,#mdRelated ul li:hover a.judul {
    color: #3498db;
}

#mdRelated ul li a img {
    width: 100%;
    max-height: 143px;
    transition: all .3s ease;
    border: 0px;
    margin: 0px;
}

#mdRelated .norelated {
    text-align: center;
    font-weight: 600;
}

@media screen and (max-width:480px) {
    #mdRelated ul li {
        width: calc((100% / 2) - 7.5px);
        margin-right: 15px;
        margin-bottom: 15px;
    }

    #mdRelated ul li:nth-of-type(3n) {
        margin-right: 15px;
    }

    #mdRelated ul li:nth-of-type(2n) {
        margin-right: 0px;
    }
}
/* CSS Related Posts End*/

3. Temukan lagi kode <data:post.body/>

Biasanya kode ini lebih dari satu, silakan Anda pilih yang kedua atau ketiga. Atau Anda bisa meletakan kode berikut ini dibawah tombol share yang sudah ada di template Anda.

4. Copy & Paste kode berikut ini dan letakkan kode ini bawah kode <data:post.body/>

<b:if cond='data:view.isPost'>
  <div id='mdRelated'>
    <h3 class='title'><span>ARTIKEL TERBARU</span></h3>
    <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|mdRelatedGrid|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='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=relpostimgcuplik&amp;max-results=25&quot;'/>
      </b:loop>
      <ul>
        <script>mdRelatedGrid();</script>
      </ul>
      <b:else/>
      There is no other posts in this category.
    </b:if>
  </div>
<div class='clear'/>
</b:if>

4. Simpan Template.

Demikian, bila Anda mengalami kesalahan atau ada yang ingin dipertanyakan silakan jangan sungkan untuk berkomentar dibawah ini. Semoga Bermanfaat! Thanks for Reading : Cara Membuat Related Post Grid Responsive di Blogger

Share this post

Related Post