Cara Membuat Featured Post SEO Terbaru pada Blog

Sahabat. Apabila rekan-rekan perhatikan, adakah perbedaan antara blog SL dengen blog Sobat ketika melihat halaman muka (home page??? Apakah perbedaannya? Jika Sobat amati, dalam blog SL pada halaman home page akan terlihat kotak biru dan di dalamnya terdapat judul posting "Cara Membuat Featured Post (Fitur Posting) Terbaru pada Blog" beserta ulasan singkatnya. Itulah yang dinamakan featured post pada bllog. Menarik bukan?^_^.

Mungkin dari beberapa rekan-rekan ada yang bertanya-tanya, sebenarnya apa sih featured post itu? Featured post merupakan kotak halaman muka pada blog, yang isinya berupa posting terbaru, teratas dan terupdate. Tujuannya tidak lain untuk mempermudah pembaca menerima informasi terupdate dari suatu blog, atau posting tervavorit di dalam blog itu, sesuai dengan kehendak admin.

Sahabat.

Fetured post ini biasanya terdiri dari dua mode, yakni mode klasik dan mode slide. Mode klasik di dalam featured post ini hanya berisi ulasan singkat dan images thumbail dari posting dan tersebut.

Jika merujuk pada tips mempercepat loading blog, maka gunakanlah featured post mode klasik, yang akan saya ulas pada kesempatan ini, yang ane peroleh dari blog CB.

Dan tentu, banyak sekali informasi yang bisa Sobat dapatkan dari sumber lain dalam hal membuat featured post pada blog. Namun, tidak ada salahnya dibuktikan ke-SEO an featured post yang Ane haturkan kali ini. Bisa dibuktikan skore SEO blog SL di Chkme, 100%.

Sekali lagi, fungsi utama Featured Post adalah menampilkan posting terupdate, teratas, terbaru dan/atau posting yang kita anggap "Posting tervavorit" di halaman depan (homepage).

Tahapan Membuat Featured Post Mode Klasik Tanpa Slider

1. Login blogger > masukkan akun sobat
2. Klik Template > Edit HTML
3. Cari (CTRL+F) kode ]]</b:skin>
4. Copy & Paste kode berikut ini DI ATAS kode ]]</b:skin>

#featuredpost {background:#000;float:left;margin:10px 10px 20px 10px; padding:0 0 10px;width:97%; position:relative;color:#eee;}
#featuredpost .featured-thumb {float:left; margin:15px; padding:0px;}
#featuredpost .container {height:205px; margin:0 10px 0 0;overflow:hidden; position:relative;font-family: Arial;font-size: 13px;font-style: normal;font-variant: normal;font-weight: normal;line-height: 1.3em;}
.featuredTitle{padding-top:15px;font:17px Oswald;}
.featuredTitle a{color:#f5ff88}
.featuredTitle a:hover{color:#c00}

*** Catatan: Anda bisa mengganti background warna hitam (#000) dengan warna lain. Kode-kodenya ada di Kode Warna HTML.

5. Cari kode </head> dan Copy & Paste kode berikut ini DI ATAS kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>
<script src='http://yourjavascript.com/221222113215/jquery.innerfade.js' type='text/javascript'/>
<script src='http://yourjavascript.com/122111125120/cycle.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgneij0PGmbfVxZx6EhKwXlXM1yBFF8zIGNxQqS_cs6jlsjH8ZQr8jwf30oqGuP5zj2lAHhB902p5zQ5aaiie12vYdMzIuG6HZND0jLZEISF-lB6MYAY24JeGA6ITAiflBY_X8NCcJUffw/s1600/no+image.jpg";
showRandomImg = true;
aBold = true;
summaryPost = 300;
summaryTitle = 25;
numposts  = 1;

function removeHtmlTag(strx,chop){var s=strx.split("<");for(var i=0;i<s.length;i++){if(s[i].indexOf(">")!=-1){s[i]=s[i].substring(s[i].indexOf(">")+1,s[i].length)}}s=s.join("");s=s.substring(0,chop-1);return s}

function showrecentposts(json) {
 j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
 img  = new Array();
    document.write('<div class="slides">')
 if (numposts <= json.feed.entry.length) {
  maxpost = numposts;
  }
 else
       {
    maxpost=json.feed.entry.length;
    }
   for (var i = 0; i < maxpost; i++) {
     var entry = json.feed.entry[i];
     var posttitle = entry.title.$t;
  var pcm;
     var posturl;
     if (i == json.feed.entry.length) break;
     for (var k = 0; k < entry.link.length; k++) {
        if (entry.link[k].rel == 'alternate') {
          posturl = entry.link[k].href;
          break;
        }
     }

  for (var k = 0; k < entry.link.length; k++) {
        if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
          pcm = entry.link[k].title.split(" ")[0];
          break;
        }
     }

     if ("content" in entry) {
        var postcontent = entry.content.$t;}
     else
     if ("summary" in entry) {
        var postcontent = entry.summary.$t;}
     else var postcontent = "";

     postdate = entry.published.$t;

 if(j>imgr.length-1) j=0;
 img[i] = imgr[j];

 s = postcontent ; 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!="")) img[i] = d;

 //cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';

 var month = [1,2,3,4,5,6,7,8,9,10,11,12];
 var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];

 var day = postdate.split("-")[2].substring(0,2);
 var m = postdate.split("-")[1];
 var y = postdate.split("-")[0];

 for(var u2=0;u2<month.length;u2++){
  if(parseInt(m)==month[u2]) {
   m = month2[u2] ; break;
  }
 }

 var trtd = '<div><p class="featured-thumb"><a href="'+posturl+'"><img width="290" height="180" src="'+img[i]+'"/></a></p><div class="featuredTitle"><a href="'+posturl+'">'+posttitle+'</a></div><p>'+removeHtmlTag(postcontent,summaryPost)+'... </p></div>';
 document.write(trtd);

 j++;
}
    document.write('</div>')
}

//]]>
</script>

*** Catatan: tulisan yang di-highligt dengan warna merah bisa Anda ganti dengan URL Image versi Anda. Fungsinya sebagai "default image" --akan muncul jika dalam postingan Anda tidak ada gambar.

6. Cari (CTRL+F) kode <div class='main-wrapper'> dan simpan kode berikut ini DI BAWAHNYAatau DI ATAS <b:section class='main' id='main' showaddelement='no'>

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id='featuredpost'>
<div class='container'>
<script>
document.write(&quot; &lt;script src=\&quot;/feeds/posts/default/?max-results=&quot;+numposts+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts\&quot;&gt;&lt;\/script&gt;&quot;);
</script>
</div>
<!--end .container-->
</div></b:if>
</b:if>

Catatan:  
Kode yang diberi warna merah adalah untuk memunculkan posting terbaru di Featured Post tanpa Slider. Anda bisa mengubahnya jika memunculkan posting terbaru di label/kategori tertentu. 

Misalnya, yang mau dimunculkan posting terbaru di label "Blogging", maka ganti menjadi /feeds/posts/default/-/Blogging

7. Save Template!

Demikian cara membuat Featured Post Mode Klasik tanpa Slider. Semoga berhasil and good luck. (http://sahilluqman.blogspot.com).*