Cara Membuat Fitur Posting (Featured Post) Blog Tanpa Slide

Demo: Featured Post pada blog FBI

Sobat. Salah satu nilai tinggi yang tersemat ke dalam sebuah blog adalah adanya "isi konten berkualitas". 

Kualitas isi konten inilah yang akan menjadi daya tarik tersendiri bagi pembaca setia blog kita. Namun ada pertanyaan menarik di sini.

"Bagaimana cara pengunjung yang baru pertama kali membuka blog kita, tahu di mana letak konten artikel terbaik kita saat itu?"

Pertanyaan ini seharusnya bisa Antum jawab dengan mudah, JIKA memang Antum telah menyediakan Fitur Posting (Featured Post) di dalam blog. Jika belum, agak sulit untuk menjawab "perasaan" pembaca pertama blog kita. Benar bukan?

Mungkin masih ada yang betanya-tanya, sebenarnya apa sih "makna" Featured post pada sebuah blog? Fungsinya apa?

Featured post merupakan sebuah "fitur blog" yang berisi KONTEN terbaik dari blog seseorang. Biasanya berisi tampilan gambar thumbnail beserta keterangan teks pendukungnya dari total artikel utuh dan terdapat di bagian atas artikel terbaru. Lebih jelasnya, silakan lihat demonya di bawah ini:

Life demo 1 | Life demo 2 | Life demo 3

Cara Mudah Membuat Featured Post pada Blog Tanpa Slide

Langkah-langkahnya sebagai berikut:

1. Silakan berdo'a dulu njeh

2. Masuk akun blogger

3. Pilih Template > Edit HTML > cari kode </head> dan copy paste kode di bawah ini tepat 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/AVvXsEij1nidSGihqz73qefQrBYh8clfQedj2oFPUJdkLAqkuqiPeg-hGMIcUQB11N4-Y_nY1lUEEXc9A84fIBxcnZWUKtYrjmhqiFixa40TjBRGNH8G_A6aHViDNR1dy8NeaKEt7M2D0nM_cjc/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>

Keterangan tambahan:

kode warna merah di atas berfungsi sebagai default image yang akan muncul jika posting artikel Sobat tidak menggunakan gambar sama sekali. Sehingga bisa Anda ganti dengan URL Image Sobat sendiri.

4. Cari kode <div class='main-wrapper'> dan masukkan kode di berikut ini tepat di bawahnya, atau tepat di atas kode <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>

Keterangan tambahan:

kode yang berwarna merah merupakan kode untuk memunculkan posting terbaru di Featured Post tanpa Slider. Anda bisa mengubahnya jika ingin memunculkan posting terbaru di label/kategori tertentu. 

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

5. Letakkan kode berikut ini tepat 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}

Keterangan tambahan:

- Kode warna merah di atas merupakan kode warna kotak featured post. Jika ingin memodivikasi warnanya, silakan ganti dengan kode warna HTML ini.

- Kode warna biru di atas merupakan lebar kotak featured post blog. Sesuaikan dengan lebar blog Anda. Jika masih kesulitan mencari lebar blog Anda, silakan pelajari cara mengetahui lebar sebuah blog.

6. Save template

Demikian tips trik SEO blogging kali ini. Jika ingin menambah modivikasi blog Anda, silakan baca artikel di bawah ini:

1. Cara mendesain tampilan blog keren
2. Cara memasang back to top button pada blog resposnsive

Semoga bermanfaat.

Sumber:
http://contohblognih.blogspot.com/2014/05/cara-membuat-featured-post-tanpa-slider.html