Home Tutorial Blogger Cara Membuat Image Slider Otomatis Pada Blogger

Cara Membuat Image Slider Otomatis Pada Blogger

0 Komentar

Sekilas mengenai image slider ini adalah sebuah fitur pada blogspot yang mempunyai fungsi untuk menampilkan gambar secara bergantian dengan rentan waktu tertentu dan diikuti oleh judul, deskripsi singkat dan tombol readmore yang berada disebelah kanannya. Untuk lebih jelasnya, silahkan lihat gambar dibawah ini atau klik lihat demo!

Cara Membuat Image Slider Otomatis Pada Blog Part II

Cara Pemasangan !

  • Login ke blogger
  • Pilih Template » Edit HTML, jangan lupa centang Expand Template Widget
  • Untuk mengantisipasi terjadi kesalahan, backup template Anda
  • Copy kode di bawah ini dan pastekan tepat di atas kode ]]></b:skin>
#featuredSlider {background:#eee;float:left;margin:0; padding:0 0 10px; width:550px; position:relative;color:#666;border-bottom:1px solid #c3c3c3}
#featuredSlider .featured-thumb {float:left; margin:10px; padding:0px;}
#featuredSlider .container {height:250px; 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/AVvXsEjMc1QU6hLbINF9LZ9APcsQDR3TDJngVcVBlc6LLr3sw2ppr1FxWrjHptO4vaS-Dee7suv6-z2g6p1Nk-z4W6jQ6EjwcHT3HoYN50kZOHoDPDRqT1fumKh77qj_XvP-FdAF4ozImfZz2io/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/AVvXsEghYNFGxeQ_2icoPZ4uNpOU2XGvnSte9m613XKoM-20ezaty6tqTBRLHEE2N6bcRn_AsH-PSI4UT6oaYMXu8rIr6NsQy1vPoBTRlSzXdOYcRDPhfaB_2x9TVWGn7Zz1kBGu7f3fJcKHLCM/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}
Keterangan :
Warna merah di atas (width:550px;  dan height:250px;) merupak tinggi dan lebar image, silahkan Anda sesuaikan.
  • Selanjutnya, copy kode di bawah ini dan pastekan tepat di atas kode </head>
<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/AVvXsEjd2b2zbPby1L89WawUGtW9T5-KsXVZL9Xud2S3V9VXCXvE-4eoaPeFyL_xA_d4lM2Jh-SkbA1Xz8R_UV_VHbnvzsgQ_E0lBBHb-aBKcFra8TpAcoL__09594AeL77H8igPG1mDbpGXgFM/s1600/no+image.jpg";
showRandomImg = true;
aBold = true;
summaryPost = 150;
summaryTitle = 25;
numposts  = 5;
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>
Keterangan :
Warna Merah : adalah jumlah slider yang akan di tampilkan
Warna Biru : adalah tinggi dan lebar foto pada slider
Selanjutnya
  • Langkah selanjutnya, cari kode <div id='main-wrapper'> dan copy paste kode di bawah ini tepat di bawahnya.
<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/-/Internet?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>
Keterangan :
Warna Merah : merupakan nama label yang akan ditampilkan pada slider, tetapi jika Anda ingin menampilkan semua kategori atau label, hapus "/-/Internet" menjadi seperti ini "feeds/posts/default?max-results="
  • Terakhir, Simpan Template Anda...!!!
CSS and Script Source : www.maskolis.com

UPDATE :
Baca juga "Cara Membuat Image Slider di Bawah Header Pada Blog"
Next Post
Previous Post

Artikel Terkait

Unknown
Unknown