Cara Membuat Featured Post Thumnail Berganti Postingan

Membahas soal Featured Post? sudah dua postingan di Blog MD ini di jelaskan. Dan ini adalah Featured Post yang ketiga saya posting. Sebelum untuk posting di blog, saya menguji di blog saya yang satu lagi yang ambaradul hehe. Jadi dijamin Source kode benar semua, tanpa salah sedikitpun. Featured Post adalah merupakan sebuah fitur yang berisi konten terbaik yang ditaruh diatas postingan yaitu berisi tampilan gambar (Thumbnail) beserta keterangan teks disampingnya atau dibawahnya.

Baca Juga :
1. Cara Membuat Featured Post SlideShow SlidebarLabelNews
2. Cara Membuat Featured Post Responsive
Namun, Featured Post kali ini : Postingan nya berganti-ganti. Penasaran ya? Jangan kemana-mana dulu. Featured Post kali ini Berganti-ganti Postingan dengan Tombol Readmore di bagian bawah kanan. Jika anda melihat gambar diatas adalah hanya sebagai pemanis dan pelengkap saja gambarnya hehe. Sumber Source Kode Medienfreunde. Oke langsung saja kita praktekan.

Cara Membuat Featured Post Thumnail Berganti Postingan

Cara Pertama :

1. Buka Blogger - Kemudian Login dengan Akun Anda.
2. Dashboard - Template.
3. Edit HTML.

Sekarang Proses Pembuatan atau Editing :

1. Temukan kode ]]></b:skin>
2. Copy & Paste kode berikut ini, dan Letakkan diatas kode ]]></b:skin>

#featuredSlider {background:#eee;float:left;margin:0; padding:0 0 10px; width:640px; position:relative;color:#666;border-bottom:1px solid #c3c3c3}
#featuredSlider .featured-thumb {float:left; margin:10px; padding:0px;}
#featuredSlider .container {height:226px; margin:0 10px 0 0;overflow:hidden; position:relative;}
.featuredTitle{padding-top:10px;font:16px Oswald;text-shadow:1px 1px 1px #ccc;}
.featuredTitle a{color:#f7441a}
.featuredTitle a:hover{color:#000}
.navigation {position:relative;bottom:23px;float:right;overflow:hidden;}
ul.pagination {list-style-type:none; margin:0 auto; padding:0;}
ul.pagination a { float:left; margin:0 5px; display:inline; }
ul.pagination a { display:block;width:12px; padding-top:12px; height:0; overflow:hidden; background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBZN6oiktcbXSj0IX_-bAkxIbK3O2NsyCydKWLJ4jhwZOg-Dn2tCeQ_XqqYKA055qD2uE1Jnezkp3kQfI38DvKyGwDscqgJKLqq5vg1SzfJhO20hMc_qH8EE_dctKfyMpEwpCiSiOFTD4/s1600/slider+pagination.png); background-position:0 0; background-repeat:no-repeat; }
ul.pagination a:hover { background-position:0 -12px; }
ul.pagination a:hover { background-position:0 -12px; }
ul.pagination a.activeSlide { background-position:0 -12px }
a.readmore {float:left;border:1px solid #444;background:#585858 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBay15McK1vzLXXRBMfZFOU_CL91Dyy7bHSj5I0U7nT8oHeTdVXpbiNFkQoLtrN6Rep6ApeHIyEXAy-Ygw8PreL1-zgcEluXaEkUZajY3Bnk9gQCZjTrIozzaCSAfWKWKI7RqBI94E0hY/s1600/fade.png) repeat-x top;display:block;;font:bold 12px Arial;text-shadow: -1px -1px 0 #333;margin:10px 0 0 0;padding:4px 10px;color:#eee;-webkit-border-radius:3px;-moz-border-radius:3px;
border-radius:3px;-webkit-box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.5);-moz-box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.5);box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.5);}
a.readmore:hover {color:#ff0}

Catatan : Kode yang berwarna Biru, bisa ganti dengan Kode Warna HTML, Sesuaikan dengan Warna pada Templatemu.- Kode Warna HTML Disini.
- Kode yang berwarna Merah, Sesuaikan dengan Ukuran Lebar Template anda.

3. Temukan kode </head>
4. Copy & Paste kode berikut ini,dan Letakkan diatas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script src='https://sites.google.com/site/maycyberdownload/maycyber-script/slide-show-maycyber.js' type='text/javascript'/>
<script src='https://sites.google.com/site/maycyberdownload/maycyber-script/maycyber-slideshow-featured.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVLjTDPCYGsIbCSiTeIfqCKaSYRt725vsvd27Ox8AZq5YbushOgc7ohx5kuQ7x6X2A6g2nYhhGorHlZQ_yRgEe3n1F5_y8H7RQZWY6vINNEda_R27CBpdb7O8DkCi8nnhNWPtuqCgBtX8/s1600/no+image.jpg";
showRandomImg = true;
aBold = true;
summaryPost = 150;
summaryTitle = 25;
numposts  = 7;

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="340" height="212" src="'+img[i]+'"/></a></p><div class="featuredTitle"><a href="'+posturl+'">'+posttitle+'</a></div><p>'+removeHtmlTag(postcontent,summaryPost)+'... </p><a href="'+posturl+'" class="readmore">Read more &#187;</a></div>';
 document.write(trtd);


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

//]]>
</script>

Catatan :

JQuery1.7.2 Bila di blog anda sudah terpasang JQuery 1.7.2 sebaiknya tidak usah dipasang lagi.
numposts  = 7; Menampilkan Postingan Berapa postingan. 7 adalah Artikel yang ingin di postingkan.
width="340" Lebar pada Blog anda. Sesuaikan dengan Lebar Blog anda.
height="212" Ketinggian. Sesuaikan dengan Lebar dan Ketingian Featured Post nya.

Cara Terakhir.

5. Temukan kode <div id='main-wrapper'> atau <div class='main-wrapper'> atau <div class='outer-wrapper'>
6. Copy & Paste kode berikut ini, dan Letakkan dibawah kode yang disebutin diatas.

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div id='featuredSlider'>
<div class='container'>
<script>
document.write(&quot; &lt;script src=\&quot;/feeds/posts/default/-/Tips?max-results=&quot;+numposts+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts\&quot;&gt;&lt;\/script&gt;&quot;);
</script>
<div class='navigation'>
<ul class='pagination'/>            <script>
$(&#39;.slides&#39;).cycle({
  fx:     &#39;fade&#39;,
  speed:  &#39;slow&#39;,
  timeout: 3000,
  pager:  &#39;.pagination&#39;
  });
</script>
</div>           </div> <!--end .container-->
</div>
</b:if>

Catatan :

feeds/posts/default/-/Tips?max-results : Tips Merupakan Label yang saya gunakan. Ganti dengan Label yang anda ingin postingan. Artinya menampilkan Artikel per/label.

Bisa diubah dengan :

/feeds/posts/default/?max-results=& Menampilkan semua postingan. Tanpa Label atau Kategori.

7. Terakhir, Simpan Template!

Akhirnya Selesai juga. Cara Membuat Featured Post Thumbnail Berganti Postingan. Jika terjadi kesalahan, Silakan jangan sungkan untuk berkomentar. Sekian dari saya, Semoga Bermanfaat! Saya Ucapkan Selamat Berexperimen. HappyBlogging^.^