Cara Membuat Related Post Grid di Blogger

Cara Membuat Related Post Grid di Blogger
Cara Membuat Related Post Grid di Blogger
Imamkunblog.com | Artikel Terkait atau related post adalah sebuah fitur yang berfungsi untuk menampilkan artikel terkait yang akan dibaca sesuai dengan lebel artikel. Related Post terdapat dua jenis yaitu berbentuk Vertikal dan berbentuk Grid.

Pada artikel ini saya membagikan cara membuat related post berbentuk Grid Responsive di Blogger. Related Post kali ini sudah 100% responsive di perangkat Dekstop maupun Mobile. 

Fungsi lain apabila anda menggunakn Related Post pada template blog anda adalah dapat menuntun para pengunjung untuk membaca artikel menarik lainnya yang berkaitan dengan artikel yang mereka baca. Jadi dengan memasang Related Post di Blog dapat meningkatkan PV (Page View) blog anda.

Baiklah tidak perlu berlama-lama lagi langsung saja kita mulai membuat related Post grid di blog, silahkan simak berikut ini tutorialnya.

Cara Membuat Related Post Grid Responsive di Blogger


1. Pertama, login ke Blogger.com
2. Pada Dashboard pilih Theme/Tema > Edit HTML
3. Cari kode ]]></b:skin> atau kode </style>
4. Jika sudah ketemu copy dan pastekan kode CSS dibawah ini tepat kode diatas yang telah anda temukan.

/* 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*/
5. Berikutnya cari lagi kode <data:post.body/>

Untuk kode tersebut biasanya ada lebih dari satu, anda dapat menggunakan kode yang kedua atau ketiga untuk meletakkan kode html nantinya.

6. Copy dan Pastekan code HTML dibawah ini tepat dibawah 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>
7. Terakhir Simpan Template dan lihat hasilnya!!

Baca Juga: Cara Membuat Widget Popular Posts Keren di Blogger

Demikianlah artikel kali ini Cara Membuat Artikel Terkait di Blogger Responsive. Seperti itulah proses membuat Related Posts di Blogger. Apabila anda mengalami masalah pada proses pemasangan, silahkan komentar dibawah ya!!
Show comments
Hide comments

0 Response to "Cara Membuat Related Post Grid di Blogger"

Post a Comment

Berkomentar dengan Baik dan Jangan Buat Spam
1. Tidak semua pertanyaan sempat atau bisa dijawab.
3. Bagi yang mau tanya, sebelum bertanya, silakan cari dulu di Kotak Pencarian di Sidebar.
Thanks for visiting and the comment :)

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Adblock Detected

Like this blog? Keep us running by whitelisting this blog in your ad blocker

This is how to whitelisting this blog in your ad blocker

Thank you

×