Recent Post atau Artikel Terbaru ini memang lebih bagus di bandingkan dengan pupuler post, tapi kebanyakan para sahabat blogger tidak menyadarinya. Namun jika sobat mau menggunakan populer post, saya sarankan menngunakan opsi mingguan. Biar semua post bisa naik dalam indexnya di google, baiklah mari kita pelajari triknya.
Maaf jika gambarnya tidak sopan, karena saya ambilkan dari blog sebelah.
Membuat Recent Post With Thumbnail Seo Valid HTML5
Langkah 1
Login ke akun blogger sobat.
Langkah 2
Masuk ke Tata Letak atau Layout.
Langkah 3
Add Gadget lalu pilih Html/javascript.
Langkah 4
Copy kode berikut lalu pastekan di gadget tersebut,
<div class="widget-content">
<style scoped="">
img.recent_thumb {width:72px;height:72px;float:left;padding:3px;margin:0 2px 2px 0;}
.recent_posts_with_thumbs {font-weight:bold;font-size:24px;}
ul.recent_posts_with_thumbs li {font-size:18px;color:#888;overflow:hidden;}
.recent_posts_with_thumbs a {text-decoration:none;font-weight:normal;}
.recent_posts_with_thumbs normal {font-size:20px;}
</style>
<script type="text/javascript">
//<![CDATA[
function showrecentpostswiththumbs(json) {document.write('<ul class="recent_posts_with_thumbs">'); for (var i = 0; i < numposts; i++) {var entry = json.feed.entry[i];var posttitle = entry.title.$t;var posturl;if (i == json.feed.entry.length) break;for (var k = 0; k < entry.link.length;k++){
if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){var commenttext=entry.link[k].title;var commenturl=entry.link[k].href;}
if (entry.link[k].rel == 'alternate') {posturl = entry.link[k].href;break;}}var thumburl;try {thumburl=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=d;} else thumburl='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8MEdeRtrAvt6I6bvdoaGrqSNltW8OEOhbY1yhztpGM9VSKAkeVIuHYmv2MscMgQHRA1G6dY4fvTPpMfITlSwfl15jjcRta2hdSnpMiTiZxjWshdEGDKIAVM08s_I62e8wGkgh92FT9XAX/s320/noimage.png';
}
var postdate = entry.published.$t;var cdyear = postdate.substring(0,4);var cdmonth = postdate.substring(5,7);var cdday = postdate.substring(8,10);var monthnames = new Array();monthnames[1] = "Jan";monthnames[2] = "Feb";monthnames[3] = "Mar";monthnames[4] = "Apr";monthnames[5] = "May";monthnames[6] = "Jun";monthnames[7] = "Jul";monthnames[8] = "Aug";monthnames[9] = "Sep";monthnames[10] = "Oct";monthnames[11] = "Nov";monthnames[12] = "Dec";document.write('<li class="clearfix">');
if(showpostthumbnails==true)
document.write('<img class="recent_thumb" src="'+thumburl+'" title="'+posttitle+'" alt="'+posttitle+'"/>');
document.write('<b><a class="alink" href="'+posturl+'" title="'+posttitle+'" target ="_blank">'+posttitle+'</a></b><br>');
if ("content" in entry) {
var postcontent = entry.content.$t;}
else
if ("summary" in entry) {
var postcontent = entry.summary.$t;}
else var postcontent = "";
var re = /<\S[^>]*>/g;
postcontent = postcontent.replace(re, "");
if (showpostsummary == true) {
if (postcontent.length < numchars) {
document.write('<i>');
document.write(postcontent);
document.write('</i>');}
else {
document.write('<i>');
postcontent = postcontent.substring(0, numchars);
var quoteEnd = postcontent.lastIndexOf(" ");
postcontent = postcontent.substring(0,quoteEnd);
document.write(postcontent + '...');
document.write('</i>');}
}
var towrite='';var flag=0;
document.write('<br><strong>');
if(showpostdate==true) {towrite=towrite+monthnames[parseInt(cdmonth,10)]+'-'+cdday+' - '+cdyear;flag=1;}
if(showcommentnum==true)
{
if (flag==1) {towrite=towrite+' | ';}
if(commenttext=='1 Comments') commenttext='1 Comment';
if(commenttext=='0 Comments') commenttext='Add Comment';
commenttext = '<a class="alink" href="'+commenturl+'" target ="_top">'+commenttext+'</a>';
towrite=towrite+commenttext;
flag=1;
;
}
if(displaymore==true)
{
if (flag==1) towrite=towrite+' | ';
towrite=towrite+'<a class="alink" href="'+posturl+'" title="'+posttitle+'" class="url" target ="_top">More -></a>';
flag=1;
;
}
document.write(towrite);
document.write('</strong></li>');
if(displayseparator==true)
if (i!=(numposts-1))
document.write('<hr size=0.5>');
}document.write('</ul>');
}
//]]>
</script>
<script>
var numposts = 10;
var showpostthumbnails = true;
var displaymore = false;
var displayseparator = false;
var showcommentnum = false;
var showpostdate = false;
var showpostsummary = true;
var numchars = 150;
</script>
<script src="http://azhallea.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs" type="text/javascript"></script>
</div>
Keterangan:
*Ganti link "http://azhallea.blogspot.com" dengan link blog sobat.
*Untuk ukuran teks silahkan ganti angka 18 dengan kesukaan sobat dan sesuai template blog sobat tentunya.
Langkah 5
Save html/javascript tersebut lalu lihat hasilnya di blog sobat.
Langkah 6
Jika memang sudah muncul widgetnya di blog sobat maka sobat buka template sobat lalu hapus kode berikut "<b:include name='quickedit'/>" agar benar-benar valid html5.
Langkah 7
Save template sobat
Langkah 6
Jika memang sudah muncul widgetnya di blog sobat maka sobat buka template sobat lalu hapus kode berikut "<b:include name='quickedit'/>" agar benar-benar valid html5.
Langkah 7
Save template sobat
Selesai sudah postingan saya mengenai Recent Post With Tumbnail Seo Friendly Valid Html5, jika ada yang bingung silahkan berkomentar dan atau jika mau merepost mohon sertakan link sumber yah.
