 |
| Cara membuat related post |
Flukutu.com – Releted post merupakan referensi artikel terkait yang letaknya bermacam-macam, ada yang ditengah postingan / artikel, ada juga yang berada dibawah postingan.
Pada artikel kali ini kita akan menulis tutorial cara membuat related post atau artikel terkait dibawah postingan bog.
Fungsi Related Post
Related Post berfungsi sebagai internal links sekaligus navigasi menu. Widget ini untuk meningkatkan pageviews dan “menggoda” pengunjung membaca sebanyak mungkin koten blog kita.
Widget ini tidak ada dalam template blog bawaan Blogger. Jadi, kita harus memasang sendiri. Berikut ini cara membuatnya.
Cara Membuat Related Post di Bawah Postingan Blog
Berikut tampilan awal sebelum memiliki related post dibawah postingan blog
1. Klik Tema > Edit HTML
2. Simpan kode CSS Related Post simple berikut ini di atas kode </head>
<b:if cond='data:blog.pageType == "item"'><style type='text/css'>#related-posts {margin: 15px 0px;}#related-posts h2 {font-size:16px;font-weight: bold;color: #666;margin-bottom: 0.75em;}#related-posts a {font-size: 14px;color: #333;border-bottom:1px dotted #E2E2E2;display:block;padding:5px 0;text-decoration: none;}#related-posts a:hover {color: #48d;}#related-posts ul {padding: 0px;list-style-type: none;}#related-posts li {padding: 0;}</style><script type='text/javascript'>var relatedpoststitle="Related Posts";</script><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(currenturl){for(var i=0;i<relatedUrls.length;i++){if(relatedUrls[i]==currenturl){relatedUrls.splice(i,1);relatedTitles.splice(i,1)}}var r=Math.floor((relatedTitles.length-1)*Math.random());var i=0;if(relatedTitles.length>1){document.write('<h2>'+relatedpoststitle+'</h2>')}document.write('<ul>');while(i<relatedTitles.length&&i<20&&i<maxresults){document.write('<li><a href="'+relatedUrls[r]+'">'+relatedTitles[r]+'</a></li>');if(r<relatedTitles.length-1){r++}else{r=0}i++}document.write('</ul>');relatedUrls.splice(0,relatedUrls.length);relatedTitles.splice(0,relatedTitles.length);}//]]></script></b:if>3. Simpan kode HTML/Javascript Related Post berikut ini di bawah kode <div class=’post-footer-line post-footer-line-3′> atau di bawah kode <div class=’post-footer’>
<b:if cond='data:blog.pageType == "item"'><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&max-results=6"' type='text/javascript'/></b:if></b:loop><script type='text/javascript'> var maxresults=5; removeRelatedDuplicates(); printRelatedLabels("<data:post.url/>"); </script></div></b:if>4. Simpan
5. Maka hasilnya akan menjadi seperti ini .
Demikianlah tutorial kali ini tentang cara membuat related post dibawah postingan blog, semoga penyampaian ini dapat di mengerti dan bermanfaat kepada pembaca situs ini.