Cara Membuat Slider Image Post Otomatis

Follow @forendy91

Forendy-Membuat Slider Image Post Otomatis. Postingan baru pasti akan sangat menarik jika kita tampilkan dengan tampilan yang lebih kreatif. Slider Image Post ini fungsinya adalah untuk menampilkan postingan terbaru anda dengan menampilkan gambar slide dan deskripsi postingan pada setiap slidenya.

Letak dari fitur ini ada di atas postingan yang ada di home page  anda.  Dengan fitur ini maka template anda akan terlihat lebih indah, rapi, dan profesional. Pada Slider Image Post kali ini dibuat sederhana dan akan sedikit menggunakan javacript yang pasti Slider Image Post ini leih enteng deh.

Beginilah langkah-langkah cara membuat Slider Image Post-nya:

1.Login ke blogger dengan akun Anda
2.Masuk ke template > Edit HTML, kemudian centang expand widget templates
3.Untuk berjaga-jaga jika terjadi kesalahan dalam pengeditan, sebaiknya backup dulu template anda.
4.Setelah semua langkah diatas anda lakukan, letakkan kode berikut ini 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/AVvXsEgXYO5tWmuxqcJLienW8a9SySQXr6vQzDoo_19kowNe7UX-CEx_VwDpdz6TrjRa3lw6hcxD8_fnTPOxmAiZgcgWXTCV8i6QT79OWTr_odfETIB8yk3zE8yNU-0-QpU4qGc09hbhLV-lEfA/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/AVvXsEgDceKLmLRGIRtvvbcTFP28ftJGE2TptF3-68cAdS7R5YM7UnucjlF7O4aPVmdPjpctZtz0rwqF7jkPKpVo4hyphenhyphenS4zPxui3PjvQLRIHF_wDRvxFBMJQ9tm1xOw5E3q1dDn1CAMg1qpg2la4/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}

Perhatikan kode yang berwarna biru di atas adalah untuk mengatur lebar dan tinggi slider-nya silahkan untuk disesuaikan dengan keadaan template anda.

5. Cari kode </head> dan letakkan kode dibawah ini tepat di atasnya.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script src='https://masolis-javascript.googlecode.com/svn/trunk/jquery.innerfade.js' type='text/javascript'/>
<script src='https://masolis-javascript.googlecode.com/svn/trunk/cycle.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4vzaWrKoEgx4NiTAWPhz0h_zlkGEgEw4F3mEu_2YpUhwGw4uayvx1oMl4zktf3ciIMbeIocYaJaviFQ13wo7kYw7oxKVCK5fEp9PJSVatB1-fjDINRDvBU9YG1Kl3MpSlq0tiOiTqH6c/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>

Perhatikan kode yang berwarna merah itu adalah kode jquery.min.js seri terbaru yang digunakan pada tutorial ini. Jika template anda sudah terpasang kode jquery.min.js  walaupun serinya berbeda maka tidak usah memasukkan kode jquery di atas.
Untuk kode yang berwarna biru di atas adalah tinggi dan lebar gambar pada slide-nya.

6. Langkah ke enam adalah memasang kode pemanggil Slider image post-nya. Cari kode <div id='main-wrapper'> dan letakkan kode dibawah ini tepat dibawahnya:

<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?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>

Jika anda ingin menampilkan slider perkategori tinggal ganti kode:

/feeds/posts/default?max-results

Dengan kode:

/feeds/posts/default/-/LABEL YANG INGIN DITAMPILKAN?max-results

 7.Klik save template.

Demikianlah tadi tutorial Membuat Slider Image Post Otomatis yang pastinya akan menambah inda tampilan template anda.

Bagikan Untuk Kebaikan

Google+ Follow @forendy91