Cara Membuat Related Post Untuk Blogspot

Zona Internetku No Comment September 12, 2018

Cara Membuat Related Post Untuk Blogspot. Related Post atau widget yang sering di sebut baca juga merupakan sebuah widget navigasi yang berisi tentang artikel yang terkait dengan artikel yang sedang di baca oleh pengunjung blog (ada kaitannya satu artikel dengan artikel lainnya yang di tandai dengan label yang sama pada setiap artikel).
Fungsi widget related post ini sangat berguna sekali bagi para pengunjung blog kita, karena para pengunjung tidak perlu repot repot untuk melakukan pencarian yang rumit pada blog kita untuk mencari artikel yang saling terkait satu sama lain.

Cara Menambahkan Widget Related Post Di Bawah Postingan Untuk Blogspot

1. Masuk ke dalam blog dan pilih menu "Tema" dan klik "Edit HTML"
2. Cari kode <data:post.body/> Pilih beberapa tampilan menu related post berikut ini dan letakkan kode widget tersebut

>> Membuat Widget Simple Related Post

<style>
.title_RelPost{font-size:20px;background:#3781dbfc;color:#fff;margin:4px 0}
div .rel_post{display:block;padding:1px;margin:2px}
div .rel_post a{color:red;text-decoration:none;font-weight:bold}
</style>
<script type="text/javascript">
//<![CDATA[
eval(function(p,a,c,k,e,d){e=function(c){return c};if(!''.replace(/^/,String)){while(c--){d[c]=k[c]||c}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('3 5=16 17();3 18=0;3 6=16 17();19 31(24){15(3 2=0;2<24.25.7.4;2++){3 7=24.25.7[2];5[18]=7.33.$34;15(3 12=0;12<7.22.4;12++){20(7.22[12].35==\'32\'){6[18]=7.22[12].28;18++;36}}}}19 47(){3 8=16 17(0);3 10=16 17(0);15(3 2=0;2<6.4;2++){20(!29(8,6[2])){8.4+=1;8[8.4-1]=6[2];10.4+=1;10[10.4-1]=5[2]}}6=8;5=10}19 29(11,27){15(3 13=0;13<11.4;13++)20(11[13]==27)30 42;30 38}19 40(){3 9=26.41((5.4-1)*26.45());3 2=0;23.21(\'<14>\');37(2<5.4&&2<39){23.21(\'<14 43="46"><11 28="\'+6[9]+\'">\'+5[9]+\'</11></14>\');20(9<5.4-1){9++}44{9=0}2++}23.21(\'</14>\')}',10,48,'||i|var|length|relT|relUrl|entry|tmp|r|tmp2|a|k|j|div|for|new|Array|relTNum|function|if|write|link|document|json|feed|Math|e|href|contains|return|related_results_labels|alternate|title|t|rel|break|while|false|maxpost|printRelatedLabels|floor|true|class|else|random|rel_post|removeRelatedDuplicates'.split('|'),0,{}))

//]]>
</script>

<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"'>
<h4 class='title_RelPost'>Artikel Terkait</h4>
<script type="text/javascript">
var maxpost=4;
var thumbRes=30;
removeRelatedDuplicates();
printRelatedLabels();
</script>
</b:if>

untuk mengatur jumlah artikel yang muncul pada widget related post, kalian bisa mengaturnya di kode berikut
var maxpost=4;
ganti angka 4 dan isi dengan jumlah postingan yang kalian inginkan

>> Membuat Widget Related Post Keren Dengan Thumbnail Ala Pakdhe Johny Karya Maskolis

<script type="text/javascript">
//<![CDATA[
var relatedTitles=new Array();
var relatedTitlesNum=0;
var relatedUrls=new Array();
var thumburl=new Array();
function related_results_labels_thumbs(json){
for(var i=0;i<json.feed.entry.length;i++){var entry=json.feed.entry[i];relatedTitles[relatedTitlesNum]=entry.title.$t;
try{thumburl[relatedTitlesNum]=entry.gform_foot.url}catch(error){s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl[relatedTitlesNum]=d}else thumburl[relatedTitlesNum]='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWYyldPjeupNn4z5ij7VbR1gFZhNDNQelA_R4n7xyL8P5siXPPmXSZc5pg5020kaP41MX4x1Y60_0ecyY48u1yeKhfR_C7pyZNZSQLHZWNslf-ezOCnaEjlFae4iqOj67fnsdwRKZgiWoN/s1600/no-video.gif'}
if(relatedTitles[relatedTitlesNum].length>35)relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0,35)+"...";
for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){
relatedUrls[relatedTitlesNum]=entry.link[k].href;
relatedTitlesNum++}}}}
function removeRelatedDuplicates_thumbs(){var tmp=new Array(0);var tmp2=new Array(0);var tmp3=new Array(0);for(var i=0;i<relatedUrls.length;i++){if(!contains_thumbs(tmp,relatedUrls[i])){tmp.length+=1;tmp[tmp.length-1]=relatedUrls[i];tmp2.length+=1;tmp3.length+=1;tmp2[tmp2.length-1]=relatedTitles[i];tmp3[tmp3.length-1]=thumburl[i]}}relatedTitles=tmp2;relatedUrls=tmp;thumburl=tmp3}
function contains_thumbs(a,e){for(var j=0;j<a.length;j++)if(a[j]==e)return true;return false}
function printRelatedLabels_thumbs(){
for(var i=0;i<relatedUrls.length;i++){
if((relatedUrls[i]==currentposturl)||(!(relatedTitles[i]))){relatedUrls.splice(i,1);relatedTitles.splice(i,1);thumburl.splice(i,1);i--}}var r=Math.floor((relatedTitles.length-1)*Math.random());var i=0;
if(relatedTitles.length>0)document.write('<div class="judul">'+relatedpoststitle+'</div>');document.write('<div style="clear: both;"/>');
while(i<relatedTitles.length&&i<20&&i<maxresults){document.write('<a style="text-decoration:none;margin:0 12px 10px 0;float:left;');if(i!=0)document.write('"');else document.write('"');document.write(' href="'+relatedUrls[r]+'"><img class="maskolis_img" src="'+thumburl[r]+'"/><br/><div style="width:140px;padding:0 0;color:#666;height:35px;text-align:center;margin:0px 0px; font:bold 11px Arial; line-height:14px;">'+relatedTitles[r]+'</div></a>');if(r<relatedTitles.length-1){r++}else{r=0}i++}document.write('</div>');relatedUrls.splice(0,relatedUrls.length);thumburl.splice(0,thumburl.length);relatedTitles.splice(0,relatedTitles.length)}//]]>
</script>
<div id='related-posts'>
                          <b:loop values='data:post.labels' var='label'>
                            <b:if cond='data:label.isLast != &quot;true&quot;'>
                            </b:if>
                            <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_thumbs&amp;max-results=8&quot;' type='text/javascript'/>
                            </b:if>
                          </b:loop>
                          <script type='text/javascript'>
                            var currentposturl=&quot;<data:post.url/>&quot;;
                            var maxresults=4;
                            var relatedpoststitle=&quot;Related Posts :&quot;;
                            removeRelatedDuplicates_thumbs();
                            printRelatedLabels_thumbs();
                          </script>
                        </div>
                        <div class='clear'/>
      
