Cara Membuat Artikel Terkait ( Baca Juga ) didalam Postingan Artikel

Cara Membuat Artikel Terkait ( Baca Juga ) didalam Postingan Artikel - Halo sobat blogger, bagaimana kabar anda dan blog yang anda kelola smoga slalu baik dan blognya makin tajir. Aamiin. Karena kemaren ada anak dari sekolah SMK UMMA chat saya dan bertanya bagaimana cara membuat Baca juga didalam postingan atau ditengah postingan artikel, Nah, Pada kesempatan kali ini saya bakal share tutorial cara membuat artikel terkait (Baca juga) di dalam postingan atau ditengah postingan. Mungkin temen - temen blogger semuanya sudah mengenal kan apa itu related post atau artikel terkait ?

Fungsi dari Artikel terkait ini adalah menampilkan sejumlah artikel yang sama sesuai label masing - masing setiap artikel, Jadi kita tak perlu manual - manual lagi jika sudah memasang artikel terkait (Baca juga) di dalam artikel atau ditengah. Karena nanti bakal secara otomatis keluar sesuai labelnya. artikel terkait (Baca juga) ini ada yang bergambar dan text, Namun secara umum didalam postingan menggunakan text agar tampilan blog menjadi lebih rapi dan elegen. Cara ini saya dapatkan di blog arlina design kebetulan web ini merupakan tempat dimana saya belajar tentang design.Ok, itu aja curhatnya, hehehehe.

Selain itu manfaat yang bakal anda dapatkan setelah memasang artikel terkait ini adalah bisa mendongkrak pengunjung lebih banyak dan juga meningkatkan kualitas link internal blog yang anda kelola. wiw,,, Bagus kan ?

Bagaimana tertarik tidak untuk memasang artikel terkait ini di blog anda ? Jika anda ingin mencoba yuuuk simak langkah - langkahnya dibawah ini :

1. Login ke blogger

2. copy kode di bawah ini tepat diatas kode </head>

<b:if cond='data:blog.pageType == "item"'><script type='text/javascript'>//<![CDATA[var relateddsopgratis = new Array(); var relateddsopgratisNum = 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]; relateddsopgratis[relateddsopgratisNum] = entry.title.$t; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') {relatedUrls[relateddsopgratisNum] = entry.link[k].href; relateddsopgratisNum++; 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] = relateddsopgratis[i];}} relateddsopgratis = 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((relateddsopgratis.length - 1) * Math.random()); var i = 0; document.write('<ul>'); while (i < relateddsopgratis.length && i < 20) { document.write('<li><a href="' + relatedUrls[r] + '">' + relateddsopgratis[r] + '</a></li>'); if (r < relateddsopgratis.length - 1) { r++; } else { r = 0;} i++;} document.write('</ul>');}//]]></script></b:if>

3. Kemudian Copy Css dibawah ini tepat diats kode atau

/* ARTIKEL TERKAIT*/
.related-dsopgratis{position:relative;padding:20px 12px 12px 12px;margin:32px auto 24px auto;width:93%;border:4px double rgba(0,0,0,0.2)}.related-dsopgratis h4{background:#fff;padding:8px 10px;position:absolute;margin:0;font-size:17px;font-weight:700;color:#000;top:-21px;left:2.5%}.related-dsopgratis ul{margin:0;padding:0}.related-dsopgratis ul li{position:relative;list-style:none;padding:9px 0;margin:auto;line-height:1.4em;transition:all .3s}.related-dsopgratis ul li:before{content:'\f0c8';font-family:fontawesome;position:absolute;margin:0 5px 0 2px;color:rgba(0,0,0,0.5);overflow:hidden;font-size:60%;left:10px;transition:all .3s}.related-dsopgratis ul li:hover:before{content:'\f0c8';font-family:fontawesome;color:#0383d9;}.related-dsopgratis a{color:#000;font-size:14px;margin:0 0 0 30px;}.related-dsopgratis a:hover{color:#0383d9;}.related-dsopgratis ul li:nth-child(n+4) {display:none;}@media only screen and (max-width:768px){.related-dsopgratis{padding:15px 0 10px 0;width:100%;border:2px solid #e74c3c;border-left:0;border-right:0}.related-dsopgratis h4{color:#e74c3c;padding:8px;font-size:15px;top:-18px;left:3.5%}.related-dsopgratis a{font-size:14px;margin:0}.related-dsopgratis a:hover{color:#e74c3c}.related-dsopgratis ul li{padding:5px 0}.related-dsopgratis ul li:before,.related-dsopgratis ul li:hover:before{display:none}}

4. Masih di edit Html, Selanjutnya anda cari kode <data:post.body/> biasanya kode ini ada 3, Silakan pilih kode 2 atau 3, Lalu ganti dengan code dibawah ini.

<div class="related-dsopgratis">
<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><h4>Baca Juga</h4>
<script type='text/javascript'>removeRelatedDuplicates();printRelatedLabels();</script></b:if></b:loop></b:if></div>
<div expr:id="&quot;post2&quot; + data:post.id">
<data:post .body/></data:post></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/2);var r=t.lastIndexOf("<br>");if(r>0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+4);}</script>
</div>

5. Simpan dan lihat hasilnya.

Bagaimana cukup mudah untuk mempraktekkan Cara Membuat Artikel Terkait ( Baca Juga ) didalam Postingan Artikel ? Bila mana ada kesalahan atau eror mohon untuk meninggalkank komentar dibawah ya sob, biar saya segera langsung update biar anda bisa menggunakan di blognya nanti agar gak repot - repot lagi untuk tulis secara manual. Cukup sekian artikel kali ini semoga artikel yang saya tulis kali ini bisa bermanfaat untuk anda. Selamat mencoba dan semoga sukses.

Sumber kode : https://www.arlinadzgn.com/2017/01/memasang-artikel-terkait-di-dalam-postingan.html