Cara Menambahkan Related Post Pada Akhir Postingan ~ Inspirasi Generasi Milenial Mewujudkan Mimpi

Cara Menambahkan Related Post Pada Akhir Postingan

Menambahkan Related Post Pada Akhir Postingan di Blogger

Sobat OW | tercinta....

Memiliki blog yang manis serta bisa menampilkan konten yang dicari oleh pengunjung dengan rapi adalah idaman dan impian semua blogger. Cara untuk bisa mewujudkannya salah satunya bisa Sobat tempuh dengan eksekusi postingan yang satu ini, yaitu mengenai Related Post.

Sebelum kita melangkah lebih jauh, perlu Sobat ketahui terlebih dahulu bahwa yang dimaksud dengan Related Post (Artikel Terkait) adalah sebuah kode script sesuai namanya yang bisa menampilkan artikel terkait yang terdpaat kemiripan atau kesamaan dalam pembahasan ataupun pembicaraannya dengan artikel yang saat ini dikunjungi oleh pengunjung blog kita.

Misal, saat ini Sobat sedang mengunjungi sebuah blog tentang RPP Matematika, maka bisa jadi pada rangkaian pengaturan "Related Post" yang muncul diantaranya berisi sebuah judul postingan kita yang ada kaitannya dengan RPP Matematika, seperti Membuat RPP Matematika Dengan Mudah Untuk Kelas X SMA, atau RPP Bahasa Indonesia Untuk SMA Kelas XI, dan lain sebagainya.... 

Nach, itu tadi sedikit penjelasan mengenai Related Post, dan mudah-mudahan bisa Sobat pahami. Selanjutnya bagaimana agar blog kita bisa memiliki Related Post ? Ikuti dan praktekkan langsung saja postingan berikut.

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

  • 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)
  • Klik kiri dimana saja diarea template mode HTML tadi

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

Lanjut...., silahkan sobat cari menu ]]></b:skin> atau </style> singkatnya silahkan lakukan pencarian dengan cara CTRL + F, lalu pastekan kode ]]></b:skin> atau </style> lalu enter, setelah ditemukan kode ]]></b:skin>,  silahkan pastekan kode dibawah ini diatas kode tersebut ( ]]></b:skin> atau </style> pada bagian head template ). "
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 adalah 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='&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>

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

Catatan :
var jumlah : jumlah varian yang nantinya akan ditampilkan di blog
Demikian informasi mengenai Cara Menambahkan Relate Post Pada Akhir Postingan di Blogger yang bisa Admin bagikan. Terima kasih atas kunjungannya, dan dinantikan kunjungan berikutnya.

Semoga bermanfaat....
Share:

No comments:

Post a Comment

Popular Posts

Labels

Recent Posts

Followers

Pageviews

Theme Support

Need our help to upload or customize this blogger template? Contact me with details about the theme customization you need.