Artikel terkait merupakan dimana ketika pengunjung sedang membuka suatu artikel pada blog, maka artikel-artikel lain yang terdapat pada blog tersebut akan tampil yang hanya berupa judul postingan dengan sedikit kalimat dan gambar kecil didalamnya.
Dengan adanya atau pemberian artikel terkait akan memudahkan pengunjung untuk melihat artikel-artikel yang bermanfaat lainnya tanpa harus mencari kembali pada search engine atau mensin pencari, selain itu juda akan membuat blog menjadi lebih menarik dan terlihat profesional.
 |
| contoh artiekl terkait |
Langkah-langkah membuat artikel terkait / related posts.
Dibawah ini merupakan langkah-langkah dalam pembuatan artikel terkait pada blog, silahkan ikuti langkah-langkah yang ada.
1. Langkah pertama silahkan masuk pada dashboard blog kamu.
2. Silahkan masuk pada menu Template > Edit HTML.
 |
| keterangan no.2 |
.related-post .post-thumbnail {Penjelasan kode diatas :
z-index: 1;
position: relative;
width: 98px;
height: 98px;
margin: 0;
display: block;
border-right: 1px solid #fff;
border-bottom: 1px solid #fff;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: inset 2px 2px 5px #444;
-moz-box-shadow: inset 2px 2px 5px #444;
box-shadow: inset 2px 2px 5px #555;
}
.related-post {
float: left;
position: relative;
width: 98px;
height: 98px;
margin: 0 10px 10px 0;
background: #F6F6F6;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.related-post .related-post-title {
display: none;
float: left;
background: #000;
color: #fff;
text-shadow: none;
font-weight: bold;
padding: 10px;
position: absolute;
top: -20px;
left: 40px;
z-index: 2;
width: 200px;
-webkit-box-shadow: 0 0 2px #444;
-moz-box-shadow: 0 0 2px #444;
box-shadow: 0 0 2px #444;
}
.related-post:hover .related-post-title {display: block;}
- Kode yang saya beri warna merah merupakan untuk menyesuaikan ukuran tampilan
Artikel terkait : Cara Membuat Widget Multi 3 Kolom3. Langkah selanjutnya silahkan cari kembali kode "<data:post.body/>", lalu copy dan paste kode dibawah ini tepat dibawah kede "<data:post.body/>".
nb: Jika tidak menemukan kode "<data:post.body/>", mungkin di karenakan perbedaan script dari template, silahkan sesuaikan dan letakan kode dibawah ini dibawah kode postingan blog pada template.
<div id='related-posts'>Penjelasan kode diatas :
<b:if cond='data:blog.pageType == "item"'>
<script type='text/javascript'>//<![CDATA[
var ry='<h3>Related Posts</h3>';rn='<h3> No related post available</h3>';rcomment='comments';rdisable='disable comments';commentYN='no';
var dw='';titles=new Array();titlesNum=0;urls=new Array();timeR=new Array();thumb=new Array();commentsNum=new Array();comments=new Array();function related_results_labels(c){for(var b=0;b<c.feed.entry.length;b++){var d=c.feed.entry[b];titles[titlesNum]=d.title.$t;for(var a=0;a<d.link.length;a++){if('thr$total' in d){commentsNum[titlesNum]=d.thr$total.$t+' '+rcomment}else{commentsNum[titlesNum]=rdisable};if(d.link[a].rel=="alternate"){urls[titlesNum]=d.link[a].href;timeR[titlesNum]=d.published.$t;if('media$thumbnail' in d){thumb[titlesNum]=d.media$thumbnail.url}else{thumb[titlesNum]='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWgKiNEpQ9Z_CCrHjNOql8CyJ2hP9pHRThrZJ8FHZrZffbiCio8Fgo11EQyYvFQNMHkN60f62Jw-lKW3h4jLjozH-O7j1ikLb_HDb_fanY62ht4UJdXeon-Mtp9ZRlmUs1taGxj-EwSrMI/'};titlesNum++;break}}}}function removeRelatedDuplicates(){var b=new Array(0);c=new Array(0);e=new Array(0);f=new Array(0);g=new Array(0);for(var a=0;a<urls.length;a++){if(!contains(b,urls[a])){b.length+=1;b[b.length-1]=urls[a];c.length+=1;c[c.length-1]=titles[a];e.length+=1;e[e.length-1]=timeR[a];f.length+=1;f[f.length-1]=thumb[a];g.length+=1;g[g.length-1]=commentsNum[a]}}urls=b;titles=c;timeR=e;thumb=f;commentsNum=g}function contains(b,d){for(var c=0;c<b.length;c++){if(b[c]==d){return true}}return false}function printRelatedLabels(a){var y=a.indexOf('?m=0');if(y!=-1){a=a.replace(/\?m=0/g,'')}for(var b=0;b<urls.length;b++){if(urls[b]==a){urls.splice(b,1);titles.splice(b,1);timeR.splice(b,1);thumb.splice(b,1);commentsNum.splice(b,1)}}var c=Math.floor((titles.length-1)*Math.random());var b=0;if(titles.length==0){dw+=rn}else{dw+=ry;dw+='<div class="clear"/></div><ul>';while(b<titles.length&&b<20&&b<maxresults){if(y!=-1){urls[c]=urls[c]+'?m=0'}if(commentYN=='yes'){comments[c]=' - '+commentsNum[c]}else{comments[c]=''};dw+='<div class="related-post"><div class="related-post-title">'+titles[c]+'</div><a href="'+urls[c]+'" rel="nofollow"><img border="0" class="post-thumbnail" alt="'+titles[c]+'" src="'+thumb[c]+'"/></a></div></div>';if(c<titles.length-1){c++}else{c=0}b++}dw+='</ul>'};urls.splice(0,urls.length);titles.splice(0,titles.length);document.getElementById('related-posts').innerHTML=dw};
//]]></script>
<b:loop values='data:post.labels' var='label'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels"' type='text/javascript'/>
</b:loop>
<script type='text/javascript'>var maxresults=6;removeRelatedDuplicates();printRelatedLabels('<data:post.url/>');</script>
</b:if>
</div>
<div class='clear'/>
- Kode yang saya beri warna biru merupakan jumlah artiel terkait yang tampil
4. Silahkan simpan template dan lihat hasilnya.
Demikian yang dapat saya jelaskan mengenai Cara Membuat Related Post Atau Artikel Terkait Pada Blog, semoga bermanfaat dan tentunya membantu. Terima kasih.
*Jika ada pertanyaan silahkan sampaikan melalui form komentar, dan jika suka dengan artikel ini silahkan klik like, share, atau join fans page untuk mengetahui artikel lainnya.
0 Response to "Cara Membuat Related Post Atau Artikel Terkait Pada Blog"
Post a Comment