Tutorial Membuat Relate Post dibawah Postingan blog

Tutorial Membuat Relate Post di bawah Postingan blog

Salam Belajar | Sobat

Elementary-school | Sobat belajar yang terbaik, kali ini PojokSD ingin berbagi sedikit untuk mengenal HTML, yaitu Tutorial membuat Relate Post dibawah Postingan blog kita melalui Edit HTML di Blog kita. Sobat belajar mari kita belajar bersama dan terapkan dalam blog kita agar terlihat lebih elegan dan variatif tema dalam blog kita.

Berikut ulasannya, semoga bermanfaat buat panduan belajar bersama. Mari kita liat Proseduralnya Sobat PojokSD 😄😄😄

Langkah - langkah yang harus kita mulai :

Silahkan Log in ke Blogger.com
Selanjutnya Masuk menggunakan akun masing-masing Sobat.
berikutnya Silahkan Klik Tema, lalu pilih HTML (sebelum lanjut ke langkah selanjutnya silahkan Copas html Sobat untuk berjaga-jaga jika terjadi kesalahan dan simpan dalam notepad)
Lanjut...., setelah klik HTML silahkan sobat cari menu ]]></b:skin>, singkatnya silahkan lakukan pencarian dengan cara klik CTRL + F, lalu pastekan kode ]]></b:skin> lalu enter, setelah ditemukan kode ]]></b:skin>, silahkan pastekan kode dibawah ini diatas kode tersebut ( ]]></b:skin> ). "

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

Selanjutnya, cari kode <data:post.body/> pada kode ini biasanya terdapat beberapa kode <data:post.body/>, maka pilihlah antara kode yang kedua atau ketiga. Setelah ditemukan pastekan kode script dibawah ini tepat dibawah kode <data:post.body/>, berikut ini kode scriptnya :

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

Catatan :

var jumlah : jumlah varian yang ditampilkan

Lalu lakukan Pratinjau untuk meyakinkan Tema tersebut benar-benar seperti yang kita harapkan, setelah sesuai silakan Save/ Simpan.
Selesai

Demikian Tutorial membuat Relate Post dibawah postingan Blog kita, semoga bermanfaat dan menjadikan pembelajaran buat kita semua.

Salam belajar Sobat PojokSD 😊😊😊😊

Breaking

Wedding card

Tuesday, September 17, 2019