Cara Mudah Membuat Featured Post di Blogger, Responsive!

Kemaren malam saya posting cara membuat menu navigasi plus media sosial dibagian kiri. Sekrang, pagi ini saya akan mempostingkan Cara mudah Membuat Featured Post di Blogger, dan Resposive. Kenapa Responsive? Jika ketika membuka blogger anda, maka Featured Post ini tidak berantakan, itulah yang disebut Responsive dia akan menyesuaikan layar dengan sendirinya. Featured Post adalah merupakan sebuah fitur yang berisi konten terbaik yang ditaruh diatas postingan. Biasanya berisi tampilan gambar thumbnail beserta keterangan teks disampingnya, lihatlah seperti gambar diatas yang dikotak merah. Jika blogger anda ingin menerapkan seperti Blogger gudangite, ikuti langkah-langkah berikut ini

    Blogger ini selalu mengingatkan, karena kami selalu memberikan artikel yang berkualitas tidak ada asal-asalan, jadi saya sarankan Backup dulu Template anda, misalnya Copy Script HTML ke Notepad. Karena jika tidak sesuai dengan keinginan anda Featured Post nya maka dengan mudah membalikan seperti semula.

Cara pertama :

1. Masuk Blogger -> Login.
2. Template -> Edit HTML.
3. Temukan kode </head>
4. Copy - Paste kode dibawah ini, dan letakkan diatas 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/AVvXsEgVLjTDPCYGsIbCSiTeIfqCKaSYRt725vsvd27Ox8AZq5YbushOgc7ohx5kuQ7x6X2A6g2nYhhGorHlZQ_yRgEe3n1F5_y8H7RQZWY6vINNEda_R27CBpdb7O8DkCi8nnhNWPtuqCgBtX8/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 : Kode yang berwarna merah adalah gambar Default, jika anda mempostingkan tidak menggunakan gambar sama sekali maka tidak akan tampil gambar. Anda bisa mengganti dengan image anda sendiri.

5. Kemudian, Temukan lagi kode <div class='main-wrapper'> dan letakan dibawah ini tepat bawahnya.

Catatan : Blogger saya tidak ada kode <div class='main-wrapper'> Jika anda mempunyai keluhan yang sama? Temukan saja kode <b:section class='main' id='main' name='Main' showaddelement='no'> atau kode <b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog' version='1' visible='true'
Note : False bisa diganti dengan True ketika mencari kode menggunakan Ctrl + F .

-> Lihat gambar biar ngerti dan faham <- ! Saya menaruhnya kodenya dibagian <div class='columns-inner'> tepat dibawah nya. karena saya tidak ada kode <div class='main-wrapper'> . Itu kalo saya, ingat itu kalo saya!

6. Copy - Paste kode berikut ini, keterangan diatas ya kalo soal menaruh kode diatas atau dibawah.

<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 : /feeds/posts/default/ bisa diganti dengan sesuai label. Misalnya yang ingin ditampilkan di Featured Post label Tutorial Blogger, maka caranya begini /feeds/posts/default-/Tutorial Blogger/?max
Jika ingin menampilkan semua postingandi Featured Post ketika baru dibikin artikel gausah diubah.

7. Terakhir, Temukan kode ]]></b:skin>
8. Copy-Paste kode berikut ini, dan letakkan kode dibawah ini tepat diatas 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 : Kode yang berwarna Biru adalah background, bisa diubah dengan kode warna " Klik Disini "
dan kode yang berwarna Merah adalah ukuran lebar bisa disesuaikan dengan ukuran blogger sobat.

8. Save Templated!
9. Silakan Pratinjau atau bisa langsung lihat Blogger anda^.^

Demikian Tips Blogger kali ini, Selamat mencoba dan Terima kasih Telah berkunjung dan membaca Artikel ini. Semoga Bermanfaat!