Cara Membuat Featured Post Otomatis Per Label Responsive di Blog

Baca Juga

Cara Membuat Featured Post Responsive Otomatis Per Label atau Posting Terbaru Tanpa Slider.

WIDGET Featured Post ini digunakan oleh template Johny Wuss Series. Jika Anda ingin memasangnya di blog Anda, berikut ini kodenya.

Featured Post ini tanpa slider. Secara, content image post slider tidak bagus buat seo blog --tidak seo friendly juga tidak ramah pengguna (not user friendly). Ini penampakannya:

CB simpan kode ini jika ada klien Layanan Premium mau pasang atau jika CB mau pasang di template blog seo friendly terbaru hasil modifikasi.

Cara Membuat Widget Blog Featured Post Otomatis Per Label / Posting Terbaru.

KODE HTML:
simpan di atas kode <div id='main-wrapper'>

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

Catatan:
1. Hapus kode /-/Featured jika ingin menampilkan posting terbaru di Featured Posts
2. Tambahkan label Featured dalam posting yang akan ditampilkan.
3. Ganti Featured dengan nama Label lain yang akan ditampilkan.

KODE CSS:
Simpan di atas kode ]></b:skin>

#featuredpost {background:#f2f2f2;float:left;margin:15px 10px 20px 15px; padding:0 0 10px;width:96%;position:relative;color:#666;}
#featuredpost .featured-thumb {float:left; margin:15px; padding:0px;width:260px;height:165px;}
#featuredpost .container {height:190px; margin:0 10px 0 0;overflow:hidden; position:relative;font-family: Arial;font-size: 13px;line-height: 1.3em;}
.featuredTitle{padding-top:15px;font:18px Oswald;font-weight:500}
.featuredTitle a{color:#f65b4f}
.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:
Simpan di atas </head>

<script type='text/javascript'>
//<![CDATA[
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVQwQLvwIZ8BLAw0buAtKuPMxfYT9EXRGbFrUYzjWnBSWSnluKanZn6oiQ-0hq801r15hKBSniokrQsrnr4wIKOcVzjNYAFRRFbspjf8mf2oHNuH6NJ8TnRQMT6zOB2YU-sMTwA5h740U/s1600/no+image.jpg";
showRandomImg = true;
aBold = true;
summaryPost = 200;
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="100%" height="165px" 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>

Demikian Cara Membuat Featured Post Otomatis Per Label Responsive di Blog. Good Luck! (http://www.contohblog.com).*