Banyak cara untuk membuat pengunjung blogger betah berlama-lama mengakses halaman blog kita. Selain dari segi display atau layout blog dengan visual friendly, fasilitas untuk mempermudah pengunjung melihat artikel-artikel yang terkait dengan konten yang sedang ia buka menjadi salah satu trik atau cara jitu untuk membuat pengunjung betah berlama-lama membuka blog kita. Cara ini tentunya bertujuan agar pengunjung tak hanya membuka dan membaca konten yang sedang ia baca saat itu, melainkan blogger bisa menyajikan berita atu konten yang lain yang tentunya satu tema dengan konten yang sedang ia baca saat itu.
Cara ini bisa berupa penempatan daftar isi related post di halaman blog kita. Jika kalian ingin memasang daftar isi di blog yang menampilkan lebih banyak konten yang ada di blog kalian, silahkan baca dan praktikkan saja "Cara Membuat Daftar Isi di Blog".
Nah, pada kesempatan kali ini kita akan membahas tentang penyematan fasilitas Related Post di bawah postingan. Hal ini agar saat pengunjung blog kita selesai membaca satu artikel atau konten, ia tak mencoba untuk buru-buru meninggalkan blog kita, akan tetapi ia akan melihat konten yang lainnya dan tentunya serupa. Paling tidak ini cara ampuh untuk menarik pengunjung untuk lebih banyak membuka konten-konten yang terkait di blog kita.
Lalu bagaimana Caranya Menambahkan Related Post di Bawah Postingan, silahkan perhatikan langkah-langkah di bawah ini :
1. Mari kita buka halaman dashboard blog kita masing-masing dan masuk ke Templates -> Edit HTML.
2. Cari kode </head> dengan memanfaatkan CTRL+F untuk mempermudah pencarian.
3. Jika sudah ketemu, silahkan letakkan kode di bawah ini tepat sebelum kode tersebut.
<style>
#related-posts {
float: left;
width: 650px;
border-bottom: 1px solid #ddd;
height: 290px;
}
#related-posts h2 {
margin-top: 50px;
border-bottom: 0px;
border-top: 1px solid #ddd;
padding-top: 20px;
margin-bottom: 10px;
margin-left: 3px;
color: #666;
font-size: 16px;
}
</style>
<b:if cond='data:blog.pageType == "item"'>
<script type='text/javascript'>
var defaultnoimage="http://3.bp.blogspot.com/-PpjfsStySz0/UF91FE7rxfI/AAAAAAAACl8/092MmUHSFQ0/s1600/no_image.jpg";
var maxresults=3;
var splittercolor="#fff";
var relatedpoststitle="Related Articles:";
</script>
<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.media$thumbnail.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 {if(typeof(defaultnoimage) !== 'undefined') thumburl[relatedTitlesNum]=defaultnoimage; else thumburl[relatedTitlesNum]="http://3.bp.blogspot.com/-PpjfsStySz0/UF91FE7rxfI/AAAAAAAACl8/092MmUHSFQ0/s1600/no_image.jpg";}
}
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(current) {
var splitbarcolor;
if(typeof(splittercolor) !== 'undefined') splitbarcolor=splittercolor; else splitbarcolor="#DDDDDD";
for(var i = 0; i < relatedUrls.length; i++)
{
if((relatedUrls[i]==current)||(!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('<h2>'+relatedpoststitle+'</h2>');
document.write('<div style="clear: both;"/>');
while (i < relatedTitles.length && i < 20 && i<maxresults) {
document.write('<a style="text-decoration:none;padding:5px;float:left;');
if(i!=0) document.write('border-left:solid 0.5px '+splitbarcolor+';"');
else document.write('"');
document.write(' href="' + relatedUrls[r] + '"><img style="width:200px;height:120px;border:0px;" src="'+thumburl[r]+'"/><br/><div style="padding-left:3px;height:65px;border: 0pt none ; margin: 3px 0pt 0pt; padding: 0pt; font-style: normal; font-variant: normal; font-weight: normal; font-size: 12px; line-height: normal; font-size-adjust: none; font-stretch: normal;">'+relatedTitles[r]+'</div></a>');
i++;
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
}
document.write('</div>');
relatedUrls.splice(0,relatedUrls.length);
thumburl.splice(0,thumburl.length);
relatedTitles.splice(0,relatedTitles.length);
}
//]]>
</script>
</b:if>
3. Selanjutnya, kita cari kode <data:post.body/> , jika ketemu silahkan letakkan script di bawah ini sebelum kode tersebut. Tapi jika kalian tidak menemukan kode di atas, kalian bisa meletakkan kode di bawah ini setelah kode <div class='post-footer-line post-footer-line-1'></div> .
<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>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs("<data:post.url/>");
</script>
</div></b:if>
4. Jika sudah selesai, bisa langsung klik Simpan.
Perhatian :
Kalian bisa mengganti angka yang berwarna merah di atas menyesuaikan lebar halaman posting blog kalian masing-masing, dan Height untuk menentukan lebar blok Related Post-nya nanti.
Semoga bermanfaat dan silahkan mencobanya :)