
Saya mau berbagi script yang baru berhasil dibuat, berhubung sepertinya memang belum ada script sejenis ini. Fungsinya untuk menyisipkan banyak related post sekaligus ke dalam postingan. Logikanya sama dengan pasang banyak iklan AdSense sekaligus, dimana kamu bebas menentukan seberapa banyak related post yang ingin ditampilkan.
Biasanya related post hanya tampil dalam satu tempat, misalnya berjumlah 4 buah dan disimpan tepat di tengah seperti di tutorial cara pasang related post tengah postingan. Contohnya begini:
Paragraf satu.
Paragraf dua.
Paragraf tiga.
Paragraf empat.
<!-- Related Post -->
Paragraf lima.
Paragraf enam.
Paragraf tujuh.
Paragraf delapan.
Namun dengan tutorial kali ini, keberadaan related post akan disebar satu per satu dan disisipkan di antara paragraf. Jumlahnya bisa kamu atur, mau menampilkan 3, 5, atau bahkan 10 pun bisa. Berikut contoh jika memasukkan 3 buah:
Paragraf satu.
Paragraf dua.
<!-- Related Post -->
Paragraf tiga.
Paragraf empat.
<!-- Related Post -->
Paragraf lima.
Paragraf enam.
<!-- Related Post -->
Paragraf tujuh.
Paragraf delapan.
Menurut saya sih bagus karena rekomendasi artikel sejenis akan selalu muncul di banyak tempat, tidak terfokus di tengah saja.
Menyisipkan Banyak Artikel Terkait ke dalam Artikel Blogger
Cari kode <data:post.body/>
dan simpan semua kode berikut tepat DI BAWAHNYA. Jika ada banyak, pilih yang berada dalam tag kondisional halaman post.
<b:if cond='data:view.isPost'>
<script> //<![CDATA[
// Multiple Related Posts by igniel.com
(function() {
var jumlah = 4;
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}('Z i=["\\J\\v\\l\\s\\j\\E\\t\\l\\q\\x\\w\\t\\n\\14\\w\\J\\v\\l\\s\\j\\E\\t\\l\\q\\x\\w\\v","\\X\\F\\h\\n\\x\\D\\h\\k\\h\\A\\j\\l\\n\\T\\k\\k","\\k\\h\\m\\B\\j\\U","\\G\\n\\l\\u","\\q\\o\\L","\\A\\n\\h\\r\\j\\h\\K\\k\\h\\u\\h\\m\\j","\\A\\k\\r\\s\\s\\z\\r\\u\\h","\\o\\B\\m\\o\\h\\k\\M\\F\\k\\j\\o\\O\\h\\k\\r\\j\\h\\q","\\m\\l\\q\\h\\z\\r\\u\\h","\\P","\\o\\m\\s\\h\\n\\j\\R\\h\\G\\l\\n\\h","\\v\\r\\n\\h\\m\\j\\z\\l\\q\\h","\\m\\h\\N\\j\\D\\o\\t\\k\\o\\m\\B"];y p=I[i[1]](i[0]),a=C+1,b=p[i[2]]/a;c=V[i[3]]({W:C},(15,H)=>H+1);Y(y d=0;d<c[i[2]];d++){y e=c[d],f=13((b*e)),g=I[i[5]](i[4]);g[i[6]]=i[7];S(p[f][i[8]]==i[9]){p[f][i[11]][i[10]](g,p[f])}Q{p[f][i[11]][i[10]](g,p[f][i[12]])}}',62,68,'|||||||||||||||||x65|_0xe7e5|x74|x6C|x6F|x6E|x72|x69|post|x64|x61|x73|x62|x6D|x70|x20|x79|let|x4E|x63|x67|jumlah|x53|x2D|x75|x66|_0x67aex5|document|x2E|x45|x76|x4D|x78|x52|x50|else|x42|if|x41|x68|Array|length|x71|for|var||||parseInt|x2C|_0x67aex4'.split('|'),0,{}));
})();
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}('a 9=["\\i\\c\\l\\L\\d\\C","\\c\\l\\d\\k\\H","\\x\\c\\c\\K","\\F\\d","\\d\\w\\d\\i\\c","\\i\\w\\l\\M","\\k\\c\\i","\\z\\i\\d\\c\\k\\l\\z\\d\\c","\\C\\k\\c\\x"];a n=o p();a m=0;a f=o p();t E(u){r(a b=0;b<u[9[2]][9[1]][9[0]];b++){a j=u[9[2]][9[1]][b];n[m]=j[9[4]][9[3]];r(a h=0;h<j[9[5]][9[0]];h++){s(j[9[5]][h][9[6]]==9[7]){f[m]=j[9[5]][h][9[8]];m++;I}}}}t G(){a e=o p(0);a g=o p(0);r(a b=0;b<f[9[0]];b++){s(!B(e,f[b])){e[9[0]]+=1;e[e[9[0]]-1]=f[b];g[9[0]]+=1;g[g[9[0]]-1]=n[b]}};n=g;f=e}t B(v,y){r(a q=0;q<v[9[0]];q++){s(v[q]==y){A D}};A J}',49,49,'|||||||||_0x6cd8|var|_0x941ax6|x65|x74|_0x941axa|relatedUrls|_0x941axb|_0x941ax8|x6C|_0x941ax7|x72|x6E|relatedTitlesNum|relatedTitles|new|Array|_0x941axf|for|if|function|_0x941ax5|_0x941axd|x69|x66|_0x941axe|x61|return|contains|x68|true|related_results_labels|x24|removeRelatedDuplicates|x79|break|false|x64|x67|x6B'.split('|'),0,{}));
//]]> </script>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:view.isPost'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=100"'/>
</b:if>
</b:loop>
</b:if>
<script> //<![CDATA[
// Multiple Related Posts by igniel.com
(function ignielMultiRelated() {
var text = 'BACA JUGA:';
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}('P b=["\\e\\f\\c\\B\\h\\E","\\o\\d\\c\\z\\q\\N","\\A\\e\\q\\q\\o","\\S\\n\\B\\c\\n\\f\\e\\C\\y\\e\\h\\n\\T\\f\\e\\d\\h\\f\\z","\\M\\y\\f\\o\\G\\H\\f\\e\\f\\p\\h\\q\\o\\L\\e\\e","\\n\\c\\c\\f\\o\\F\\V\\C\\I","\\k\\g\\m\\d\\c\\s\\p\\e\\d\\g\\g\\u\\j\\p\\q\\c\\h\\f\\c\\h\\j\\l\\k\\g\\m\\d\\c\\s\\p\\e\\d\\g\\g\\u\\j\\h\\f\\K\\h\\j\\l","\\k\\w\\g\\m\\d\\c\\l\\k\\d\\s\\E\\o\\f\\A\\u\\j","\\j\\s\\h\\n\\h\\e\\f\\u\\j","\\j\\l","\\k\\w\\d\\l\\k\\w\\g\\m\\d\\c\\l\\k\\g\\m\\d\\c\\s\\p\\e\\d\\g\\g\\u\\j\\n\\p\\q\\c\\j\\l\\k\\w\\g\\m\\d\\c\\l"];v r=D[b[2]]((t[b[0]]-1)*D[b[1]]());v i=0;v x=O[b[4]](b[3]);Q(i<t[b[0]]&&i<x[b[0]]){R(v a=0;a<x[b[0]];a++){x[a][b[5]]=b[6]+W+b[7]+Y[r]+b[8]+t[r]+b[9]+t[r]+b[U];J(r<t[b[0]]-1){r++}X{r=0};i++}}',61,61,'|||||||||||_0x2867|x6E|x61|x6C|x65|x73|x74||x22|x3C|x3E|x70|x69|x72|x63|x6F||x20|relatedTitles|x3D|let|x2F|jumlah|x75|x64|x66|x67|x4D|Math|x68|x48|x79|x53|x4C|if|x78|x41|x71|x6D|document|var|while|for|x2E|x52|10|x54|text|else|relatedUrls'.split('|'),0,{}));
})();
//]]> </script>
</b:if>
var jumlah
: jumlah related post yang ditampilkan. Pastikan hanya mengubah angka 4
saja.-
var text
: Tulisan atau judul dari related post. Hanya ganti di bagian BACA JUGA:
saja (tanda kutip jangan dihapus).Lalu tambahkan kode CSS ini untuk membuat tampilannya lebih menarik. Usahakan memilih warna yang kontras dengan sekitarnya agar mudah dikenali oleh pengunjung. Simpan DI ATAS </style>
atau ]]></b:skin>
.
/* Multiple Related Posts by igniel.com */
.ignielMultiRelated {background-color:#C0392B; color:#fff; margin:10px 0px; display:-webkit-box;
display:-webkit-flex; display:-moz-box; display:-ms-flexbox; display:flex; flex-wrap:nowrap; justify-content:space-between; transition:all .3s ease;}
.ignielMultiRelated:hover {background-color:#252525;}
.ignielMultiRelated .content {padding:10px 15px;}
.ignielMultiRelated .content .text {margin-right:10px; text-decoration:underline;}
.ignielMultiRelated .content a {color:#fff; text-decoration:none; line-height:1.5em;}
.ignielMultiRelated .icon{height:auto; min-width:50px; background:#E74C3C url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z' fill='%23fff'/%3E%3C/svg%3E") center / 40px no-repeat; transition:all .3s ease;}
.ignielMultiRelated:hover .icon {background-color:#000;}
Hasilnya bisa dicek di Codepen saya.
Terakhir simpan template dan lihat hasilnya. Cukup unik bukan tutorial cara pasang banyak artikel terkait dalam postingan Blogspot di atas. Saya sering melihatnya dalam blog dengan platform WordPress, mungkin memang ada pluginnya. Sebagai pengguna Blogger tentunya tidak mau kalah dong.
Kamu bebas menulis ulang artikel ini menggunakan bahasa sendiri di blog masing-masing dengan syarat harus menyertakan sumber aslinya (link hidup).
Mantap sistah, tapi kayaknya tanpa style terlihat lebih natural yah, seperti situs berita pada umumnya. ^_^
BalasHapusIya style nya sesuaikan dengan selera masing-masing aja.
Hapusmba jadinya acak-acakan seperti gambar berikut ini di template viomagz
BalasHapushttps://1.bp.blogspot.com/-uFxugYpE9Cs/XEAuPLFFMjI/AAAAAAAABDM/nAmKghjvQQ0RdfsYg10RhetjWtvU6Zq6QCEwYBhgL/s1600/Capture.PNG
Bukan acak-acakan. Script ini bekerja menyisipkan related post sesuai jumlah paragraf. Dan saya lihat artikel mas di atas cukup pendek dan cuma ada beberapa paragraf saja. Sementara jumlah related postnya disetting banyak. Jadi numpuk. Coba jumlahnya kurangi.
Hapusjadi spesifikasi minimumnya harus ada berapa paragraf mba ?
HapusMinimal 1 paragraf.
HapusArtikel masnya terlalu pendek. Jumlah relatednya kurangi biar gak numpuk.
kalau blog yang artikelnya pendek pendek cukup gunakan 2 saja baca juganya.
Hapuskeren, kalo bisa request yang ada gambar+judulnya mbak jadi mirip kek wordpress
BalasHapusKenapa scriptnya di obfus semua.?
BalasHapusobfus apaan kang ?
HapusSemacam di lock, jadi nda bisa di ubah atau di modofikasi.
HapusDia ngeshare tutorial nya setengah-setengah doang, awalnya sih ane liat blog nya bagus,tapi pas bagian javascript atau script nya di obfus semua. Gimana pemula mau tau cara kerja scriptnya kalau gak bisa dibaca.
HapusSalah tempat bos kalo bilang setengah-setengah. Ini tutorial blogging. Bukan tutorial pemrograman.
Hapusini yang dipake ditemplate textrim bukan mba?
BalasHapusIya mas.
Hapuseleh ngelu ndasku 🤣
BalasHapusaku ijin pakai yang related di tengah postingan saja.
Kok pas saya coba gak work ya mba :(
BalasHapusKalo pasangnya benar pasti work.
HapusSupaya tiap link di klik open new tab gmna?
BalasHapushttps://faizaltech98.blogspot.com/2019/11/cara-membuat-multiple-related-post.html
BalasHapusTerima kasih post nya mba izin post ulang
4 same related Posts showing in my blogspot blog. I have used textrim bloggger template by you. Help me. I writeen 2 posts of same label for testing purpose. Help me.
BalasHapusHow many posts in the same Label you have?
HapusNgurangi jumlah related post yang ditampilkan bijimane tante? Misal cuman 2 related post. Tengkiyu tante.
BalasHapusEh mengatur letak maksudnya wkwk. Mindah posisi related post ke paragraf sekian.
HapusPake yang ini bos. Besok-besok jangan komen pake kloningan ya bos, apalagi yang fotonya cewek cakep tapi gak tau siapa.
Hapushttps://www.igniel.com/2019/01/iklan-setelah-paragraf-ke-sekian.html
Why encrypt the js part while even sharing such simple codes?
BalasHapusThank u Sist.
BalasHapusBtw saya ambil yg model di Textrim pake includeable, biar rapi dikit kode xml-nya (berantakan karena comot sana-sini).
Karena ambil comot dari textrim, nama Sist saya cantumkan di komentar css-nya.
Thank u.
gan,,napa yang muncul di "BACA JGA" ini acak2 ya? tidak berdasarkan label nya...
BalasHapuscar buat seperti agan punya "TRENDING SERUPA" itu gimana gan?
BalasHapusTerima kasih tutornya... :) :) :)
BalasHapusok work bos
BalasHapushttps://www.t3pemula.com
kenapa blogku gak work yah.. pas disave error
BalasHapusMantap mba' thanks
BalasHapushow to create read more toggle jquery in blogger posts?
BalasHapusKalau membuat "Trending serupa" mirip blog ini gmn ya caranya?
BalasHapusmbak, ijin tanya untuk template fiksioner kenapa multiple related postnya berantakan ya ?
BalasHapusContohnya di artikel saya ini
https://edugoedu.blogspot.com/2021/01/besaran-satuan-dan-dimensi-dalam-ilmu.html
cara agar relatednya muncul hanya di bawah tag p bagaimana ya ?