Cara Memasang Related Posts (Tulisan Terkait) Simple Keren Di Blogger
Minggu, 26 Juli 2015
Edit
Related Posts, Related Articles, Posting Terkait, atau Tulisan Terkait yaitu widget atau elemen yang biasa ada di bawah setiap goresan pena di blog.
Fungsinya menampilkan posting lain yang se-label atau kategori sama sekaligus mengatakan konten blog lain sehabis pengunjung tamat membaca satu tulisan.
Widget Related Posts ini menciptakan blog atau website lebih ramah mesin telusur (seo friendly) dan ramah pengguna (user friendly).
Widget Related Posts tidak ada di template bawaan blogger. Jika Anda memakai template default blogger dan akan menambahkan widget related post, lakukan langkah di bawah ini.
Cara Memasang Widget Related Posts (Tulisan Terkait) di Blogger
Yang berikut ini memasang jenis posting terkait simple, hanya berupa judul posting, ibarat yang saya pasang di blog DTE.1. Di dashboard blogger: klik "Template" > "edit HTML"
2. Cari (Ctrl+F) arahan ]]></b:skin>
3. Copy & Paste arahan berikut ini di atas arahan ]]></b:skin>
#related-posts{float:left;width:100%;margin:10px;padding:1px 0 10px}
#related-posts .widget h2,#related-posts h3{font:18px Oswald;color:#000;text-transform:none;margin:0 0 10px;padding:0;font-weight:500}
#related-posts a{color:#0973CF;font:14px Arial,Sans-serif;}
#related-posts li{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDmmN1NKRsnzxVOEk4_uyIFVYxp54XNcBoLzbEKqCzjtCUNO3A9cUUt4UEu9AAMJbc46ztIOrl81EGF3ey6d0xf6g1xgMeXctHEsmhbo7VmCc-28k8twfadvUexvwabgUTfy6lSMOJDf4/s1600/bullet-list.gif) no-repeat 0 10px;text-indent:0;line-height:1.3em;border-bottom:1px dotted #ccc;margin:0;padding:3px 0 8px 12px}
#related-posts a:hover{color:#c00;text-decoration:none}
#related-posts .widget{margin:0;padding:0}
#related-posts ul{list-style:none;margin:0;padding:0}
3. Cari arahan </head>
4. Copas arahan berikut ini di atasnya:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type='text/javascript'>
var numposts = 5;
var showpostthumbnails = false;
var showpostdate = false;</script>
<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(c){for(var b=0;b<c.feed.entry.length;b++){var d=c.feed.entry[b];relatedTitles[relatedTitlesNum]=d.title.$t;for(var a=0;a<d.link.length;a++){if(d.link[a].rel=="alternate"){relatedUrls[relatedTitlesNum]=d.link[a].href;relatedTitlesNum++;break}}}}function removeRelatedDuplicates(){var b=new Array(0);var c=new Array(0);for(var a=0;a<relatedUrls.length;a++){if(!contains(b,relatedUrls[a])){b.length+=1;b[b.length-1]=relatedUrls[a];c.length+=1;c[c.length-1]=relatedTitles[a]}}relatedTitles=c;relatedUrls=b}function contains(b,d){for(var c=0;c<b.length;c++){if(b[c]==d){return true}}return false}function printRelatedLabels(a){for(var b=0;b<relatedUrls.length;b++){if(relatedUrls[b]==a){relatedUrls.splice(b,1);relatedTitles.splice(b,1)}}var c=Math.floor((relatedTitles.length-1)*Math.random());var b=0;if(relatedTitles.length>1){document.write("<h3>"+relatedpoststitle+"</h3>")}document.write("<ul>");while(b<relatedTitles.length&&b<20&&b<maxresults){document.write('<li><a href="'+relatedUrls[c]+'">'+relatedTitles[c]+"</a></li>");if(c<relatedTitles.length-1){c++}else{c=0}b++}document.write("</ul>");relatedUrls.splice(0,relatedUrls.length);relatedTitles.splice(0,relatedTitles.length)};
//]]>
</script>
Kode warna merah gak usah ditambahkan kalau sudah ada di template blog Anda.
5. Cari arahan <div class='post-footer'> atau <data:post.body/>
6. Copas arahan berikut ini di atas arahan <div class='post-footer'> atau <data:post.body/> yang kedua:
<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<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&max-results=5"' type='text/javascript'/></b:loop>
<script type='text/javascript'>
var maxresults=5;
removeRelatedDuplicates(); printRelatedLabels("<data:post.url/>");
</script>
</div>
<div class='clear'/>
<div style='clear: both;'/>
</b:if>
7. Save Template!
Simpan. Beres.
Itu ia Cara Memasang Widget Related Posts (Tulisan Terkait) Simple di Blogger. Wasalam. ().*