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 ). "
<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>
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....
Post a Comment