Cara membuat Slider otomatis gambar vertikal pada blog

Selamat malam, semoga berbahagia selalu. Dikesempatan ini saya akan memberi tahu, eh bukan makanan tahu ya, nanti di kira saya akan memberi makanan tahu. maaf jadi ngelawak dehh, soalnya saya sedang butuh hiburan, ya saya lanjutkan ya. ya kali ini saya akan memberi tahu caranya untuk membuat slider otomatis yang akan menampilkan artikel blog secara berurutan. belum maksud dengan kata kata saya, lihat screenshoot di bawah ini.

ok kalau masih belum maksud dengan apa yang saya bahas, coba kalian lihat di homepage saya di situ ada contoh slidernya, lihat demo.  sudah maksud, kalau sudah maksud yuk kita belajar membuat slider otomatisnya. manfaat slider ini adalah agar pengunjung mudah melihat artikel yang kita posting di blog kita, ini akan membuat pengunjung lebih nyaman dalam mencari artikel yang mereka cari akan membuat pengunjung lebih senang dan nyaman. ok langsung saja jika sudah tahu seperti apa tampilan slider tersebut dan apa kegunaanya, sekarang mari kita lihat apa kekurangannya. kekurangan widget ini adalah :

• banyak menggunakan kode javascript yang dapat mmengurangi perfomance blog dan membuat ruang pada javascirpt blog anda menjadi sempit.
• mungkin akan membuat posisi blog pada google page rank menurun karena google lebih menyukai blog yang sederhana.
• jika menggunakan template yang sudah di modifikasi untuk loading cepat. maka blog anda akan mengalami loading yang lambat dan mungkin dapat error

Setelah login ke Blogger, pilih blog yang ingin ditambahkan slider ini.

Kemudian masuk ke Template >> Edit HTML (centang kotak expand widget templates)

Di back up atau disimpan dulu templatenya, jika sewaktu-waktu terjadi kesalahan bisa dikembalikan ke bentuk semula.

Masukkan kode berikut di atas 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/AVvXsEgIe0WIgQHXgzaO1hhtMksd4vD99PRbsmhtj4DovFqWOeOCbUOwXhv8Fwj_eZjkaRcTmnB1-c-wtT_VWjckHgTwQ101PTX6lbo1Ej40rUvOBmSYr40owkmCvFpxTkEm2eDXPMCLIFJX9WY/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/AVvXsEh1bWxMERho9dHpeq6GQ-Wzdv0VpUYArfwBjyPaN7HmFoJo0AtEqbThA1Ocr8iOVymPFGEmHxUln-_Rbpd92hsINszGjamFAJQTvNo69SbJ2bTIJK0gv8iOc5vTqS4hP12KQtczu7ZFQL8/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 warna biru diatas, itu adalah lebar dan tinggi slider pada demo yang saya buat, silahkan Anda sesuaikan dengan ukuran template Anda.

 Langkah selanjutnya masih pada posisi Edit HTML, masukkan kode berikut ini diatas kode </head> :

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.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/AVvXsEiIGjmuh15P2mM6Gd9h1Ba2spxyG2hyphenhyphenAEFThNel_Nm4lI4_DLL7ToUuqpGoZjNfGNtf45x8KZNOJWFfc6namVl_QsSi4CdqISdesFbmJkiCXH9OBhr7ob2Y4F0h3lhFILOzRb4M6tRhw6w/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>

Keterangan :

Perhatikan URL script warna merah diatas, itu adalah kode script jQuery.min.js seri terbaru yang saya gunakan untuk membuat slider ini. Jika pada template Anda sudah terdapat jQuery.min.js walaupun serinya berbeda, kode warna merah diatas tidak perlu lagi Anda masukkan. Cukup satu jQuery.min.js yang ada di template, terserah mau seri berapa, kalau bisa versi yang terbaru.

Kode warna biru : 7 adalah jumlah slider yang ditampilkan. Sedangkan angka 340 dan 212 adalah panjang dan lebar image yang ada di slider.

 

Langkah selanjutnya adalah memanggil slider tersebut agar muncul di blog kita. Cari kode <div id='main-wrapper'>, kemudian letakkan kode berikut ini dibawahnya :
1. <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/-/sport?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 per kategori atau label tinggal ditambahkan saja kode diatas :
   

   /feeds/posts/default?max-results

   Menjadi :
   

   /feeds/posts/default/-/your label?max-results

   Silahkan ganti "your label" dengan kategori yang ingin Anda tampilkan pada slider.
   Terakhir, save templates dan lihat hasilnya.

Slider diatas bisa Anda modifikasi sendiri, Anda juga bisa gunakan slider ini untuk gambar horisontal (tidak harus vertikal) berusahalah untuk lebih kreatif dengan merubah ukuran panjang dan lebar yang ada pada tutorial ini atau menambahkan hiasan ribbon misalnya seperti terlihat pada demo ini, sehingga tampilannya menjadi lebih menarik. Itu tadi tutorial membuat slider sederhana kali ini, jika ada yang kurang jelas silahkan tinggalkan peasan pada kolom komentar di bawah.

Nah itulah yang dapat saya sampaikan, maaf jika saya ada salah kata pada artikel yang saya tulis, jika ada yang belum maksud dengan postingan yang ada di blog saya, silahkan tuliskan pertanyaan anda pada buku tamu (guest book). sekian dari saya semoga bermanfaat dan selamat mencoba.

sumber : creating website

NB :
Jika Anda melihat gambar pada slider kadang terlihat, kadang tidak, itu karena penambahan script lazy load image yang ada pada template demo.