Sekarang cara untuk membuatnya
- Silahkan Login ke blogger.com
- Masuk ke bagian layout dan tambahkan gadget (+Add gadget)
- Pilih yang HTML/Javascript
- Lalu masukkan Code Berikut :
Code HTML, dan JAVASCRIPT
<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/AVvXsEgQvBNqSjour7ENzvN9MqNfm5_mAa9iBqMgzBKJ8W2dpRQh7NLLsbPLErdYZ5VQIansALKngvIUqoXQaIzkvp9Y19HK_lKGeh7hJyPsZTX2JgFqYpzKflCqUG1L9tChTv9JjL4-ziGfsKPY/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/AVvXsEjNTy4dkC5F5KZYBZs7HlsLWKH33r09CoKuWkYLg3kkfxRcEHR4XkBO2r9TIT8GAAQJ9hvRg96c89Tdbjkfk5_qScOhCy8RxlrMgkNtE63TkulriUFu4Dg_tun_Rl7ZicSASw6G4VLoBinP/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 id="slider">
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-2sZoYouA7xD0uXhozxJC3tLgtPjA-VieuHwXg6HzuPwDDZZ1lb79NBbQpQP_HNvPdG-m7GnRRnSBHKvJ5RxWEw9Z__XJUu7SwpyexQ20YnS8QhHkqso1emJr7Jc1OCAdRivi2IwHUC05/s1600/image-slider-1.jpg" alt="#htmlcaption1" /></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgx3gN-mRzrMRC-VGzcDl8VxlpiYtS1I3BP-1ycxEllMgN2fwIEZV5JpTqpJFCmqNA-YNd8Eqd9nN2h8WK_7S23XJfIi61MZTSxfO0uQBsje6kR5CbUiLph08cGZxnSx7oJ3778WP8cBRXA/s1600/image-slider-2.jpg" alt="Ini Keterangan Slide2" /></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbnHDJLrCWMe_00w60My3xyDPrg8k7knQY_RjemTZsUEm9PK8hMpUW1GImd_4h4oD-4yVTJV_NalfGNMmu4zm2Ta59v1TFjE8hvBVzoKVqW_jMmmNEmpMkvcXprBF5YXDe8yQCIlZUSAcV/s1600/image-slider-3.jpg" alt="Ini Keterangan Slide23" /></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgK25MKXIDbzVbWdlaKpfAOkRz6y6x7YgLs2dXYe0kn_DxJhycb9B1K5pSuQfagbNedfT2Dh8YHQKPplqv-a3p39sXj7qjnDx70R4RPc5YV99GpLUh_uycxJjXi47H9JGihwPWAun99Wz1z/s1600/image-slider-4.jpg" alt="#htmlcaption2" /></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPsXfWMmsGdwfD-QpULA2idJaxCoDqXJK8ysBV6yjbOGSsmCc4iNvfPWr-gthdgAlm4UsbsJuUSpLsZax2Eo3CkeOnUqOsK-PuHZucG7tiswVZgH_r2Y_mHG3IOGfpxbJkB3e4J_Dq8n2d/s1600/image-slider-5.jpg" alt="Stay Connected"/></a>
</div>
<div id="htmlcaption1" style="display: none;">
Image Slider by <a href="http://Webjalanan.com" target="_blank">Webjalanan.com</a>
</div>
<div id="htmlcaption2" style="display: none;">
<a href="http://Webjalanan.com" target="_blank">CSS</a> <a href="/" target="_blank">JavaScript</a> Rocks.
</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>Jangan lupa edit link gambar dengan gambar milik agan sendiri, caranya mudah tinggal ganti code yang ane beri warna hijau dengan link gambar punya agan.. OK selamat mencoba.
0 komentar:
Post a Comment