[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

7 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