[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 mode 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4S8MmCbaTyunKuTubpG2HhW15haf6fTCnrYywQbTRTeBg5WbNAhETWEtwUNlU51UQiZapyeCwX5M9Oi6LOkZjA0vzNM1XmRJ1nlk2j2eFPKIxQCe6vP_lK6PHJ4PCOTCpxZRFpT2ocL9Q/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicvuCntEvLl-VgavOUtZ3tJE2T-cxdvNEZqecOTCY4gahoywfedbIcNgq1wWIILvECBcGwb7Rsv8f0ssywiJy8VMzGDAGmA1KemeZn2rkBQRtlGexcSWunBJlnbLKCdQt4ykt9w1o6V3ow/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnNJvwL0nRgEzi0s54xhEXvKIkPaXF5f90oYCmf6K_nAl7UAbRorSBTHS80M5NtGcR3h_RnJvS0S3cF7qqm7V2IaE04Utm2lzO_QLcRDs3aXljn37pTpNgi4w_TeQimDL0zZ7KJIThGTlb/s1600/image-slider-1.jpg" alt="Nama Image" /></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGMejsMB9R0y8D7Bs_FnFh8I82tHJTeMM0bnZiC_mIQftPDl5jHnFJPuJT2cPBFRTRejGJu16yUbWhVh6oWQ0aNtDhtKIvJc1Wllg-9oR1JI4mJ2qOvkYEGxPKvAcYhqzlcUCVJ7mrbK8i/s1600/image-slider-2.jpg" alt="Deskripsi Image"/></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFF-qMzRQ03treOdR-NBm-1U8yyVXNJnPMWbrkaOLdosvGyW9qt1QyCLKHj9NRP-1JgSo_7yADQW_FBTAvLNRmRiFLJQenZlztrwuP75K6hTCzBw5unoC6CUt-dqrNQ3bSCst88LdUC601/s1600/image-slider-3.jpg" alt="Keterangan Slide"/></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUzcXGs3S9TSErxcCuiYXQcz-pCWc2_GRE8WhxDJg1Toi5CHYDIyG6ygRUl0W9ryynNW_mPDz8wcbhN3mYhHCp2of_WwD3EnA2iFCAiLPso3UZiJ1nALUmczLZJIeqEvkeZU4Iaj6gJwQq/s1600/image-slider-4.jpg" alt="Suka suka" /></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhny6u7cVgJbGS7MWdDg7L2KODvaStTGfV6diSJo_9clL-wa8W-g4AsBkpMnBG3w0rm_l5dpkLHULvL8Gvyf6_ZyUCzZXUpBEvsz_ylTf-eS-aHSI1mNZ5x0mKWuk5YWJ0bq2vFLoHWHS1A/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.

---

---