Kamis, 29 Juni 2017

Cara membuat slider (slideshow) di blog

Yooo ketemu lagi dengan saya Dany Tri Kusuma Gan Sist, Kali ini mau nulis artikel tentang cara membuat slider (slideshow) di blog. Fitur ini sangatlah menarik dan menambah kekerenan di blog kita gan sist. Terdapat 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. Namun kali ini aku pakai yang manual saja. Soalnya maren nyoba yang otomatis gak jadi. Hehehe
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. “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 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.

Langkah-langkah Membuat Slider

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

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

Kode :
.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. Maasukan kode Jquery berikut diatasnya </head>

Kode :
<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. Masukan kode JavaScript berikut diatasnya </head>

Kode :
<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(); }, 8000); };

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

<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-link2.html'>Judul 1</a><p>Description 1</p></div>
<div class="easytitledes"><a href='...post-link2.html'>Judul 2</a><p>Description 2</p></div>
<div class="easytitledes"><a href='...post-link2.html'>Judul 3</a><p>Description 3</p></div>
<div class="easytitledes"><a href='...post-link2.html'>Judul 4</a><p>Description 4</p></div>
<div class="easytitledes"><a href='...post-link2.html'>Judul 5</a><p>Description 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>

Warna ungu itu copy alamat link gambar, warna hijau untuk alamat link, warna biru untuk judul blognya dan warna orange untuk deskripsinya. ganti aja sesuai kebutuhan kalian gan sist.

5. Save Template, dan lihat hasilnya.

Oke, Nantikan video podcast ngalor ngidulku ya kalau bingung gan sist, nanti akan aku buatin video tutorialnya. Ini dia gan tutorialnya aku uploadin di youtubeku di acara podcast ngalor ngidul yang bahas tentang tips and tutorial. mari kita simak video yang berjudul Cara membuat slider slideshow di website - PNN Eps 34 ini agar lebih jelas. wokeeee

Related Posts

Cara membuat slider (slideshow) di blog
4/ 5
Oleh

Subscribe via email

Like the post above? Please subscribe to the latest posts directly via email.

16 komentar

Tulis komentar
avatar
29 Januari 2018 08.27

tutorialnya sangat membantu, makasih ya.

Reply
avatar
24 Maret 2018 14.27

bang di blog kita gambarnya buram itu gmn nya https://isrardalwa.blogspot.co.id/

Reply
avatar
27 April 2018 19.23

saya malah gada main-wrappernya

Reply
avatar
10 Mei 2018 11.38

thanks..work. saya terapkan di http://www.recalmaru.com/

Reply
avatar
17 Juli 2018 03.39

https://lifestories.mcaltonz.com/ gamnbarnya gak gerak wkwkkw

Reply
avatar
15 Agustus 2018 09.02

Caranya biar gak buram gmn bang?

Reply
avatar
18 Agustus 2018 20.01

bang biar slidernya agak cepat kode yang harus diganti yang mana ?

Reply
avatar
21 September 2018 08.51

Bang udah ku masukin url gambar ko gambar malah gambar gak muncul gimana ya solusinya??

Reply
avatar
17 Oktober 2018 12.42

Gambarnya diganti yang seukuran gan, di edit dulu gambarnya, kalau buram berarti kurang gede atau sebaliknya, utak atik aja

Reply
avatar
17 Oktober 2018 12.50

salah ngopinya, ada kode yg kehapus dll, banyak gan

Reply
avatar
17 Oktober 2018 17.53

SUKSESS,saya berhasil, mkasih gan tutornya sangat bermanfaat ,

Reply