Cara Membuat Featured Post Tanpa Slide di Blogspot dengan Mudah dan Keren

Tampilan Featured Post pada situs Forum Blogger Indonesia

Jika sobat perhatikan blog ini, akan terdapat sebuah kotak kecil di homepage yang berisi sebuah posting artikel terbaru dan terpopuler. Kotak itulah yang dinamakan "featured post". Nih cara membuat dan memasangnya di blog:

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/AVvXsEj2Gs2vJt7i8EeRyv8AOave-k4laRPhNKCiLF1xTTgiBN3VkumIF7jWhyeYPisjH54P1bm64M-DyTbUQ9g8tiAHOIglyUe9T6p3RG4i13IZ9gqPJhptObgrpqy3dcQIKVkbhA45kPH7LHE/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: