Cara Gampang Memasang Multi Related Post Dalam Postingan
Pada kesempatan kali ini aku akan menyebarkan tutorial cara untuk menciptakan multi related post pada postingan blog.
Multi related post pada postingan ini biasanya ditemukan di web-web besar, salah satu pola yang sering aku temukan ialah di web Wonpoin. Jika teman sering berkunjung di web tersebut past akan menemukan related post yang bentuknya sama menyerupai dibawah ini:
 |
| Contoh Multi Related Post di Situs besar : Winpoin.com |
Seperti namanya "Multi related post", maka multi related post ini akan tampil dengan jumlah yang banyak, namun sanggup teman atur jumlahnya sesuai dengan yang teman inginkan.
Multi related post dalam postingan ini berfungsi untuk menampilkan artikel yang terkait dalam postingan secara otomatis sesuai dengan label yang teman buat.
Banyak kelebihan bila teman menampilkan Related post dalam postingan ini, salah satunya ialah untuk mengingatkan pembaca teman biar mereka juga membaca artikel sebelumnya yang berkaitan denga artikel yang sedang mereka baca.
Selain untuk memberi tahu pembaca biar membaca artikel lain yang terkait artikel tersebut, Multi related post ini juga sangat anggun untuk SEO of Page dan meningkatkan minat pembaca untuk membaca artikel teman yang sudah lama.
Nah, bila teman tertarik untuk memasang Multi related post dalam postingan ini, silahkan simak tutorialnya diabwah ini:
Cara Praktis Memasang Multi Related Post Dalam Postingan
1. Pertama silahkan masuk ke Blog- Template - Edit HTML2. Kemudian simpan CSS berikut sebelum isyarat </head>
<b:if cond='data:blog.pageType != "index"'>  <style type='text/css'> /* Multi Related Post */ .arldzgnMultiRelated{background-color:#2a2a2a;color:#fff;margin:15px auto;display:-moz-box;display:-ms-flexbox;display:flex;flex-wrap:nowrap;justify-content:space-between;overflow:hidden;transition:all .3s} .arldzgnMultiRelated:hover{background-color:#222} .arldzgnMultiRelated .content{padding:12px 15px} .arldzgnMultiRelated .content .text{margin-right:5px} .arldzgnMultiRelated .content a{color:#fff;text-decoration:none;line-height:1.5em} .arldzgnMultiRelated .content a:hover{text-decoration:underline} .arldzgnMultiRelated .icon{height:auto;min-width:55px;background:#f44336 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} </style> </b:if> 3. Setelah memasang CSS diatas, kini temukan isyarat <data:post.body/> pada template teman masing-masing.
disini teman niscaya akan menemukan beberapa kode <data:post.body/> dalam template sobat, nah teman cukup mencari isyarat tersebut yang dibungkus dengan tag conditional khusus halaman postingan.
Baca Juga: Fungsi Tag Conditional Dalam Template Blog
4. tambahkan isyarat berikut sempurna dibawahnya
<b:if cond='data:view.isPost'> <script type='text/javascript'> //<, a = jumlah + 1, b = post['length'] / a; c = Array['from']({ length: jumlah }, (redfx, blufx) => blufx + 1); for (let d = 0; d < c['length']; d++) { let e = c[d], f = parseInt((b * e)), g = document['createElement']('div'); g['className'] = 'arldzgnMultiRelated'; if (post[f]['nodeName'] == 'P') { post[f]['parentNode']['insertBefore'](g, post[f]) } else { post[f]['parentNode']['insertBefore'](g, post[f]['nextSibling']) } } })(); var relatedTitles = new Array(); var relatedTitlesNum = 0; var relatedUrls = new Array(); function related_results_labels(nerdfx) { for (var desfx = 0; desfx < nerdfx['feed']['entry']['length']; desfx++) { var nefx = nerdfx['feed']['entry'][desfx]; relatedTitles[relatedTitlesNum] = nefx['title']['$t']; for (var ciafx = 0; ciafx < nefx['link']['length']; ciafx++) { if (nefx['link'][ciafx]['rel'] == 'alternate') { relatedUrls[relatedTitlesNum] = nefx['link'][ciafx]['href']; relatedTitlesNum++; break } } } } function removeRelatedDuplicates() { var viefx = new Array(0); var labfx = new Array(0); for (var desfx = 0; desfx < relatedUrls['length']; desfx++) { if (!contains(viefx, relatedUrls[desfx])) { viefx['length'] += 1; viefx[viefx['length'] - 1] = relatedUrls[desfx]; labfx['length'] += 1; labfx[labfx['length'] - 1] = relatedTitles[desfx] } }; relatedTitles = labfx; relatedUrls = viefx } function contains(yelfx, yufx) { for (var grefx = 0; grefx < yelfx['length']; grefx++) { if (yelfx[grefx] == yufx) { return true } }; return false } //]]> </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 type='text/javascript'> //< * Math['random']()); let i = 0; let jumlah = document['querySelectorAll']('.arldzgnMultiRelated'); while (i < relatedTitles['length'] && i < jumlah['length']) { for (let a = 0; a < jumlah['length']; a++) { jumlah[a]['innerHTML'] = '<span class="content"><span class="text">' + text + '</span><a href="' + relatedUrls[r] + '" title="Cara Praktis Memasang Multi Related Post Dalam Postingan">' + relatedTitles[r] + '</a></span><span class="icon"></span>'; if (r < relatedTitles['length'] - 1) { r++ } else { r = 0 }; i++ } } })(); //]]> </script> </b:if> yang aku beri tanda merah, silahkan sesuaikan dengan yang teman inginkan;
1. var jumlah = 4; : Untuk menampilkan jumlah Multi Related post, semakin banyak jumlah maka semakin banyak relates post yang tampil.
2. Also read : silahkan ganti dengan kata yang teman inginkan
KhusuS Untuk Pengguna Template VioMagz mas Sugeng:
Jika teman memakai template viomagz yang mana dalam template tersebut sudah terdapat multi reladet post, maka teman harus menghapus dulu isyarat tersbut biar tidak terjadi bentrok related post dalam postingan.
Cara menghapusnya silahakn silahkan cari isyarat CSS berikut:
1. Hapus CSS Relate post dalam postingan template viomagz
/* BACA JUGA */ #baca-juga { display: none; position: relative; } #baca-juga h2 { color: $(label.color); position: absolute; top: -15px; left: 3.5em; border: 2px solid $(label.border.color); padding: 2px 12px; font-size: 14px; background: $(label.bg.color); font-weight: bold; z-index: 1; } #baca-juga a { font-weight: bold; font-size: 14px; display: block; padding: 0; } #baca-juga ul { max-width: 75%; margin: 1.5em 0 1.5em 2em; padding: 20px 20px 10px 40px; position: relative; border: 2px solid $(label.border.color); } #baca-juga li { padding: 0px; margin: .6em 0; } 2. Hapus Kode HTML, JS dan JSON dalam Temlplate Viomagz
Cari isyarat berikut lalu hapus:
<script type='text/javascript'> //<![CDATA[ var relatedTitles=new Array,relatedTitlesNum=0,relatedUrls=new Array;function bacajuga(e){for(var l=0;l<e.feed.entry.length;l++){var t=e.feed.entry[l];relatedTitles[relatedTitlesNum]=t.title.$t;for(var r=0;r<t.link.length;r++)if("alternate"==t.link[r].rel){relatedUrls[relatedTitlesNum]=t.link[r].href,relatedTitlesNum++;break}}}function removeRelatedDuplicates(){for(var e=new Array(0),l=new Array(0),t=0;t<relatedUrls.length;t++)contains(e,relatedUrls[t])||(e.length+=1,e[e.length-1]=relatedUrls[t],l.length+=1,l[l.length-1]=relatedTitles[t]);relatedTitles=l,relatedUrls=e}function contains(e,l){for(var t=0;t<e.length;t++)if(e[t]==l)return!0;return!1}function printRelatedLabels(e){for(var l=0;l<relatedUrls.length;l++)relatedUrls[l]==e&&(relatedUrls.splice(l,1),relatedTitles.splice(l,1));var t=Math.floor((relatedTitles.length-1)*Math.random());l=0;if(widgetBacaJuga==1&&relatedTitles.length>1){for(document.write(judulbacajuga),document.write("<ul>");l<relatedTitles.length&&l<20&&l<jumlahbacajuga;)document.write('<li><a href="'+relatedUrls[t]+'">'+relatedTitles[t]+"</a></li>"),t<relatedTitles.length-1?t++:t=0,l++;document.write("</ul>")}relatedUrls.splice(0,relatedUrls.length),relatedTitles.splice(0,relatedTitles.length)} //]]> </script> <div id='baca-juga'> <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast != "true"'> </b:if> <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=bacajuga&max-results=5"' type='text/javascript'/> </b:loop> <script type='text/javascript'> var judulbacajuga="<b:switch var='data:blog.locale'><b:case value='id' /><h2>Baca Juga</h2><b:default /><h2>Related</h2></b:switch>" var jumlahbacajuga=3; removeRelatedDuplicates(); printRelatedLabels("<data:post.url/>"); </script> </div> Setelah semua isyarat diatas sudah teman hapus, teman sanggup memasang Multi related post dalam postingan yang baru.
Silahkan ikuti tutorialnya yang diatas.
Beberapa style Multi Related Post Dalam Postingan:
Ada beberapa style untuk multi related post dalam postingan ini, teman sanggup menentukan style mana yang teman suka.
Cuku ganti CSS nya saja pada langkah pertama diatas, lalu pilih CSS berikut sesuai dengan yang teman inginkan;
Style 1:
<b:if cond='data:blog.pageType != " index" '> <style type='text/css'> /* Multi Related Post */ .arldzgnMultiRelated{ color:#0984e3; margin:15px auto; display:-moz-box; display:-ms-flexbox; display:flex; flex-wrap:nowrap; justify-content:space-between; border:1px solid rgba(0,0,0,0.2); transition:all .3s } .arldzgnMultiRelated .content{ padding:12px 15px } .arldzgnMultiRelated .content .text{ margin-right:5px } .arldzgnMultiRelated .content a{ color:#000; text-decoration:none; line-height:1.5em } .arldzgnMultiRelated .icon{ height:auto; min-width:55px; background:transparent 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=' %23000' /%3E%3C/svg%3E" ) center / 40px no-repeat; border-left:1px solid rgba(0,0,0,0.2); transition:all .3s } .arldzgnMultiRelated:hover .icon,.arldzgnMultiRelated .content a:hover{ color:#0984e3 } </style> </b:if> Style 2:
<b:if cond='data:blog.pageType != " index" '> <style type='text/css'> /* Multi Related Post */ .arldzgnMultiRelated{ background-color:#eaeaea; color:#000; margin:15px auto; display:-moz-box; display:-ms-flexbox; display:flex; flex-wrap:nowrap; justify-content:space-between; transition:all .3s } .arldzgnMultiRelated:hover{ background-color:#e3e3e3 } .arldzgnMultiRelated .content{ padding:12px 15px } .arldzgnMultiRelated .content .text{ margin-right:5px } .arldzgnMultiRelated .content a{ color:#000; text-decoration:none; line-height:1.5em } .arldzgnMultiRelated .icon{ height:auto; min-width:55px; background:#f5f5f5 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=' %23888' /%3E%3C/svg%3E" ) center / 40px no-repeat; transition:all .3s } .arldzgnMultiRelated:hover .icon{ background-color:#f9f9f9 } </style> </b:if> Style 3:
<b:if cond='data:blog.pageType != " index" '> <style type='text/css'> /* Multi Related Post */ .arldzgnMultiRelated{ background-color:#c0392b; color:#fff; margin:15px auto; display:-moz-box; display:-ms-flexbox; display:flex; flex-wrap:nowrap; justify-content:space-between; transition:all .3s } .arldzgnMultiRelated:hover{ background-color:#e74c3c } .arldzgnMultiRelated .content{ padding:12px 15px } .arldzgnMultiRelated .content .text{ margin-right:5px } .arldzgnMultiRelated .content a{ color:#fff; text-decoration:none; line-height:1.5em } .arldzgnMultiRelated .icon{ height:auto; min-width:55px; background:rgba(255,255,255,.25) 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 } .arldzgnMultiRelated:hover .icon{ background-color:rgba(255,255,255,.15) } </style> </b:if> Style 4:
<b:if cond='data:blog.pageType != " index" '> <style type='text/css'> /* Multi Related Post */ .arldzgnMultiRelated{ background:#ffeaa7; color:#000; margin:15px auto; display:-moz-box; display:-ms-flexbox; display:flex; flex-wrap:nowrap; justify-content:space-between; border-left:4px solid #d63031; transition:all .3s } .arldzgnMultiRelated .content .text{ margin-right:5px } .arldzgnMultiRelated .content{ padding:10px 15px } .arldzgnMultiRelated .content a{ color:#000; text-decoration:none; line-height:1.5em } .arldzgnMultiRelated .content a:hover{ color:#111; text-decoration:underline } </style> </b:if> Jangan lupa untuk share dan komen yang sob,
jangan sungkan untuk meminta tutorial lainnya yang serupa biar nanti aku buatkan untuk teman semuanya.
Jika menuurt teman artikel ini bermanfaat dan sanggup membantu jangan lupa untuk share ke temen-temennya biar mereka juga tahu Cara Praktis Memasang Multi Related Post Dalam Postingan dengan pertolongan artikel ini.
Terakhir, aku ucapkan terimakasih yang sudah berkunjung di blog kata mastah.
Salam Luar Biasa!
Sumber: https://bacainartikel.blogspot.com/search?q=menampilkan-menyembunyikan-widget-di-halaman-terntentu Sumber https://www.katamastah.com/
