Cara Membuat Fitur Slider/Slideshow Di Blog

By |Updated: November 10, 2016 6 Comments

Berikut ini adalah cara membuat slider (slideshow) di blog. Fitur-fitur Artikel atau gambar menggunakan slider adalah salah satu elemen umum yang bisa ditemukan di banyak blog atau website. Fitur slider ini dapat diterapkan pada homepage bahkan halaman posting.Fitur ini pun bisa dibuat manual maupun otomatis sesuai kehendak.

Cara Membuat Slider/Slideshow (Responsive)

Slider versi ini sangat sederhana, dan jenis ini sangat ringan karena ukurannya yang kecil hanya sekitar 2kb, sehingga loading halaman berjalan normal, dan saya suka slideshow ini karena sederhana tapi cukup menarik. Saya merekomendasikan untuk menambahkan slider/slideshow atau setidaknya mencoba terlebih dahulu sebagai pengalaman.

DEMO

“Slideshow” ini menggunakan “JavaScript” yang merupakan salah satu cara terbaik untuk menampilkan banyak informasi halaman artikel dalam ruang yang relatif kecil dengan menambahkan fungsi yang bagus.

slider, slideshow

Image: slider atau slideshow

Slider ini memiliki fitur menampilkan gambar otomatis dengan efek geser dilengkapi judul dan deskripsi/keterangan, juga memiliki navigasi menggunakan persegi/titik untuk memberikan pada pengunjung agar dapat memilih konten lebih mudah dengan melompat langsung untuk setiap slide. Slider Geser akan berhenti secara otomatis ketika mouse hover dan ini dikonfigurasi dalam kode.

Cara Membuat Slider

Slider, dibuat dari beberapa baris “HTML” sederhana dan jika Anda memiliki pengetahuan dasar “CSS”, maka Anda dapat menyesuaikan atau memodifikasi seperti yang Anda inginkan, dan memang benar-benar dapat dimodifikasi sehingga terlihat lebih bagus. jika tertarik, maka ikuti langkah-langkah berikut.

1. Masukan kode berikut diatas ]]></b:skin> atau </style> di bagian head template.

CSS untuk Slider

.easyslider-wrapper { 
    width: auto; 
    float: left; 
    position: relative; 
    padding-right: 2%; 
    padding-top: 10px; 
    }
.easyslider { 
    overflow: hidden; 
    position: relative; 
    width: 100%; 
    height: 350px; 
    background: #eee; 
    }
.image_reel { 
    position: absolute; 
    top: 0; 
    left: 0; 
    }
.image_reel img { 
    float: left; 
    width: 20%; 
    height: 350px;
    }
.paging { 
    background: none; 
    position: absolute; 
    bottom: 15px; 
    right: 20px; 
    padding:4px 0 2px; 
    z-index: 100; 
    display: none; 
    }
.paging a { 
    margin: 3px; 
    background: #fff; 
    width: 10px; 
    height:10px; 
    display: inline-block; 
    border: none; 
    outline: none;
    }
.paging a.active { 
    background: #15E3FF; 
    border: 1px solid #15E3FF; 
    }
.paging a:hover {
}
.easytitledes { 
    width:70%; 
    display: none; 
    position: absolute; 
    bottom: 20px; 
    left: 20px; 
    z-index: 101; 
    background: #000A3F;
    background: rgba(2, 0, 51, 0.6); 
    padding: 10px 15px; 
    }
.easytitledes a { 
    color: #15E3FF; 
    font: 14px sans-serif; 
    text-transform: uppercase; 
    font-weight: bold; 
    }
.easytitledes a:hover { 
    color:#29FF00 
    }
.easytitledes p { 
    color: #fff; 
    font: 12px Arial; 
    }

2. Masih di bagian head template, masukan kode Jquery berikut diatas </head>

JQuery

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js" type="text/javascript"></script>

Catatan: Lewati langkah ini, jika sudah memasang Jquery dalam versi yang lain, tapi usahakan Jquery versi 2.x.x

3. Masih di bagian head template, masukan kode JavaScript berikut diatas </head>

Javascript

<script type="text/javascript">
/*<![CDATA[*/$(document).ready(function() {
    $(".paging").show(); 
    $(".paging a:first").addClass("active");

var imageWidth = $(".easyslider").width(); 
var imageSum = $(".image_reel img").size(); 
var imageReelWidth = imageWidth * imageSum;

    $(".image_reel").css({'width' : imageReelWidth});

rotate = function(){ var triggerID = $active.attr("rel") - 1; 

var image_reelPosition = triggerID * imageWidth;

    $(".paging a").removeClass('active');
        $active.addClass('active');

    $(".easytitledes").stop(true,true).slideUp('slow');
    $(".easytitledes").eq( 
    $('.paging a.active').attr("rel") - 1 ).slideDown("slow"); 
    $(".image_reel").animate({left: -image_reelPosition}, 400 );
    };

rotateSwitch = function(){
    $(".easytitledes").eq( $('.paging a.active').attr("rel") - 1 ).slideDown("slow");

play = setInterval(function(){
    $active = $('.paging a.active').next();

if ( $active.length === 0) {
    $active = $('.paging a:first'); } rotate(); }, 4000); };

rotateSwitch(); $(".image_reel a, .easytitledes a").hover(function() {
    clearInterval(play); }, function() { rotateSwitch();
    });
    $(".paging a").click(function() { $active = $(this);
    clearInterval(play); rotate(); rotateSwitch();  return false;
    });
});
/*]]>*/</script>

