Serieswans.com | Cara Membuat Multi Related Post Otomatis di Postingan Blog - Hallo sahabat blogger, pada kesempatan kali ini saya akan share tutorial mengenai cara membuat multi related post pada postingan blog. Mungkin anda sudah pernah melihat contoh multi related pada postingan halaman di situs web besar. salah satu contoh situs web yang saya ketahui adalah di situs web Droidpoin.
Multi Realated Post ini akan tampil dengan jumlah banyak, dari kayanya juga Multi yang artinya "Banyak". selain itu anda juga bisa mengatur berapa multi related post yang akan di tampilkan di halaman postingan, misalnya 3 atau 4. tergantung juga kalo misalkan jumlah kata pada artikel postingan anda banyak lebih dari 1000, anda bisa menambahkan jumlah multi related post menjadi 5 atau 6.
 |
| Multi Related Post Pada Postingan Blog |
Multi Related Post ini berfungsi untuk menampilkan artikel terkait dalam postingan tersebut secara otomatis sesuai label pada halaman artikel.
Apa Kelebihan Multi Related Post ?
Salah satu kelebihannya adalah sebagai cara untuk mengingatkan pembaca atau pengunjung blog agar mereka juga mengklik dan membaca artikel yang berkaitan dengan artikel yang sedang mareka baca.
Manfaat memasang multi related post ini adalah untuk menambah atau menaikan visitor dan meningkatkan kualitas internal link pada blog anda.
Selain memberi tahu pembaca agar membaca artikel yang terkait denga artikel tersebut adalah multi related post ini juga sangat baik untuk SEO of Page.
Nah,langsung saja ke tutorial cara memasang multi related post pada postingan blog. silahkan simak langkah-langkah di bawah ini.
Cara Memasang Multi Related Post Otomatis Pada Postingan Blog
1. Pertama, login ke Blogger.com dan masuk menu Dashboard
2. Pilih Tema => Edit HTML
3. Silahakan copy kode CSS di bawah in dan letakan sebelum kode </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>
4. Jika sudah, selanjutnya cari kode <data:post.body/>
silahkan anda pilih <data:post.body/> yang di bungkus dengan tag conditional khusus halaman postingan.
biasanya kode tersebut ada 3
5. Kemudian copy Kode Javascript di bawah ini dan letakan di bawah kode <data:post.body/>
<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="' + relatedTitles[r] + '">' + relatedTitles[r] + '</a></span><span class="icon"></span>';if (r < relatedTitles['length'] - 1) {r++} else {r = 0};i++}}})();
//]]>
</script>
</b:if>
6. Terakhir Simpan Tema dan cek hasilnya.
Demo
Panduan Setting Multi Related Post
Silahkan sesusaikan dengan keinginan anda pada kode yang saya beri tanda mereah.
Var Jumlah = 3; Menampilkan jumlah multi related post di halaman postingan, silahkan atur berapa jumlah multi related post yang ingin anda tampilakan di postingan.
Also Read = Silahkan ganti kata-kata tersebut dengan yang anda inginkan
Khusus pengguna Template Viomagz
Untuk anda yang menggunakan template viomagz yang sudah terdapat multi related post (baca juga) di halaman postingannya. maka anda harus menghapus terlebih dahulu kode tersebut agar tidak terjadi bentrok.
Cara Menghapus multi related post (Baca juga) silahkan cari kode CSS berikut
1. Cari kode CSS seperti di bawah ini, setela ketemu silahkan hapus tersebut.
/* 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. Kemudian cari kode HMTL di bawah ini, jika sudah ketemu hapus kode tersebut.
3. Terkahir cari kode Javascript di bawah ini, lalu hapus kode tersebut.
<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>
<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>
Jika kode tersebut di hapus, maka anda bisa langsung memasang multi related post pada halaman postingan.
Caranya cukup ganti kode CSS pada tutorial di atas, kemudian pilih salah satu style multi related postingan yang anda inginkan.
Beberapa Style Multi Related Post pada postingan
Di bawah ini ada beberapa style multi related postingan dengan tampilang yang keren dan warnanya yang berbeda.Caranya cukup ganti kode CSS pada tutorial di atas, kemudian pilih salah satu style multi related postingan yang anda inginkan.
Style Multi Related Post 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>
Demo
Style Multi Related Post 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>
Demo
Style Multi Related Post 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>
Demo
Style Multi Related Post 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>
Demo
Style Multi Related Post seperti blog serieswans
<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;font-weight:700;color: #38ef7d}
.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:#0575E6 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>
Demo
Cukup mudah bukan cara memasangnya, jika anda masih kebingungan cara pemasangannya, jangan sungkan untuk menanyakan di kolom komentar.
Demikian pembahasan tutorial kali ini mengenai Cara Membuat Multi Related Post Otomatis di Postingan Blog. jangan lupa share juga ke teman-teman dan media sosial anda ya, semoga bermanfaat dan terima kasih
https://www.arlinadzgn.com/2019/01/cara-memasang-multi-related-post-di-postingan.html
https://www.arlinadzgn.com/2019/01/cara-memasang-multi-related-post-di-postingan.html
10 komentar