Cara Membuat Artikel Terkait Di Tengah Postingan

Cara Membuat Artikel Terkait Di Tengah Postingan
Artikel Terkait atau Releated Post ini bisa kalian pasang sendiri di Template yang dipakai, berbeda dengan beberapa Template yang sudah Otomatis ada dan pastinya ada juga Template yang tidak ada fitur tersebut. Seperti halnya Template ini yang sudah Otomatis ada dan langsung bisa digunakan tanpa perlu memasangnya lagi.

Nah bagi kamu yang ingin memasang Artikel Terkait ini pasti bisa digunakan untuk semua Template dan pastinya tampilan akan seperti pada Blog ini. Bagi kalian yang mau memasang Artikel Terkait bisa langsung ke Tutorial yang ada dibawah.

Cara Memasang Artikel Terkait


1. Buka Blogger > Klik Template/Tema > Tambahkan kode dibawah ini sebelum kode </head> or </header>

<script type="text/javascript">
//<![CDATA[
function bacajuga(e){document.write("<ul>");for(var t=0;t<e.feed.entry.length;t++){for(var r=0;r<e.feed.entry[t].link.length&&"alternate"!=e.feed.entry[t].link[r].rel;r++);var n="'"+e.feed.entry[t].link[r].href+"'",l=e.feed.entry[t].title.$t,a="<li><a href="+n+'" title="'+l+'" target="_blank">'+l+"</a> </li>";document.write(a)}document.write("</ul>")}
//]]>
</script>


2. Tambahkan CSS dibawah ini sebelum kode </style> atau </b:skin>


/* BACA JUGA */
#baca-juga {
display: none;
position: relative;
}
#baca-juga h2 {
color: #888888;
position: absolute;
top: -15px;
left: 20px;
border: 1px solid #dddddd;
padding: 2px 12px;
font-size: 14px;
background: #f8f8f8;
font-weight: 500;
z-index: 1;
}
#baca-juga a {
font-weight: 500;
font-size: 14px;
display: block;
padding: 0;
}
#baca-juga ul {
max-width: 75%;
margin: 30px 0 20px;
padding: 20px 20px 10px 40px;
position: relative;
border: 1px solid #dddddd;
}
#baca-juga li {
padding: 0px;
margin: .6em 0;
}
#baca-juga, #baca-juga h2 {
 border-radius: 3px;
}
#baca-juga {
 display: block;
} 

@media only screen and (max-width:480px){
#baca-juga {
  max-width: 100%;
 }
}  


3. Berikutnya, cari dan ganti kode <data:post.body/> dengan kode dibawah ini

     <div expr:id='&quot;post1&quot; + data:post.id'/>
<div id='baca-juga'>  
<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&amp;callback=related_results_labels&amp;max-results=5"' type='text/javascript'/>  
</b:if>  
</b:loop>  
</b:if>  
<b:if cond='data:blog.pageType == "item"'>  
<h2>Baca Juga</h2>  
<script type="text/javascript">  
removeRelatedDuplicates();  
printRelatedLabels();  
</script>  
</b:if>  
</div>
<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/2);
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>

Di dalam template sobat akan menemukan beberapa kode <data:post.body/> tergantung template yang digunakan, coba satu persatu sampai artikel terkait muncul di dalam halaman artikel
4. Simpan Template dan lihat hasilnya


Bagaimana mudah tidak? saya harap mudah untuk menerapkannya, kalau susah kalian tinggal berkomentar saja nanti saya jawab jika ada kesulitan saat menerapkan kode diatas.

6 Responses to "Cara Membuat Artikel Terkait Di Tengah Postingan"

  1. kalo membuat gambar seperti ini https://bit.ly/2Hj1O50, bagaimana kang?

    ReplyDelete
    Replies
    1. Itu TOC (Tearm of conten) bisa dibuat menggunakan pemanggilan html .

      Delete
  2. Sekian lama akhir nya nemu yang tepat, makasih ya gan, terus berkarya, jangan lupa baca baca di blog saya gan
    https://junedzgn.blogspot.co.id/

    ReplyDelete
    Replies
    1. siap gan, pastinya donk akan berkarya terus :)

      Delete
  3. caranya biar bisa gradient gitu gimana gan? makasih

    ReplyDelete
    Replies
    1. dibaca sini https://www.kangian.com/2018/04/cara-membuat-gradien-color-dengan.html

      Delete

Centang kotak "NOTIFT ME" agar mendapatkan notifikasi melalui email ketika ada yang membalas komentar kamu.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Δ