www. - Sebenarnya ini hanyalah artikel dokumentasi yang aku buat untuk kebutuhan di masa yang akan tiba kalau sewaktu-waktu kode-kode ini aku butuhkan kembali yaitu bagaimana Cara Membuat dan Memasang Artikel Terkait Otomatis di Tengah Postingan Blog sebagai materi dokumen mungkin sewaktu waktu ada yang membutuhkan juga jadi tidak ada salahnya aku coba bagikan lagi disini lagian toh tidak akan rugi buat yang lagi membutuhkannya alasannya yakni ilmu yang bermanfaat yakni ilmu yang dibagikan kembali, yang penting jangan ilmu santet saja wk wk wk.
Sehubung dengan tidak adanya google plus atau google plus sudah ditiadakan oleh google dikarenakan ada kebocoran data sekitar 500rb pengguna sehingga banyak bugnya jadi untuk sementara memang googleplus ditiadakan dulu, apakah itu untuk sementara atau sementahun atau selamanya aku tidak tahu, alasannya yakni yang tahu hanyalah para develpoment dan pengembang google saja.
Langsung saja tanpa banyak basa busuk lagi, alasannya yakni kalau kelamaan ngobrol dan ngerumpi nanti jadi baso eh busuk maksudnya wk kw, okelah cekitbro tutorial gimana cara praktis dan cara praktis memasang atau maupun cara menciptakan artikel atau postingan terkait atau related post atau random post ditengah dan didalam postingan blog dan berikut tutorialnya.
Pada langkah pertama silahkan buka bloggernya (tentunya dong wk wk wk) kemudian pilih sajian "TEMA" kemudian "EDIT HTML" eits tetapi jangan lupa backup dulu ya templatenya buat jaga-jaga error atau gagal maintenance templatenya, sudah dibackup kan template blognya ya udah eksklusif dimulai ritualnya, dan untuk misalnya dapat kau lihat pada gambar dibawah ini.
1. Pada tahap utama yang pertama silahkan cari kode </head> kalau sudah ketemu silahkan tambahkan aba-aba dibawah ini sempurna diatasnya kode </head> tersebut.
<b:if cond='data:blog.pageType == "item"'>
<script type='text/javascript'>
//<![CDATA[
var relatedTitles = new Array(); var relatedTitlesNum = 0; var relatedUrls = new Array(); function related_results_labels(json) { for (var i = 0; i < json.feed.entry.length; i++) { var entry = json.feed.entry[i]; relatedTitles[relatedTitlesNum] = entry.title.$t; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') {relatedUrls[relatedTitlesNum] = entry.link[k].href; relatedTitlesNum++; break;}}}} function removeRelatedDuplicates() { var tmp = new Array(0); var tmp2 = new Array(0); for(var i = 0; i < relatedUrls.length; i++) { if(!contains(tmp, relatedUrls[i])) { tmp.length += 1; tmp[tmp.length - 1] = relatedUrls[i]; tmp2.length += 1; tmp2[tmp2.length - 1] = relatedTitles[i];}} relatedTitles = tmp2; relatedUrls = tmp;} function contains(a, e) { for(var j = 0; j < a.length; j++) if (a[j]==e) return true; return false;} function printRelatedLabels() { var r = Math.floor((relatedTitles.length - 1) * Math.random()); var i = 0; document.write('<ul>'); while (i < relatedTitles.length && i < 20) { document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>'); if (r < relatedTitles.length - 1) { r++; } else { r = 0;} i++;} document.write('</ul>');}
//]]>
</script>
</b:if>
2. Kemudian pada tahap yang kedua silahkan cari kode ]]></b:skin> dan pasang aba-aba dibawah ini sebelum kode ]]></b:skin> tersebut.
/* Related Post CSS */
.post-terkait{position:relative;padding:0;margin:15px auto;width:100%;}
.post-terkait h4{background:#3498db;padding:8px 12px;margin:0;font-size:15px;font-weight:400;color:#fff;border:1px solid #2e88c5}
.post-terkait ul{margin:0;padding:0}
.post-terkait ul li{background:#f6f6f6;position:relative;list-style:none;padding:9px;margin:auto;line-height:1.4em;border:1px solid rgba(0,0,0,0.1);border-bottom:0;transition:all .3s}
.post-terkait ul li:nth-child(odd){background:#fefefe}
.post-terkait ul li:last-child{border-bottom:1px solid rgba(0,0,0,0.1)}
.post-terkait ul li:before{content:'\f138';font-family:fontawesome;position:absolute;margin:0 9px 0 4px;color:#2ecc71;overflow:hidden;transition:all .3s}
.post-terkait ul li:hover:before{content:'\f138';font-family:fontawesome;-webkit-animation:bounceright .3s alternate ease infinite;animation:bounceright .3s alternate ease infinite}
.post-terkait a{color:#0383d9;font-size:13px;margin:0 0 0 30px;}
.post-terkait a:hover{color:#0383d9;text-decoration:underline}
.post-terkait ul li:nth-child(n+4) {display:none;}
@-webkit-keyframes bounceright{from{-webkit-transform:translateX(0)}to{-webkit-transform:translateX(3px)}}
@keyframes bounceright{from{transform:translateX(0)}to{transform:translateX(3px)}}
Kalau mau yang lebih cakep tapi simple dapat memakai yang versi ini:
/* Related Post CSS */
.post-terkait {position:relative;background:#fff;padding:0;margin:10px 15px 0 0;float:left;width:165px;border:1px solid #1b71bc}
.post-terkait h4{background:#1b71bc !important;padding:5px 0 !important;margin:0;text-align:center !important;font-size:15px !important;font-weight:400;text-transform:uppercase;color:#fff !important}
.post-terkait ul {margin:0;padding:0}
.post-terkait ul li {list-style:none !important;padding:7px 0;margin:0 7px;border-bottom:2px dotted #ddd;line-height:1.4em !important;text-align:left !important}
.post-terkait ul li:last-child{border:none !important}
.post-terkait a {color:#1b71bc;font-size:13px !important}
.post-terkait a:hover {text-decoration:underline}
3. Kemudian yang terakhir yang terpenting yakni mencari kode <data:post.body/> untuk aba-aba tersebut pada setiap blog umumnya lebih dari satu, maka dari itu silahkan dicoba satu satu, kalau ada 3 aba-aba biasanya aba-aba nomor 2 sebagai aba-aba artikel bodinya, maka dari itu pastikan anda menyimpan aba-aba aslinya kalau nanti aba-aba yang akan dipasang ini tidak berhasil, kemudian kalau sudah paham eksklusif saja ganti aba-aba dibawah ini
<div expr:id='"post1" + data:post.id'/>
<data:post.body/></b:if> atau <div expr:id='"post1" + data:post.id'/>
<p><data:post.body/></p></b:if> cuma beda ada paragrafnya saja
Yang merah saja yang diganti, aba-aba tersebut hanya contoh saja untuk lebih praktis ditemukan, kemudian replace dengan aba-aba dibawah ini
<div expr:id='"post1" + data:post.id'/>
<div class='post-terkait'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=3"' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>
<b>Baca Juga:</b>
<script type='text/javascript'>
removeRelatedDuplicates();
printRelatedLabels();
</script>
</div>
</div>
<br/>
<div expr:id='"post2" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>
var obj0=document.getElementById("post1<data:post.id/>");
var obj1=document.getElementById("post2<data:post.id/>");
var s=obj1.innerHTML;
var t=s.substr(0,s.length/3);
var r=t.lastIndexOf("<br>");
if(r>0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+4);}
</script>
Note*
-Untuk max-results=3 bisa kau ganti menjadi max-results=4 atau max-results=5 atau max-results=6 silahkan sesuaikan dengan kebutuhan saja
- Untuk length/3 (sepertiga artikel) dapat kau ganti menjadi length/2 (pas tengah artikel)
- Untuk Baca Juga: Juga dapat kau ganti sesuai harapan kamu
Kemudian jangan lupa simpan dan save kemudian silahkan lihat kesannya apakah sudah berubah dan apabila belum berhasil kuncinya yakni pada pergantian kode <data:post.body/> ya pada aba-aba tersebut pastikan anda menggantinya yang bekerjasama dengan article body saja atau dapat coba satu-satu.
Ya, hanya itu saja dulu artikel dokumentasi kali ini tentang Cara Membuat dan Memasang Artikel Terkait Otomatis di Tengah Postingan Blog yang dimana postingan ini sengaja admin muat di tahun 2019 ini hanya sekedar sebagai materi dokumentasi saja apabila sewaktu-waktu admin butuhkan dan atas kekurangannya aku ucapkan terima kasih, soalnya aba-aba related artikel tersebut mau admin ganti yang ada diblog ini heee.
Sumber https://www.indoblog.me/
