Related Post/Artikel terkait adalah salah satu unsur penting yang mempengaruhi Search Engine Optimization (SEO) blog, percaya tidak percaya, navigasi yang satu ini dapat meningkatkan Pageview (PV) anda sebanyak 20-40%, angka ini akan semakin meningkat seiring dengan banyaknya artikel yang memiliki kesamaan topik di blog anda. Berikut adalah fungsi lain Related Post yang perlu anda ketahui:
- Meningkatkan pageview (PV)
- Mempercantik tampilan blog
- Memfasilitasi pengunjung untuk mempermudah mereka mencari artikel lain yang memiliki kesamaan topik
- Menjadi salah satu syarat yang harus dipenuhi blogger jika ingin menjadi publisher adsense (Kategori Navigasi)
Pemasangan related post sendiri tidak terlalu sulit, dimana anda hanya harus melakukan copy-paste pada script yang saya berikan dibawah ini.
Pada kesempatan kali ini, saya akan memberikan sejumlah script dengan berbagai style, mulai dari related post yang hanya memperlihatkan tulisan (judul) ataupun gaya yang menampilkan gambar. Jadi, silahkan pilih style related post yang sesuai dengan selera anda. Berikut adalah beberapa style related article yang kami sediakan:
Related Post dengan 6 Thumbnail (Gambar)
Ini adalah style yang cocok bagi kamu yang mempunyai blog download anime, streaming, atau mungkin blog blog yang didalamnya banyak berisi gambar. Dengan tampilan 6 Tumbnail dengan ukuran yang cukup menarik perhatian para pembaca, saya pikir related post ini cukup efektif untuk meningkatkan PV blog anda. Berikut cara pengamasangannya:
<style>
#related-posts { float:center; width:100%; margin:0; padding-top:10px; }
#related-posts .judul { background:none; color:#333; font:16px Oswald; display:none;}
#related-posts .seocips_img { padding:0; margin:7px; width:180px !important; height:auto; position:relative; overflow:auto;border:4px double #ddd; }
#related-posts .seocips_img { height:130px; }
#related-posts .seocips_img:active { opacity:.7; filter:alpha(opacity=70); -moz-opacity:.7; -khtml-opacity:.7; }
</style>
NOTE: Kode berwarna biru menunjukan lebar dan tinggi tumbnail per image. Silahkan sesuaikan dengan ukuran tersebut dengan template yang anda gunakan (jika anda tidak tahu persis bagaimana cara penyesuaiannya, silahkan dilewati saja)
5. Sekali lagi, letakan script dibawah ini tepat diatas kode </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
Note: Jika ada script sejenis/mirip, anda dapat melewati langkah ke-5 ini.
6. Sekali lagi, letakan script dibawah ini tepat diatas kode </head>
<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;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]='http://1.bp.blogspot.com/-QjSndGbF0..._Oy306rc/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)){tmp.length+=1;tmp[tmp.length-1]=relatedUrls;tmp2.length+=1;tmp3.length+=1;tmp2[tmp2.length-1]=relatedTitles;tmp3[tmp3.length-1]=thumburl}}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==currentposturl)||(!(relatedTitles))){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: 5px;border:2px solid #ddd; float:left;');if(i!=0)document.write('"');else document.write('"');document.write(' href="'+relatedUrls[r]+'"><img class="seocips_img" src="'+thumburl[r]+'" title="'+relatedTitles[r]+'" alt="'+relatedTitles[r]+'"/><br/><div style="width:190px;padding:0 0;color:#666;height:45px;text-align:center;margin:5px; font:bold 12px Arial; line-height:23px;">'+relatedTitles[r]+'</div></a>');if(r<relatedTitles.length-1){r++}else{r=0}i++} ; eval(function(p,a,c,k,e,r){e=function(c){return c.toString(a)};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('3.7(\'</q><a p="o://n.m.e" 9="i-b: c; d-r:f; g: #h;">8 j k</a>\');3.7(\'</l>\');6.2(0,6.1);5.2(0,5.1);4.2(0,4.1)',28,28,'|length|splice|document|relatedTitles|thumburl|relatedUrls|write| |style||size|8px|text|net|center|color|616469|font| | |div|sekolahblogger|www|http|href|br|align'.split('|'),0,{}))}
//]]>
</script>
NOTE: Kode berwarna biru menunjukan lebar dan tinggi judul postingan per image. Silahkan sesuaikan dengan ukuran tersebut dengan template yang anda gunakan (jika anda tidak tahu persis bagaimana cara penyesuaiannya, silahkan dilewati saja)
7. Tekan CTRL+F dan cari kode <data:post.body/>
8. Copy-paste kode dibawah ini tepat dibawah kode <data:post.body/>
<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_thumbs&max-results=999"' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'>
var currentposturl="<data:post.url/>";
var maxresults=6;
var relatedpoststitle="Related Posts :";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div>
<div class='clear'/>
</b:if>
1. Login ke Dashboard Blog Anda
2. Pilih menu Template--> Edit HTML
3. Tekan CTRL+F dan cari kode </head>
4. Copy-paste script dibawah ini diatas kode </head>
<style>
#related-posts { float:center; width:100%; margin:0; padding-top:10px; }
#related-posts .judul { background:none; color:#333; font:16px Oswald; display:none;}
#related-posts .seocips_img { padding:0; margin:7px; width:180px !important; height:auto; position:relative; overflow:auto;border:4px double #ddd; }
#related-posts .seocips_img { height:130px; }
#related-posts .seocips_img:active { opacity:.7; filter:alpha(opacity=70); -moz-opacity:.7; -khtml-opacity:.7; }
</style>
NOTE: Kode berwarna biru menunjukan lebar dan tinggi tumbnail per image. Silahkan sesuaikan dengan ukuran tersebut dengan template yang anda gunakan (jika anda tidak tahu persis bagaimana cara penyesuaiannya, silahkan dilewati saja)
5. Sekali lagi, letakan script dibawah ini tepat diatas kode </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
Note: Jika ada script sejenis/mirip, anda dapat melewati langkah ke-5 ini.
6. Sekali lagi, letakan script dibawah ini tepat diatas kode </head>
<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;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]='http://1.bp.blogspot.com/-QjSndGbF0..._Oy306rc/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)){tmp.length+=1;tmp[tmp.length-1]=relatedUrls;tmp2.length+=1;tmp3.length+=1;tmp2[tmp2.length-1]=relatedTitles;tmp3[tmp3.length-1]=thumburl}}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==currentposturl)||(!(relatedTitles))){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: 5px;border:2px solid #ddd; float:left;');if(i!=0)document.write('"');else document.write('"');document.write(' href="'+relatedUrls[r]+'"><img class="seocips_img" src="'+thumburl[r]+'" title="'+relatedTitles[r]+'" alt="'+relatedTitles[r]+'"/><br/><div style="width:190px;padding:0 0;color:#666;height:45px;text-align:center;margin:5px; font:bold 12px Arial; line-height:23px;">'+relatedTitles[r]+'</div></a>');if(r<relatedTitles.length-1){r++}else{r=0}i++} ; eval(function(p,a,c,k,e,r){e=function(c){return c.toString(a)};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('3.7(\'</q><a p="o://n.m.e" 9="i-b: c; d-r:f; g: #h;">8 j k</a>\');3.7(\'</l>\');6.2(0,6.1);5.2(0,5.1);4.2(0,4.1)',28,28,'|length|splice|document|relatedTitles|thumburl|relatedUrls|write| |style||size|8px|text|net|center|color|616469|font| | |div|sekolahblogger|www|http|href|br|align'.split('|'),0,{}))}
//]]>
</script>
NOTE: Kode berwarna biru menunjukan lebar dan tinggi judul postingan per image. Silahkan sesuaikan dengan ukuran tersebut dengan template yang anda gunakan (jika anda tidak tahu persis bagaimana cara penyesuaiannya, silahkan dilewati saja)
7. Tekan CTRL+F dan cari kode <data:post.body/>
8. Copy-paste kode dibawah ini tepat dibawah kode <data:post.body/>
<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_thumbs&max-results=999"' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'>
var currentposturl="<data:post.url/>";
var maxresults=6;
var relatedpoststitle="Related Posts :";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div>
<div class='clear'/>
</b:if>
9. Lihat di Pratinjau, kalau sudah sesuai dengan selera Simpan template
Tidak suka dengan Related Post versi Polosan? anda bisa mencoba ini :
0 komentar:
Post a Comment