Cara Membuat Related Post Style Grid di Bawah Postingan

adscblog

Cara Membuat Related Post mennjadi Grid di bawah Postingan Blog - Pada Artikel sebelum nya saya telah men share tentang cara pembuatan Related Post ini,dan Juga sebelum nya saya pernah Share tentang cara pembuatan Related Post menyerupai Iklan Matched Content yang di Keluarkan untuk contoh nya bisa sobat lihat di artikel sebelum nya ini

Nah untuk anda yang ingin membuat tampilan Related Post menjadi Grid kali ini saya akan berbagi cara pembuatan Related Post tersebut,seperti yang kita ketahui Related Post peranan nya sangat penting sekali untuk  kita pasang di bagian Postingan

Selain untuk mengetahui Artikel mana saja yang berkaitan dengan Postingan yang sedang di baca Oleh Para Pengujung Related Post ini Juga untuk memudahkan Para pengunjung membaca Artikel lain nya yang mungkin tertarik untuk di baca oleh para pengujung

Related Post ini banyak sekali Macam atau Variasi nya mulain dari Penempatan Gambar atau Thumbnail nya atau juga yang hanya menampilkan Link nya saja,selain itu juga Related Post ini Pada Umum nya di pasang di bagian bawah Postingan blog

Namun Tidak sedikit Para blogger yang memasang Related Post ini berada di bagian tengan Postingan blog sehingga memudah kan para pengujung untuk terus bisa menelusuri Isi blog yang kita miliki

Cara Pembuatan Related Post dengan Tampilan Grid di bawah Postingan Blog

Namun Untuk sobat blogger yang tertarik dengan Related Post yang saya share ini dan Contoh nya bisa di lihat di bagian Gambar yang berada di bagian atas Postingan ini,dan untuk pembuatan nya bisa sobat ikuti langkah-langkah penerapan nya sebagai berikut

• Silahkan Sobat Masuk Ke DashBoard Blogger
• Kemudian Silahkan SObat pilih Blog sobat kemudian Tema>Edit Html
• Setelah berada di bagian edit HTML silahkan sobat Masukan CSS berikut

/* 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*/

• Lalu kemudian silahkan sobat Carai kode <data:post.body/> dan letakan kode berikut di bawah kode tersebut

<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>

• Save Template dan lihat Hasil nya

 Nah itulah cara Pembuatan Related Post dengan Tampilan Grid di bawah Postingan Blog,semoga artikel nya dapat membantu sobat blogger semua,selamat mencoba dan salam blogger

adscblog

Recommendation Apps

ads1

Previous

Posting Lebih Baru

Next

Posting Lama

Posted by Dede Ubed, Published at 02 Mei and have 0 komentar