4. Ada 2 metode untuk baris kode HTML; Manual dan Otomatis publish artikel terbaru.

Metode 1 Manual

Masukan kode berikut di suatu bagian dalam HTML body, contoh setelah/dibawah <div class="main-wrapper"> atau <div id="main-wrapper"> atau baris kode yang sejenis/mirip, karena struktur setiap Blog memiliki nama yang berbeda-beda.

HTML

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div class='easyslider'>
   <div class='image_reel'>
<a href="#"><img src="...image1.jpg" /></a>
<a href="#"><img src="...image2.jpg" /></a>
<a href="#"><img src="...image3.jpg" /></a>
<a href="#"><img src="...image4.jpg" /></a>
<a href="#"><img src="...image5.jpg" /></a>
   </div>
   <div class='descriptionslider'>
<div class="easytitledes"><a href='...post-link1.html'>Post-Title 1</a><p>Description / Caption 1</p></div>
<div class="easytitledes"><a href='...post-link2.html'>Post-Title 2</a><p>Description / Caption 2</p></div>
<div class="easytitledes"><a href='...post-link3.html'>Post-Title 3</a><p>Description / Caption 3</p></div>
<div class="easytitledes"><a href='...post-link4.html'>Post-Title 4</a><p>Description / Caption 4</p></div>
<div class="easytitledes"><a href='...post-link5.html'>Post-Title 5</a><p>Description / Caption 5</p></div>
   </div>
   <div class='paging'>
<a class='' href='#' rel='1'/>
<a class='' href='#' rel='2'/>
<a class='' href='#' rel='3'/>
<a class='' href='#' rel='4'/>
<a class='' href='#' rel='5'/>
   </div>
</div>
</b:if>

Catata: Warna hijau (baris kode paling atas dan terakhir) adalah kode untuk platform blogger agar dapat ditampilkan di halaman depan saja, sedangkan untuk platform lain bisa dihapus dan diatur sesuai websitenya.

Warna Oranye adalah untuk link image/gambar, Biru untuk link Url posting/artikel, Pink untuk Title/Judul, dan Merah untuk deskripsi. Semuanya dimasukan satu persatu ke dalam baris kode HTML.

Metode 2 Otomatis Publish Artikel Terbaru

Jika anda memakai Platform Blogger, mungkin ingin update artikel secara otomatis masuk ke slider, ikuti langkah berikut:

Masukan tambahan baris kode JavaScript sebelum/diatas </head> di bagian head template, kode ini untuk menampilkan artikel terbaru secara otomatis.

Javascript Artikel Terbaru

<script type='text/javascript'>
/*<![CDATA[*/imgr = new Array();imgr[0] = "https://2.bp.blogspot.com/-uitX7ROPtTU/Tyv-G4NA_uI/AAAAAAAAFBY/NcWLPVnYEnU/s1600/no+image.jpg";showRandomImg = true;aBold = true;summaryPost1 = 150;summaryTitle = 20;numposts1 = 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 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 = ""; var trtd = '<div class="easytitledes"><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;}; 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; var trtd = '<a href="'+posturl+'"><img src="'+img[i]+'"/></a>'; document.write(trtd); j++;}}
/*]]>*/</script>

Warna Pink adalah link image/gambar yang tampil jika dalam suatu artikel tidak ada gambarnya, sebaiknya anda mengganti link ini dengan link image anda sendiri, supaya pemakaian tidak terbagi-bagi dengan orang lain.

Masukan kode berikut disuatu bagian dalam body template, contoh sesudah/dibawah <div class="main-wrapper"> atau yang sejenis.

HTML dan JavaScript

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div class='easyslider'>
   <div class='image_reel'>
<script>
document.write(&quot;&lt;script src=&quot;/feeds/posts/default?max-results=&quot;+numposts1+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts2&quot;&gt;&lt;/script&gt;&quot;);
</script>
   </div>
   <div class='descriptionslider'>
<script>         
document.write(&quot;&lt;script src=&quot;/feeds/posts/default?max-results=&quot;+numposts1+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts1&quot;&gt;&lt;/script&gt;&quot;);
</script>
   </div>
   <div class='paging'>
<a class='' href='#' rel='1'/>
<a class='' href='#' rel='2'/>
<a class='' href='#' rel='3'/>
<a class='' href='#' rel='4'/>
<a class='' href='#' rel='5'/>
   </div>
</div>
</b:if>

Warna Hijau adalah baris kode pembuka dan penutup untuk menampilkan slider hanya di homepage, pelajari lebih tentang trik menampilkan dan menyembunyikan elemen ikuti link pada bagian metode manual.

5. Save Template, dan lihat hasilnya.

Catatan: Ingat kalo bingung, lihat saja langsung source code-nya di halaman demo, perhatikan saja kode-kodenya, simple banget.

*Image Reel Slider thanks to Sohtanaka

Tags:
1 Star2 Stars3 Stars4 Stars5 Stars (4 votes, average: 4.00 out of 5)
Loading...

6 Komentar: Cara Membuat Fitur Slider/Slideshow Di Blog

  1. yopi

    terima kasih artikelnya, membantu sekali buat saya untuk disain blog saya, saya terapkan di grosiran-tas.blogspot.com hasilnya luar biasa, berhasil…
    sekali lagi terima kasih, salam sukses.

    Reply
    1. Fantastis Post author

      sepertinya link url dalam slidernya harus diedit atau diperbaiki, karena belum mengarah ke link yang dituju, coba perhatikan lagi link yang dituju

      Reply

Leave a Reply

Your email address will not be published. Required fields are marked *