Recent Posts with Thumbnail SEO & User Friendly

Kali ini saya akan menjelaskan tutorial bagaimana caranya membuat Recent Posts with Image Thumbnail SEO dan User Friendly seperti Kode Blogger.

Dikatakan SEO karena terdapat gambar dan deskripsi singkat untuk memperkuat SEO situs, dan dikategorikan User Friendly karena tampilannya keren, sederhana (simple), minimalis (Flat / Material), dan sangat cantik.

Penampakannya seperti ini:

Oh iya, Font yang saya gunakan di atas adalah Google Fonts dengan nama Dosis. Nanti saya jelaskan cara pemasangannya di Template Blogger.

Cara Membuat Recent Posts with Thumbnail SEO & User Friendly

Tutorial kali ini langsung dipraktekkan di HTML/JavaScript (Js) tanpa perlu masuk ke Template Blogger, terkecuali bagi yang ingin menambahkan Google Fonts 'Dosis', sans-serif.

Login ke Blogger > Tata Letak (Layout) > Tambahkan Gadget > HTML / JavaScript (Js)

Simpan kode di bawah ini, pada kolom HTML / JavaScript (Js):

<style>
img.recent_thumb {padding:1px;width:62px;height:52px;border:0; float:left;margin:0 10px 5px 1px}.recent_posts_with_thumbs {float: right;width: 100%;min-height: 72px;margin: 5px 10px 5px 0px;padding: 0;font-size:12px}ul.recent_posts_with_thumbs li {min-height: 50px;padding:5px 0; max-width: 100%}.recent_posts_with_thumbs a {text-decoration:none;font-weight:700;font-size: 12px}.recent_posts_with_thumbs strong {font-size:10px}i {font-style: normal;font-weight: 400;font-size: 11px}
</style>
<script>
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='http://lh4.ggpht.com/_IjrRiI_bVb0/TOCYn1fMjII/AAAAAAAAF24/5Fvv-HJqh74/loading-2.gif';
}
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+'"/>');
document.write('<a href="'+posturl+'" target ="_top">'+posttitle+'</a><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='No Comments';
commenttext = '<a href="'+commenturl+'" target ="_top">'+commenttext+'</a>';
towrite=towrite+commenttext;
flag=1;
;
}

if(displaymore==true)
{
if (flag==1) towrite=towrite+' | ';
towrite=towrite+'<a href="'+posturl+'" class="url" target ="_top">Read more&#187;&#187;</a>';
flag=1;
;
}
document.write(towrite);
document.write('</strong></li>');
if(displayseparator==false)
if (i!=(numposts-1))
document.write('<hr color="#d9f1fa" size=0.5>');
}document.write('</ul>');

}
</script>
<script>
var numposts = 7;var showpostthumbnails = true;var displaymore = false;var displayseparator = true;var showcommentnum = false;var showpostdate = false;var showpostsummary = false;var numchars = 90;
</script><script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs">
</script><div class="clear"/></div>

Simpan dan lihat hasilnya.

CSS yang mengatur widget Recent Posts ini ada di atas, ini kodenya:

<style>
img.recent_thumb {padding:1px;width:62px;height:52px;border:0; float:left;margin:0 10px 5px 1px}.recent_posts_with_thumbs {float: right;width: 100%;min-height: 72px;margin: 5px 10px 5px 0px;padding: 0;font-size:12px}ul.recent_posts_with_thumbs li {min-height: 50px;padding:5px 0; max-width: 100%}.recent_posts_with_thumbs a {text-decoration:none;font-weight:700;font-size: 12px}.recent_posts_with_thumbs strong {font-size:10px}i {font-style: normal;font-weight: 400;font-size: 11px}
</style>

Kalian bisa mengaturnya sendiri seperti jenis Font, ukuran Font, ukuran tinggi dan lebar gambar serta lainnya. Gampang, kok! :)

Perhatikan lagi, pada kumpulan kode HTML/JavaScript (Js) di atas terdapat potongan Script seperti ini:

<script>
var numposts = 7;var showpostthumbnails = true;var displaymore = false;var displayseparator = true;var showcommentnum = false;var showpostdate = false;var showpostsummary = false;var numchars = 90;
</script><script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs">
</script><div class="clear"/></div>

Script di atas punya banyak fungsi, di antaranya adalah:

• var numposts = 7; artinya seberapa banyak postingan artikel yang ditampilkan pada Recent Posts yang diciptakan tadi.
• showpostthumbnails = true; untuk menampilkan atau tidaknya gambar Thumbnail.
• var showcommentnum = false; berguna untuk menampilkan jumlah komentar yang masuk sudah berapa banyak.
• var showpostdate = false; yang berarti tanggal artikel dipublikasikan.
• var showpostsummary = false; menampilkan Snippet atau Deskripsi Singkat.
• var numchars = 90; merupakan jumlah huruf terhadap Deskripsi Singkat.

Ingat! False artinya dinonaktifkan, sedangkan True artinya diaktifkan. Kalian bisa mengubah fungsinya apakah False atau True. Mudah disesuaikan! :)

Seperti yang dijelaskan di atas, saya akan berbagi Script jenis huruf Dosis dari Google Fonts. Di bawah ini Script-nya! - menggunakan Script Google Fonts Fast Loading.

<script type='text/javascript'>
//<![CDATA[
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
  loadCSS("https://fonts.googleapis.com/css?family=Dosis:500,700");loadCSS("//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
//]]>
</script>

Sedangkan CSS untuk memanggil Google Fonts Dosis yaitu dengan menggunakan kode di bawah ini:

'Dosis', sans-serif

Itulah tutorial bagaimana caranya membuat Recent Posts with Image Thumbnail SEO dan User Friendly seperti Kode Blogger. Semoga berguna.