» » » » Cara Mudah Membuat Featured Post di Blogger, Responsive!

Cara Mudah Membuat Featured Post di Blogger, Responsive!

0 Viewers , ,
Kemaren malam saya posting cara membuat menu navigasi plus media sosial dibagian kiri. Sekarang, 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 MayCyber-Download, 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/AVvXsEjvherON0zpFQRssJT9F1VoHmylfVBNTTvNIveNN07nDdWYjRkJzLuSjGcUWlGaagLyBOAdPnkGLdlQArsfyswng46S_0MjkD10bkEDG9v1FfczSI1lz2mQ42emDyilKXhzE8buU6j0B9M/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, karena setiap template berbeda-beda.

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>
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 : Background bisa diubah dengan kode warna " Klik Disini "
background:#000; : Background Featured Post
{height:205px; : Ketingian Featured Post
width:97% : Lebar Featured Post

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!








Related Post