Memasang Populer Pos dan Related Pos Bergambar di Blog

Dalam sebuah blog perlu memasang populer pos dan realated pos atau pos terkait. Memasang populer pos bertujuan untuk menampilkan kepada para pembaca bahwa artikel mana saja yang sering di baca oleh para pembaca lainnya, sehingga pembaca atau pengunjung tersebut tertarik untuk membaca juga.
Maka kita pasang populer pos untuk memudahkan pembaca atau pengunjung mengetahui artikel unggulan dalam suatu blog. Biasanya artikel yang ditampilkan berjumlah 5-10 artikel saja, jumlahnya bisa kita atur sesuai keinginan kita.
Untuk memasang populer pos atau pos yang populer dalam blog sebenarnya mudah, tapi untuk blogger pemula mungkin belum tau caranya. saya sekedar sharing saja.
caranya:
1. Buka Dasbor blog pilih tata letak
2. Tambah gadget, terserah mau di letakkan di side bar atau di footer blog
3. klik entri populer atur jumlah entri yang akan ditampilkan kemudian klik simpan

maka lihat blog untuk melihat hasilnya

Untuk membuat related post atau pos/artikel terkait bergambar sebagai berikut

Buka dasbor blog pilih template kemudian klik  edit html, cari kode ]]></b:skin> atau </style>
untuk mempermudah gunakan f3 atau tekan ctrl + f
setelah ketemu letakkan kode berikut diatas kode  ]]></b:skin> atau </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:hover { opacity:.7; filter:alpha(opacity=70); -moz-opacity:.7; -khtml-
opacity:.7; }

kemudian cari kode </head>
letakkan kode berikut diatas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>

masih diatas kode  </head>
letakkan kode berikut

<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.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/-QjSndGbF0No/T-Nt3HgKsDI
/AAAAAAAAG9o/cN6_Oy306rc/s1600
/no-video.gif'}if(relatedTitles[relatedTitlesNum].length>35)relatedTitles[relatedTitlesNum]=relat
edTitles[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(){for(var i=0;i<relatedUrls.length;
i++){if((relatedUrls[i]==currentposturl)||(!(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('<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|related
Urls|write|Get|style||size|8px|text|com|center|color|616469|font|This|Widget|div|seocips|www|ht
tp|href|br|align'.split('|'),0,{}))}
//]]>
</script>

letakkan kode berikut diatas <div class='post-footer'>

     <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div id='related-posts'>
    <b:loop values='data:post.labels' var='label'>
    <b:if cond='data:label.isLast != &quot;true&quot;'>
    </b:if>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=999&quot;' type='text/javascript'/></b:if></b:loop>
    <script type='text/javascript'>
    var currentposturl=&quot;<data:post.url/>&quot;;
    var maxresults=6;
    var relatedpoststitle=&quot;Related Posts :&quot;;
    removeRelatedDuplicates_thumbs();
    printRelatedLabels_thumbs();
    </script>
      </div>
    <div class='clear'/>
    </b:if>

kemudian setelah selesai klik pratinjau terlebih dahulu, kemudian klik simpan template
untuk melihat hasilnya lihat blog, related post ini akan ditampilkan sesuai label yang telah kita buat

kode kode tersebut saya dapatkan dari www.seocips.com

demikian cara memasang populer pos dan related pos di blogspot

semoga bermanfaat...!!!