Cara Membuat Simple Slider Otomatis Gambar Vertikal
18 May 2013
 |
| DEMO |
Slider ini sangat sederhana, seperti juga slider-slider sebelumnya, slider inipun bekerja secara otomatis berdasarkan artikel terbaru dan kategori tertentu. Untuk lebih jelas silahkan klik demo diatas, slider ini saya letakkan di sidebar sebelah kanan dengan ukuran lebar 300px. Slider ini sekilas terlihat seperti slider yang ada pada template-template dari designer India seperti Lasantha Bandara, Lansindu,Sameera dan lainnya, yang masih memasukkan gambar dan URL secara manual. Jika Anda pengguna template buatan mereka, dan ingin mengganti agar slider bekerja secara otomatis, silahkan simak berikut langkah-langkah pembuatannya :
- Setelah login ke Blogger, pilih blog yang ingin ditambahkan slider ini.
- Kemudian masuk ke Template >> Edit HTML (cari kode yang Blog Manado tunjukkan dibawah ini)
- Di back up atau disimpan dulu templatenya, jika sewaktu-waktu terjadi kesalahan bisa dikembalikan ke bentuk semula.
- Klik "Buka" dan masukkan kode berikut di atas kode ]]></b:skin> :
.sompret-wrapper {float:right; position: relative;}
.sompret { overflow: hidden; position: relative; width:300px; height:400px;}
.image_reel { position: absolute; top: 0; left: 0; }
.image_reel img {overflow: hidden;float: left;width:300px; height:auto;}
.paging {background:#878773; border:1px solid #676756;padding: 4px 0 2px; text-align: right;z-index: 100; }
.paging a { text-indent:-9999px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiV-U5gS9pFMDoaY8pr6Hiy4Sfun_6xbGT8VzkG28KLAGBO5EaCzyTyu3QEDsLjlCvsL1WP9eCC0WICw74-EZlKxYgzhJBZSCj1nMXLdrQGgB-0p3TJxWT40jXeqQcOCr9f_SJLJcNoae8/s1600/slider_item.png) no-repeat center; width:10px; height:10px; display:inline-block;margin:3px; border:none; outline:none; }
.paging a.active { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOikSuz6Gcp1jrxv-Mo4dUVKOocLxSSezCRZA4Q_YTVC51nCamQcYVMVkvpCptGn30-2kNvA0ym_U2kCqsO7w99KF7gPzumEgJk4KU1_4O9yHX3qtVjqho0y3c6tFr4s4NBcz6Y-cI_9k/s1600/slider_item_active.png) no-repeat center; border:none; outline:none;}
.paging a:hover {font-weight: bold; border:none; outline:none;}
.crott { width:280px; display: none; position:absolute;bottom: 0; left: 0; z-index: 101; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4pwyT1aIMOBLsOpgC2U2OJKrv_dwOObInErF4KHkauvE7CaEHfa7jBCicXDJ20PHHHVPnHuQ9O59_s06iL2MOI48PIwNLjZvBAjfq7ZaBxUHjsi80b92g_Uji5F-SMIEClO0VjOuzKQWQ/s1600/uj-opacity-40.png);padding:5px 10px; }
.crott a{color: #fff;font: 16px Oswald }
.crott p{color: #fff;font: 12px Arial;}
Kode warna merah diatas adalah ukuran slider, untuk lebar 300px dan tinggi 400px. Perhatikan semua dan Anda harus sesuaikan dengan ukuran sidebar pada template yang Anda gunakan. Kalau dalam demo Blog Manado memaksimalkan dengan ukuran tampilan memakai ukuran lebar 300px dan tinggi 250px.
<script src='http://code.jquery.com/jquery-1.8.3.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
jQuery(document).ready(function() {
//Set Default State of each portfolio piece
$(".paging").show();
$(".paging a:first").addClass("active");
//Get size of images, how many there are, then determin the size of the image reel.
var imageWidth = $(".sompret").width();
var imageSum = $(".image_reel img").size();
var imageReelWidth = imageWidth * imageSum;
//Adjust the image reel to its new size
$(".image_reel").css({'width' : imageReelWidth});
//Paging + Slider Function
rotate = function(){
var triggerID = $active.attr("rel") - 1; //Get number of times to slide
var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide
$(".paging a").removeClass('active'); //Remove all active class
$active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)
$(".crott").stop(true,true).slideUp('slow');
$(".crott").eq( $('.paging a.active').attr("rel") - 1 ).slideDown("slow");
//Slider Animation
$(".image_reel").animate({
left: -image_reelPosition
}, 500 );
};
//Rotation + Timing Event
rotateSwitch = function(){
$(".crott").eq( $('.paging a.active').attr("rel") - 1 ).slideDown("slow");
play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds
$active = $('.paging a.active').next();
if ( $active.length === 0) { //If paging reaches the end...
$active = $('.paging a:first'); //go back to first
}
rotate(); //Trigger the paging and slider function
}, 10000); //Timer speed in milliseconds (3 seconds)
};
rotateSwitch(); //Run function on launch
//On Click
$(".paging a").click(function() {
$active = $(this); //Activate the clicked paging
//Reset Timer
clearInterval(play); //Stop the rotation
rotate(); //Trigger rotation immediately
rotateSwitch(); // Resume rotation
return false; //Prevent browser jump to link anchor
});
});
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjg-9DV5e25uhQ_1P3BeSNE1iIj5uvgXz3NOj2vfrJfjHC45hveeJHBtWrPDt36QdvMHirF5bXEmgPJZsDm9uXO18S6a7yOTgPFNihF4oZDdvNbVTQNkYws9mfhuQS4sB5xAoj_xszJ9aQ/s1600/no+image.jpg";
showRandomImg = true;
aBold = true;
summaryPost1 = 80;
summaryTitle = 20;
numposts1 = 6;
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 showrecentposts1(json) {
j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
img = new Array();
for (var i = 0; i < numposts1; 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 = ["January","February","March","April","May","June","July","August","September","October","November","December"];
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 daystr = m+ ' ' + day + ' ' + y ;
var trtd = '<div class="crott"><a href="'+posturl+'">'+posttitle+'</a><p>'+removeHtmlTag(postcontent,summaryPost1)+'... </p></div>';
document.write(trtd);
j++;
}
}
function showrecentposts2(json) {
j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
img = new Array();
for (var i = 0; i < numposts1 ; 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 daystr = day+ ' ' + m + ' ' + y ;
var trtd = '<a href="'+posturl+'"><img src="'+img[i]+'"/></a>';
document.write(trtd);
j++;
}
}
//]]>
</script>
Perhatikan kode script warna merah paling atas, jika pada template Anda sudah terpasang script itu seri berapapun, kode script itu tidak usah diikutkan, hanya satu jquery yang ada pada sebuah template jika ada dua atau lebih akan bentrok dan salah satu fungsinya tidak jalan.. numposts:6;adalah jumlah post yang tampil pada slider.
6. Sekarang Anda tinggal mau meletakkan slider itu dimana, jika ingin diletakkan di sidebar sebelah kanan paling atas seperti terlihat pada demo. Cari kode <div id='sidebar-wrapper'> atau kode pembungkus sidebar yang ada pada template Anda, kemudian letakkan kode berikut ini sebelum atau diatas <div id='sidebar-wrapper'> :
<b:if cond='data:blog.pageType == "item"'>
<div class='sompret-wrapper'>
<div class='sompret'>
<div class='image_reel'>
<script>
document.write("<script src=\"/feeds/posts/default?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts2\"><\/script>");
</script></div>
<div class='description'>
<script>
document.write("<script src=\"/feeds/posts/default?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts1\"><\/script>");
</script>
</div>
</div>
<div class='paging'>
<a href='#' rel='1'/>
<a href='#' rel='2'/>
<a href='#' rel='3'/>
<a href='#' rel='4'/>
<a href='#' rel='5'/>
<a href='#' rel='6'/>
</div>
</div></b:if>
Keterangan :
Tampilan slider dengan menggunakan kode diatas hanya terlihat pada postingan, jika Anda ingin slider terlihat di homepage hapus kode pertama dan terakhir yang berwarna biru muda. Slider diatas menampilkan postingan terbaru Anda, jika ingin merubah menjadi tampil per label anda tinggal menambahkan kode /-/your label antara kode default dan ?, jadinya seperti ini default/-/your label?max-results karena kode tersebut diatas ada dua, Anda harus ganti dua-duanya.
Contoh yang saya pakai dalam Demo adalah default/-/DPRD Sulut?max-results
Terakhir save, selesai.
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.
Dan untuk teman-teman yang sudah berpartisipasi dan meramaikan forum diskusi pada blog ini saya mengucapkan banyak terima kasih, silahkan berdiskusi dengan bebas dan sehat. Untuk sementara saya belum bisa ikutan nimbrung karena masih banyak pekerjaan yang mesti saya selesaikan. Semua pertanyaan di luar topik artikel ini silahkan masukkan pada forum diskusi, klik menu forum diskusi yang ada pada menu navigasi atas blog ini.
NB :
Jika Anda melihat gambar pada slider kadang terlihat kadang tidak, itu karena penambahan script lazy load image yang ada pada template demo.