<style>
#related-posts{float:left;width:100%;border-top:3px solid #ddd;margin:5px 0}
#related-posts .judul{background:none;color:#333;font:16px Oswald;padding:5px 0}
#related-posts .maskolis_img {padding:0 0;width:140px;height:95px;transition:all 400ms ease-in-out;-webkit-transition:all 400ms ease-in-out;-moz-transition:all 400ms ease-in-out;-o-transition:all 400ms ease-in-out;-ms-transition:all 400ms ease-in-out}
#related-posts .maskolis_img:hover{opacity:.7;filter:alpha(opacity=70);-moz-opacity:.7;-khtml-opacity:.7}
</style>

Untuk mengatur jumlah postingan pada menu related post ini cukup mencari kode
var maxresults=4;
dan ganti angka 4 dengan jumlah postingan artikel terkait yang kalian inginkan

3. Jika sudah selesai memilih dan menerapkan kode tersebut pada blog kalian, maka jangan lupa juga untuk menyimpan perubahan template blog kalian dengan mengklik "Simpan Tema"

Baca juga :
Cara Memasang Menu Breadcrumbs Di Blogspot
Cara Membuat Auto Readmore Keren Otomatis
Cara Membuat Menu Navigasi Dropdown Sederhana

Demikian tutorial singkat mengenai Cara Membuat Related Post Untuk Blogspot yang dapat saya sampaikan, dan jangan lupa untuk mengirim kritik dan sarannya untuk mengembangkan blog ini supaya lebih berkualitas lagi, Terima kasih.

Promo Menarik