Gambar: Related Post
Hai, apakah Sahabat Blogger ingin membuat fitur artikel terkait atau related post di bawah postingan blog Sahabat Blogger tetapi tidak tahu caranya karena masih pemula? Tenang, saya akan menuntun Sahabat Blogger untuk memasang script-nya sampai berhasil dengan penjelasan yang paling mudah Sahabat Blogger mengerti. Namun sebelumnya, simak penjelasan di bawah ini karena ada sedikit hal yang perlu Sahabat Blogger ketahui tentang pengaturan kecil yang bisa Sahabat Blogger atur sesuai dengan selera Sahabat Blogger .
Apa Itu Related Post atau Artikel Terkait?
Artikel terkait atau related post dalam bahasa Inggrisnya ialah sebuah fitur blog untuk menampilkan beberapa artikel yang sama atau serupa di halaman artikel yang sedang dibaca. Biasanya artikel terkait ini berada di bawah atau di akhir suatu postingan blog. Fungsi artikel terkait ini adalah untuk memudahkan pengunjung menemukan dan membaca artikel lainnya yang masih ada kaitannya dengan topik yang sama yang sedang dibaca. Related post juga berfungsi menuntun pengunjung blog dengan mudah dan cepat untuk membaca artikel lainnya yang masih berkaitan dengan artikel yang sedang dibaca tanpa perlu meng-klik sana-sini. Dengan memasang related post atau fitur artikel terkait di halaman blog, maka tampilan halaman (pageview) blog Sahabat Blogger juga ikut meningkat.
Namun, perlu diketahui, related post hanya akan muncul jika artikel-artikel topik yang serupa diberi label yang sama. Sekali pun blog Sahabat Blogger memiliki banyak artikel yang serupa, jika tidak diberi label yang sama, maka artikel yang serupa itu tidak akan ditampilakan di fitur related post, karena tidak ada data yang dikaitkan.
Untuk lebih jelasnya perhatikan gambar di bawah ini
zoom
pada gambar di atas bisa kita melihat artikel tersebut di beri label "blog," jika artikel lain diberi label yang sama, maka semua artikel dengan label yang sama itu dimungkinkan untuk ditampilakan di related post. Mengapa dimungkinkan bukan pasti? karena itu juga tergantung dari pengaturan berapa banyak artikel terkait yang Sahabat Blogger atur untuk ditampilkan pada script yang saya bagikan di bawah ini. Maksudnya begini, jika blog Sahabat Blogger mempunyai 30 artikel yang serupa dengan label yang sama, tetapi, di script related post, Sahabat Blogger menentukan jumlah yang ditampilkan 6, maka hanya 6 postingan serupa yang akan ditampilkan secara acak. Jika Sahabat Blogger masih bingung, Sahabat Blogger bisa melihat penjelasan di bawah. (lihat di kode script langkah 9)
Berikut Langkah-Langkah Pemasangan Related Post
1. Buka akun blog Sahabat Blogger
2. Klik tema
3. klik panah panah pada Costum
4. Klik edit tema
5. Klik sekali dalam script html
6. Tekan tombol ctrl (control) diikuti klik tombol F di keyboard komputer Sahabat Blogger . Jika sudah, maka di pojok atas kiri script html blog Sahabat Blogger akan muncul kolom pencarian, seperti yang diperlihatkan pada gambar di bawah ini
7. Ketik kode b:skin dalam kolom pencarian tersebut, lalu tekan tombol enter di keyboard komputer, maka kode b:skin akan di cari, biasanya terdapat 2 kode b:skin. Samakan dengan kode berikut
]]></b:skin> jika tidak sama dengan kode di atas, tekan enter lagi, sampai menemukan kode yang sama. Jika tidak ditemukan juga, cari saja kode ini </style>
8. Copy (salin) kode di bawah ini, lalu paste (tempel) tepat di atas kode ]]></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*/9. Masih pada tampilan yang sama, cari kode <data:post.body/> (caranya sama dengan sebelumnya). Biasanya kode <data:post.body/> ada dua atau lebih, jika hanya dua, salin kode di bawah ini kemudian tempelkan (paste) tepat di bawah kode <data:post.body/>
Keterangan script di bawah:
6 pada var jumlah = 6; ialah banyaknya artikel terkait ditampilkan. Silakan ubah sesuai keinginan Sahabat Blogger .
<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>10. Tekan tombol simpan
11. Bukan kembali tampilan blog Sahabat Blogger di internet, lalu klik refrest (segarkan).
Kemudian buka salah satu postingan Sahabat Blogger , cek di akhir postingan, apakah related post-nya sudah muncul, jika sudah muncul, selamat, Sahabat Blogger sudah berhasil memasang script related post.
Jika tidak muncul, refrest lah beberapa kali, jika tidak muncul juga tutuplah halaman blog, kemudian buka kembali (biasanya itu terjadi karena perubahan script-nya belum terbaca oleh blog).
Jika tidak muncul juga, mungkin ada kesalahan saat Sahabat Blogger menempelkan script, mungkin ada kode yang tidak ter-copy, pastikan tidak ada satu kode pun yang tidak ter-copy, atau mungkin juga salah penempatan copy-an, cek lagi dengan benar, atau bisa jadi, Sahabat Blogger punya lebih dari satu blog, yang Sahabat Blogger copy tadi bukan di blog yang Sahabat Blogger inginkan, mungkin di template blog yang lain, haha..
Salam
0 Komentar