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*/
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='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=relpostimgcuplik&max-results=25"'/>
</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>
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!!
