Sabtu, 13 April 2019

Cara Membuat dan Memasang Artikel Terkait Otomatis di Tengah Postingan Blog


www.indoblog.me - Sebenarnya ini hanyalah artikel dokumentasi yang saya buat untuk kebutuhan di masa yang akan datang jika sewaktu-waktu kode-kode ini saya butuhkan kembali yaitu bagaimana Cara Membuat dan Memasang Artikel Terkait Otomatis di Tengah Postingan Blog sebagai bahan dokumen mungkin sewaktu waktu ada yang membutuhkan juga jadi tidak ada salahnya saya coba bagikan lagi disini lagian toh tidak akan rugi buat yang lagi membutuhkannya karena ilmu yang bermanfaat adalah 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 saya tidak tahu, karena yang tahu hanyalah para develpoment dan pengembang google saja.

Langsung saja tanpa banyak basa basi lagi, karena kalau kelamaan ngobrol dan ngerumpi nanti jadi baso eh basi maksudnya wk kw, okelah cekitbro tutorial gimana cara gampang dan cara mudah memasang atau maupun cara membuat artikel atau postingan terkait atau related post atau random post ditengah dan didalam postingan blog dan berikut tutorialnya.

cara memasang artikel terkait di tengah atas bawah postingan blogger

Pada langkah pertama silahkan buka bloggernya (tentunya dong wk wk wk) lalu pilih menu "TEMA" lalu "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 langsung dimulai ritualnya, dan untuk contohnya bisa kamu lihat pada gambar dibawah ini.

cara membuat artikel terkait di tengah atas bawah postingan blogger

1. Pada tahap utama yang pertama silahkan cari kode </head> kalau sudah ketemu silahkan tambahkan kode dibawah ini tepat diatasnya kode </head> tersebut.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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>

cara membuat artikel terkait di tengah atas bawah postingan blogger


2. Kemudian pada tahap yang kedua silahkan cari kode ]]></b:skin> dan pasang kode 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 bisa menggunakan 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}

cara membuat artikel terkait di tengah atas bawah postingan blogger


3. Kemudian yang terakhir yang terpenting adalah mencari kode <data:post.body/> untuk kode tersebut pada setiap blog umumnya lebih dari satu, maka dari itu silahkan dicoba satu satu, kalau ada 3 kode biasanya kode nomor 2 sebagai kode artikel bodinya, maka dari itu pastikan anda menyimpan kode aslinya jika nanti kode yang akan dipasang ini tidak berhasil, kemudian jika sudah paham langsung saja ganti kode dibawah ini

<div expr:id='&quot;post1&quot; + data:post.id'/>
<data:post.body/></b:if> atau <div expr:id='&quot;post1&quot; + data:post.id'/>
<p><data:post.body/></p></b:if> cuma beda ada paragrafnya saja

Yang merah saja yang diganti, kode tersebut hanya acuan saja untuk lebih mudah ditemukan, lalu replace dengan kode dibawah ini

<div expr:id='&quot;post1&quot; + 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 == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=3&quot;' 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='&quot;post2&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>
var obj0=document.getElementById(&quot;post1<data:post.id/>&quot;);
var obj1=document.getElementById(&quot;post2<data:post.id/>&quot;);
var s=obj1.innerHTML;
var t=s.substr(0,s.length/3);
var r=t.lastIndexOf(&quot;&lt;br&gt;&quot;);
if(r&gt;0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+4);}
</script>

cara membuat artikel terkait di tengah atas bawah postingan blogger

Note* 
-Untuk max-results=3 bisa kamu ganti menjadi max-results=4 atau max-results=5 atau max-results=6 silahkan sesuaikan dengan kebutuhan saja
- Untuk length/3 (sepertiga artikel) bisa kamu ganti menjadi length/2 (pas tengah artikel)
- Untuk Baca Juga: Juga bisa kamu ganti sesuai keinginan kamu

Kemudian jangan lupa simpan dan save lalu silahkan lihat hasilnya apakah sudah berubah dan apabila belum berhasil kuncinya adalah pada pergantian kode <data:post.body/> ya pada kode tersebut pastikan anda menggantinya yang berhubungan dengan article body saja atau bisa 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 bahan dokumentasi saja apabila sewaktu-waktu admin butuhkan dan atas kekurangannya saya ucapkan terima kasih, soalnya kode related artikel tersebut mau admin ganti yang ada diblog ini heee.