[Ask] Cara membuat slider di postingan blogger

Cara membuat slider di postingan blogger..?

: Heri hermawan : heriher*********@gmail.com : http://herlivs.blogspot.com
: Agan tolong bantuannya
Bagaimana cara membuat slide gambar di dalam postingan blogger..
Tolo beri contohnya gan.
Terimakasih gan.
Mudahan agan bisa bantu saya.
Assalamualaikum.


Waalaikumsalam Warahmatullahi Wabarakatuh.
Untuk membuat seperti slider diatas , caranya hampir sama dengan tutorial Membuat Image Slider pada Blogger , contoh hasilnya akan seperti ini : LIHAT DEMO

1. Untuk blogger post pertama agan harus memilih metode HTML 



2. Masukkan code berikut

<style type="text/css">
#sliderFrame {position:relative;width:100%;height:200px;margin: 10px auto;max-width: 700px;}
#slider{width:100%;height:100%;background:url(http://4.bp.blogspot.com/-aVGCcclfKQo/UR-T3vxFAMI/AAAAAAAABm8/ncwIfUdoLIw/s1600/loading.gif) 50% 50% no-repeat #fff;position:relative;margin:0 auto;box-shadow:0 1px 5px #999;transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-o-transform:translate3d(0,0,0)}
#slider a.imgLink,#slider img{display:none;position:absolute}
#slider img{border:none;min-width:100%}
#slider a.imgLink{z-index:2;top:0;left:0;border:0;padding:0;margin:0;width:100%;height:100%}
div.mc-caption-bg,div.mc-caption-bg2{position:absolute;width:100%;height:auto;padding:0;left:0;bottom:15px;z-index:3;overflow:hidden;font-size:0}
div.mc-caption-bg{background-color:#000}
div.mc-caption{font:700 14px/20px Arial;color:#EEE;z-index:4;padding:10px 0;text-align:center}
div.mc-caption a{color:#FB0}div.mc-caption a:hover{color:#DA0}
div.navBulletsWrapper{padding: 5px 0; margin:0 auto; text-align:center;top:100%;background:0 0;position:absolute;z-index:5;cursor:pointer;}
div.navBulletsWrapper div{width:11px;height:11px;background:url(http://3.bp.blogspot.com/-ZUaX5-lcCi4/UR-TzMXcpuI/AAAAAAAABm0/kokxtfFdNcU/s1600/bullet.png) no-repeat;float:left;overflow:hidden;vertical-align:middle;cursor:pointer;margin-right:11px}
div.navBulletsWrapper div.active{background-position:0 -11px}
.intro{bottom:0;color:rgba(0,0,0,.2);font-size:16px;position:absolute;right:0;text-decoration:none;z-index:99999}
.group1-Wrapper{position:absolute;z-index:20;top:40%;width: 100%;}
a.group1-Next,a.group1-Prev{margin:0 10px;padding:10px 20px;cursor:pointer;position:relative;border-radius:50%;background:#fff;font-size:24px;opacity:.75;}
a.group1-Prev{float:left;}a.group1-Next{float:right;}
a.group1-Next:hover,a.group1-Prev:hover{background:#e2e2e2;color:#fff;opacity:.9}
</style>

<div id="sliderFrame">
<div class="group1-Wrapper">
<a href='#' onclick="imageSlider.previous()" class="group1-Prev">&#8249;</a>
<a href='#' onclick="imageSlider.next()" class="group1-Next">&#8250;</a>
</div>

<div id="slider">
<a href="#"><img src="http://3.bp.blogspot.com/-1LayoXAEu_Y/UR-VGlIl8eI/AAAAAAAABnI/yI0SkxYfRsc/s1600/image-slider-1.jpg" alt="Nama Image" /></a>
<a href="#"><img src="http://3.bp.blogspot.com/-eOR0aaChxAw/UR-VGiVnp1I/AAAAAAAABnM/_bIC8_EisxQ/s1600/image-slider-2.jpg" alt="Deskripsi Image"/></a>
<a href="#"><img src="http://4.bp.blogspot.com/-5NisCPe6tEc/UR-VGfF8_8I/AAAAAAAABnE/kUtLaL3SzWE/s1600/image-slider-3.jpg" alt="Keterangan Slide"/></a>
<a href="#"><img src="http://2.bp.blogspot.com/-gl-HJvghglA/UR-VK7FgIBI/AAAAAAAABnc/EfjVW6e1nz4/s1600/image-slider-4.jpg" alt="Suka suka" /></a>
<a href="#"><img src="http://1.bp.blogspot.com/-qkKwbfW234Y/UR-VLZRV6hI/AAAAAAAABnk/pO5-b99UmGo/s1600/image-slider-5.jpg" alt="Stay Connected"/></a>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/WebJalanan/Blog/master/WJslider.js"></script>


3. Edit Code

Pada code <style> paling atas yang ane pertebal, agan sesuaikan dengan lebar postingan, dalam contoh code diatas lebar 700px dan tinggi 300px, Jangan lupa sesuaikan juga url imagenya.

Related Artikel [Ask] Cara membuat slider di postingan blogger

16 comments:

  1. Ok gan terimkasih banyak sebelumnya.
    Hehe maaf ni gan bnyak nanya..
    Cara nambahin tombol next previous sperti tutorial agan yg (Membuat Slider Bootstrap Yang Responsive) itu gimana caranya gan mohon dibantu gan terimakasih

    ReplyDelete
    Replies
    1. codenya sudah ane edit agar muncul navigation gan,
      silahkan di copy code yang baru.

      (*diatas ane beri kolom pemisah agar tau letak perubahan codenya)

      Delete
  2. Ok gan ane coba.. nnti ane laporan hasilnya terimakasih gan.

    ReplyDelete
  3. Mantap gan tp tinggal dikit lg gan tombol next previous nya ko ga jalan ya gan klo di klik error404..
    Supaya jalan tombolnya apa yg harus saya lakukan gan apa yg harus d tambahin..
    Dan klo di versi mobile lebar tinggi sudah saya rubah akan tetapi gmbarnya mnjadi tidak full gan.

    ReplyDelete
    Replies
    1. untuk next-prev sepertinya tidak ada code href="#"
      tinggal agan tambahkan code hrefnya
      jadi terlihat seperti ini :
      <a href='#' onclick="imageSlider.previous()" class="group1-Prev">‹</a>
      <a href='#' onclick="imageSlider.next()" class="group1-Next">›</a>

      Delete
  4. Yg mana yg harus saya rubah gan agar tombol next previousnya berpungsi dan posisinya tepat klo lebar tingginya saya rubah.. contohnya di link ini gan apa yg harus saya rubah..

    http://herlivs.blogspot.co.id/2017/03/tes-slider.html?m=1
    Versi mobile ane buka d hanphone kurang beraturan gan yg ane rubah

    ReplyDelete
    Replies
    1. cukup mudah sih sebenarnya gan,
      agan tinggal merubah ukuran pixel menjadi prosentase ^_^
      code CSS diatas sudah ane rubah lebarnya menjadi prosentase layar.
      silahkan agan coba ^_^

      Delete
  5. gan kenapa saat klik di are gambar dan tombol next-prev langsung sekrol ke atas? jadi kaya tombol back to top gitu. cara mengatasinya gimana gan?

    ReplyDelete
    Replies
    1. kemungkinan karena javascript belum terload dengan sempurna, jadinya function prevent tidak berjalan, coba agan buang code href='#'

      Delete
  6. supaya gamarnya ditengah gimana bos

    ReplyDelete
  7. supaya gambar nya ditengah gimana bos ..

    ReplyDelete
    Replies
    1. seharusnya sih sudah di tengah itu gan,
      atau coba tambahkan align pada div-nya,
      jadi yang awalnya <div id="slider"> jadi
      <div id="slider" align="center">

      Delete
  8. Anonymous4/05/2018

    gan, kode ini maksudnya apa ya?

    https://cdn.rawgit.com/WebJalanan/Blog/master/WJslider.js">

    Oya, kode yang dibagiin apa ada pop adsnya? saya mau hapus itu, karna tiap klik selalu mengarah ke pop ads

    ReplyDelete
    Replies
    1. WJslider.js itu rangkaian code untuk slider gan,
      open source kok jadi agan bisa memodifikasi sesuai selera.

      dan semua code i blog ini tidak mengandung iklan atau monitize dalam bentuk apapun gan.


      Delete
  9. Gan cara ubah efek nya gimana supaya cara ganti gambarnya slide biasa aja... Trus agar manual saja gak otomatis apanya yang lerlu di edit

    ReplyDelete
    Replies
    1. kalau ingin slide biasa,
      ane sarankan jangan pakai jquery gan,
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
      <script src="https://cdn.rawgit.com/WebJalanan/Blog/master/WJslider.js"></script>
      biar loading lebih cepat,
      jadi kedua code diatas buang aja

      lalu tambahkan inline code dibawah ini :
      <script>
      var mcaption,src_img,slideIndex=1,imageSlider={previous:function(){document.getElementById("slider").style.background="url("+src_img+")",document.getElementById("ndiv").remove(),showDivs(slideIndex+=-1)},next:function(){document.getElementById("slider").style.background="url("+src_img+")",document.getElementById("ndiv").remove(),showDivs(slideIndex+=1)}};function showDivs(e){var i,t=document.getElementById("slider").getElementsByTagName("img");for(e>t.length&&(slideIndex=1),e<1&&(slideIndex=t.length),i=0;i<t.length;i++)t[i].parentElement.style.display="none",t[i].parentElement.classList.add("imgLink");src_img=t[slideIndex-1].src,mcaption=t[slideIndex-1].alt,t[slideIndex-1].style.display="block";var d=document.createElement("div");d.setAttribute("id","ndiv"),d.innerHTML='<div class="mc-caption-bg" style="opacity: 0.3; visibility: visible;"><div class="mc-caption" style="opacity: 1; width: 700px;">'+mcaption+"</div></div>"+'<div class="mc-caption-bg2" style="opacity: 1; visibility: visible;"><div class="mc-caption" style="width: 700px;">'+mcaption+'</div></div>',document.getElementById("slider").appendChild(d),document.getElementById("slider").style.background="url("+src_img+")"}showDivs(1);
      </script>

      Delete