Cara Sederhana Membuat Featured Post Responsive Otomatis Satu Label atau Recent Post Tanpa Slider

Cara Membuat Featured Post Tanpa Slider ala New Johny, Memasang Responsive Recent Post Slider - Arlina Design, Membuat Slider Carousel Otomatis Berdasarkan Label

Cara Sederhana Membuat Featured Post Responsive Otomatis Satu Label atau Recent Post Tanpa Slider - Cara membuat widget featured post seperti yang dipakai oleh template "Johny Wuss Series". Jika anda penasaran dan ingin sekali memasangnya di web atau blog pribadi anda, anda harus ikuti cara atau langkah-langkah yang berikut ini, namun dengan catatan jika anda gagal dalam memasang code-code script tersebut, maka di ulang dan baca lagi dengan baik. Baca juga : Cara Cepat Mendapatkan 39.000 Backlink Blog Mudah dan Gratis

Cara Membuat Widget Featured Post Otomatis Satu Label atau Recent Post

Klik --------> Template
Klik --------> Edit HTML
Cari code <div id='main-wrapper'> agar cepat ketemu gunakan (CTRL+F)
Copas code dibawah ini yang berwarna biru, lalu letakkan di atas code <div id='main-wrapper'>

<==========> Code Biru <==========>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id='featuredpost'>
<div class='container'>
<script>
document.write(" <script src=\"/feeds/posts/default/-/Featured?amp;amp;max-results="+numposts+"&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts\"><\/script>");
</script>
</div>

</div>
</b:if>
<================================>
Catatan :

Hapus code /-/Featured jika anda ingin menampilkan recent post di Featured Post
Tambahkan label Featured didalam postingan yang bakal anda tampilkan
Ganti tulisan Featured dengan nama Label milik anda yang ingin ditampilkan

Selanjtnya pasang code CSS dibawah ini, dan letakkan di atas code ]></b:skin>

<==========> Code CSS <==========>
#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;}}

<================================>

Kemudian pasang code Javascript dibawah ini, dan letakkan di atas code </head>

<==========> Code Javascript <==========>
<script type='text/javascript'>
//<![CDATA[
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEISZrUG4XCJxPOmsHFQCP22wztdLT8tU9SAsit7xbnZFuuni5YceCHdLcKpqo-10hsXuSRaklKSq9jP2N7t56u5sxyB8dccxNc7XwykpzoOUPMUSiuW7R__3MTB_zEhW1EaufZqLqpRI/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>
<=====================================>

Nah, sekarang anda tinggal lihat hasilnya berhasil atau tidak. Sekarang saatnya anda untuk mencoba pratinjau blog anda dan lihatlah apa yang akan terjadi pada halaman blog anda, pastinya halaman anda akan nampak jauh lebih cantik untuk dipandang.

Itulah tips Cara Sederhana Membuat Featured Post Responsive Otomatis Satu Label atau Recent Post Tanpa Slider tersebut. Jika anda penasaran, maka sebaiknya anda coba dan lakukan cara-cara seperti di atas dan lakukan berulang-ulang jika mendapati kegagalan dalam memasangnya. Terima kasih banyak...

Sumber berita : http://www.contohblog.com