Cara Membuat Related Post Di Wordpress

Cara Membuat Related Post Bergambar Di Blogspot - Dengan pagi ini saya akan kasih anda tau bagai mena caranyaa ? Cara Membuat Related Post Bergambar Di Blogspot di bawah postingan , seperti yang anda lihat pada setiap blog pasti ada menu Related Post .Kran menu Related Post ini bukan hanya mempercantik tanpilan blog kita saja.

Banyak manfaat dan kelibihanyaa saya akan tentang menu Related Post tersbut. Related Post ini adalah sebagian menu yang otomatis keluwar dari menu label jika anda orang yang membaca artikel anda dengan kata beral dari lebel nya komputer maka akan otomatis menu Related Post juga akan tampil dengan secara otomatis akan menampilkan komputer juga maka menu Related Post ini adalah menu sebagian yang paling wajib dan harus ada pada blog kita anda bisa lihat pada gambar di abwah ini.

Seperti yang anda lihat di atas itu tampailan menu Related Post yang kita akan pasang dan bahas cara pemasangannya sakrang kita langsung saja mulay pada tutorial Cara Membuat Related Post Bergambar Di Blogspot di bawah ini.

Langkah Pertama..

1. Login Blogger anda masing-masing

2. Kamu pilih menu Template>>Edit Html kemudian takan kibot CTRL+F

3. Kemudian kamu cari kode yang bernama </Head> jika sudah ketemu kamu copykan saja kode di bawah di atas kode </head> ini.

<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
#related-posts{float:left;width:100%;border-top:3px solid #ddd;margin:5px 0}
#related-posts .judul{background:none;color:#333;font:17px Oswald;padding:5px 0}
#related-posts .maskolis_img {padding:0 0;width:100px;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>
<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/AVvXsEhaUWdQgl3xPbV9QyW6puDhRVk62YgRseNwVLcdk2wy-vVBn0j_WyExwn0J9IWqfPW78UQSJmJ3KvSDxbcIP9jT0i2fUJ3KbFKUqHzRvq9Mo8Dmz6SM0-NJ7rU0JWvPzY0GJyWLbE7HGONL/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:100px;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>
</b:if>

4. Dalam masih Edit Html kamu langsung saja car kode yang bernama <data:post.body/> jika sudah ketemu anda bisa copy kan saja kode di bawah di bawah kode <data:post.body/> ini ,Jika kode <data:post.body/> ini ada tiga kamu bisa saja jajal satu per satu yang penting kamu tau.

<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=8"' type='text/javascript'/>
</b:if>
</b:loop>
<script type='text/javascript'>
var currentposturl="<data:post.url/>";
var maxresults=5;
var relatedpoststitle=" <i class='fa fa-level-down'/> Related Posts :";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div>
<div class='clear'/>

5. Langkah berikutnyaa kamu tinggal save aja dan kamu coba buka tab baru jika anda berhasil maka menu Related Post akan tanpil seperti pada gambar di atas jika anda mau seting dan sesuwaikan lebar tinggi anda bisa baca di bawah ini.

Keterangnyaa

#related-posts .maskolis_img {padding:0 0;width:100px; ukran font yang akan tanpil
<img class="maskolis_img" src="'+thumburl[r]+'"/><br/><div style="width:100px; Adalah ukuran besar kecil gambar
var maxresults=5; Adalah jumblah yang akan di tanpilkan

Demikianlah pada tutorialkali ini tentang Cara Membuat Related Post Bergambar Di Blogspot ,jika anda suka pada psotingan/artikel yang saya buat ini anda bisa like dan shree pada teman-teman anda di blogger atau di mendia sosial saya ucakap kan trimakasih ke pada anda telah mejungi blog Tutorialcid semoga bermanpaat bagi anda wasalam.

Lokasi:

Cara Membuat Related Post Di Wordpress

Langkah Pertama..

Menu Halaman Statis