cara membuat related post didalam artikel , Otomatis (artikel terkait Ditengah artikel)

cara membuat related post didalam artikel , Otomatis (artikel terkait Ditengah artikel)

 

Cara membuat Related post/Artikel terkati di dalam atau di tengah artikel/ postingan –  Baiklah dalam kesempatan kali Ini admin akan memberikan tutorial cara membuat artikel terkaiit atau related post didalam artikel penampakannya bisa lihat seperti gambar di atas sobat kreatipku .

Dalam hal ini untuk pembuatan related post ditengah artikel terbilang cukup mudah dan simpel  dan banyak  sekali kelebihannya setelah kita memasangnya sobat diantaranya adalah kita tidak usah cape – cape untuk menulis artikel terkait secara Manual karna berkat hal ini kita bisa langsung otomatis di setiap artikel ada  related post nya dan itu pun didalam artikelnya alias di tengah artikel .

 Baik mari kita simak baik baik Tutorialnya :
-Masuk ke blogger 
-Masuk ke Template -> Edit html

Cari code dengan menggunakan ctrl+F supaya lebih mudah cari : </head>
dan pastekan di atasnya script dibawah ini 

===============================> <=====================================

===============================> <=====================================

===============================> <=====================================
===============================> <=====================================
===============================> <=====================================
===============================> <=====================================
<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>

langkah selanjutnya cari kode <data:post.body/> biasanya ada 2/3 bahkan lebih silahkan pilih yang kedua/ke 3 saya sih biasanya menggunakan yang ketiga karna yang ke 2 suka tidak muncul .

ganti kode di atas dengan script 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>
<h4><a href=”kreatipku.blogspot.com”>Baca Juga</a></h4>
<script type=’text/javascript’>
removeRelatedDuplicates();
printRelatedLabels();
</script>
</div>
<div expr:id=’&quot;post2&quot; + data:post.id’ class=’artbody’ itemprop=’articleBody description’><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>

Langkah terakhir untuk memanggil code di atas cari code ]]></b:skin> dan pastekan di atas nya kode di bawah ini 
/* Related Post di dalam postingan by Bung Frangki */
.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}
dan silahkan save dan lihat hasilnya :D 
Jika ada yang di tanyakan silahkan berkomentar sobat kreatipku .
Tags :  

cara membuat related post di blogger,cara membuat artikel terkait di blog wordpress,cara membuat recent post,cara membuat related post thumbnail di blogger,cara membuat related post bergambar,cara membuat related post thumbnail di bawah postingan,cara membuat related post keren,related post blogger,cara membuat recent post,cara membuat recent post di blog,cara membuat related post bergambar,cara membuat related post thumbnail di blogger,cara membuat related post thumbnail di bawah postingan,membuat related post keren,related post blogger,membuat related post responsive,cara membuat recent post berjalan di blog,membuat widget recent post,cara membuat widget komentar di blogspot,recent post blogger widget,widget komentar di blog,kumpulan widget untuk blog,gadget keren buat blog,widget keren blogger

Leave a reply "cara membuat related post didalam artikel , Otomatis (artikel terkait Ditengah artikel)"