Automatic Featured Post Image Thumbnail without Slider for Blogger

Baca Juga

Fetured Post Otomatis dengan Gambar Thumbnail di halaman depan Blog.

Kode Automatic Featured Post Image Thumbnail without Slider for blogger.

Widged untuk menampilkan tulisan unggulan di homepage. Responsive & Fast Loading. Tanpa Slider! Penampilannya seperti gambar ilustrasi.

KODE CSS:

#featuredpost {background:#fafafc;float:left;margin:15px 10px 20px 15px; padding:0 0 10px;width:95%; position:relative;color:#666;}
#featuredpost .featured-thumb {float:left; margin:15px; padding:0px;}
#featuredpost .container {height:190px; 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:10px;font:17px Oswald;}
.featuredTitle a{color:#555}
.featuredTitle a:hover{color:#48d}
@media screen and (max-width:600px) {
#featuredpost{width:92%}
#featuredpost .featured-thumb {width:100%;height:auto;margin: 0px 0px 10px;}
#featuredpost .container {height:auto;margin:15px;}}

KODE JAVASCRIPT

<script type='text/javascript'>
//<![CDATA[
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8qWzXujomWAm38Ys7jCq7bdoW_MF4wth6BHKk7fWULNEPIMiIJBUqzVrCxvjhg1BASRL5BvdKd79OhYubsa2uA-SIYS8jNOuUfy78cDA_WYPl86W9yN4T1Y6mTQNFVTAJk_mAHeCQcwk/s1600/no+image.jpg";
showRandomImg = true;
aBold = true;
summaryPost = 220;
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="260" height="170" 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>

KODE HTML/XML:

<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/-/Featured?max-results=&quot;+numposts+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts\&quot;&gt;&lt;\/script&gt;&quot;);
</script>
</div>
</div>
<div class='clear'/>
</b:if>

CARA MENAMPILKANNYA
Untuk memunculkan Automatic Featured Post Image Thumbnail without Slider for Blogger, beri label Featured posting yang akan ditampilkan. (http://blogromeltea.blogspot.com).*