Mari Tambah Gambar Slider di Posting Blogger. Anda dapat dengan mudah menambahkan slider gambar di posting blog Anda cukup ikuti beberapa langkah untuk menambahkan Image Slider.

1) Buka Tata Letak lalu Klik Tambah Gadget →  Pilih HTML / JavaScript 

2) Salin dan tempel kode di bawah ini.

<style type = "text / css">
/ * http://dimpost.com * /
#sliderFrame {position: left; width: 500px; margin: 0 auto 40px;}
    
#slider {
    lebar: 500px; tinggi: 206px; / * Jadikan ukurannya sama dengan gambar Anda * /
 latar belakang: #fff url (https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiesQQx_hbYJX6-ajFMErkNHs-NrOwMU3kI26SsIKHP9rMgZDe9CBBmVk6gKI3CU_nPHM7UThnsFTERWcvLVNGxyScdyKjNy2UHllJXl-Oufr9vl4JVuDrU6yyKFqclEy4tvcz-mLmaIw81/s1600/loading.gif) jangan ulangi 50% 50%;
 posisi: relatif;
 margin: 0 otomatis; / * membuat slider gambar sejajar tengah * /
    bayangan kotak: 0px 1px 5px # 999999;
}
#slider img {
 posisi: absolut;
 perbatasan: tidak ada;
 display: tidak ada;
}
/ * gaya tautan (jika gambar terbungkus tautan) * /
#slider a.imgLink {
 z-index: 2;
 display: tidak ada; posisi: absolut;
 atas: 0px; kiri: 0px; batas: 0; bantalan: 0; margin: 0;
 lebar: 100%; tinggi: 100%;
}
/ * Gaya teks * /
div.mc-caption-bg, div.mc-caption-bg2 {
 posisi: absolut;
 lebar: 100%;
 tinggi: otomatis;
 bantalan: 0;
 kiri: 0px;
 bawah: 15px;
 z-index: 3;
 overflow: disembunyikan;
 ukuran font: 0;
}
div.mc-caption-bg {
 warna latar belakang: hitam;
}
div.mc-caption {
 font: tebal 14px / 20px Arial;
 warna: #EEE;
 z-index: 4;
 padding: 10px 0;
 perataan teks: tengah;
}
div.mc-caption a {
 warna: # FB0;
}
div.mc-caption a: hover {
 warna: # DA0;
}

/ * ------ pembungkus peluru navigasi bawaan ------ * /
div.navBulletsWrapper {
 atas: 320px; kiri: 280px; / * Posisinya relatif terhadap #slider * /
 lebar: 150px;
 latar belakang: tidak ada;
 padding-left: 20px;
 posisi: relatif;
 z-index: 5;
 kursor: pointer;
}
/ * setiap peluru * /
div.navBulletsWrapper div
{
    lebar: 11px; tinggi: 11px;
    latar belakang: url transparan (https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaopD60RRJfxh-nhRleW_3zyRxpo32VqUyhyRuQpVA46FBTTXu8L7Nf2R_F-GGQEhNVC1bxG0BeEzNS8Y6MTBmsNPeiTF630CalAyRKzmBsB69G9aK5-dxpitE7daJljq3_BbKjOSQIFUP/s1600/bullet.png) no-repeat 0 0;
    float: left; overflow: hidden; vertical-align: middle; cursor: pointer;
    margin-right: 11px; / * jarak antara setiap peluru * /
    _position: relatif; / * IE6 hack * /
}
div.navBulletsWrapper div.active {background-position: 0 -11px;}

/ * --------- Lainnya ------- * /
#slider
{
 transform: translate3d (0,0,0);
    -ms-transform: translate3d (0,0,0);
    -moz-transform: translate3d (0,0,0);
    -o-transform: translate3d (0,0,0);
}
</style>
<script src = "http://dimpost.googlecode.com/files/js-image-slider.js" type = "text / javascript"> </script>
<br />
<div id = "sliderFrame">
<div id = "slider">
<a href="https://www.blogger.com/blogger.g?blogID=8043272874101352470#"> <img alt = "# htmlcaption" src = "http://2.bp.blogspot.com/-lSWlPRHuZEM /VP-D_mcYzeI/AAAAAAAAucQ/LTCDOqUMHnQ/s1600/image-slider-2%5B1%5D.jpg "height =" 214 "title =" "width =" 500 "/> </a>
<a href="https://www.blogger.com/blogger.g?blogID=8043272874101352470#"> <img alt = "GO UP!" src = "http://3.bp.blogspot.com/-fwGRH_2Af4E/VP-D8siDXSI/AAAAAAAAAII/D_ALlzatCJY/s1600/image-slider-1%5B1%5D.jpg" height = "214" width "" 500 " /> </a>
<a href="https://www.blogger.com/blogger.g?blogID=8043272874101352470#"> <img alt = "Javascript murni. Tanpa jQuery. Tanpa jQuery. Tanpa flash." src = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmVyHiDbQE2HjVSc2qexbPFFKFxHVyi-BcIkF5JzGB_ywfqEWbqi6DTRnTM5VIssxSuVf2H0NWiL8yPdbVx6nfZttoZ_Cki0DAJZzWU18a3CUjuLRqQ4CnA6I1iAaLy1NX1hupJ1a-ar3r/s1600/image-slider-4%5B1%5D.jpg" height = "214" width = " 500 "/> </a>
<a href="https://www.blogger.com/blogger.g?blogID=8043272874101352470#"> <img alt = "# htmlcaption2" src = "http://4.bp.blogspot.com/-5E2_eAn5Kws /VP-ECMbNvNI/AAAAAAAAucY/XG5I1-yxM4c/s1600/image-slider-3%5B1%5D.jpg "height =" 214 "width =" 500 "/> </a>
<a href="https://www.blogger.com/blogger.g?blogID=8043272874101352470#"> <img alt = "Tetap Terhubung" src = "http://4.bp.blogspot.com/-mTefDxJoFgQ /VP-EHPwp8EI/AAAAAAAAuco/-BXhd_rxPYU/s1600/image-slider-5%5B1%5D.jpg "height =" 214 "width =" 500 "/> </a>
</div>
<div id = "htmlcaption1" style = "display: none;">
Kode oleh <a href="http://bitly.com/Btemplates" target="_blank"> Micro </a>
</div>
<div id = "htmlcaption2" style = "display: none;">
<a href="http://bitly.com/Btemplates" rel="dofollow" target="_blank" title="Image Slider Widget"> <img alt = "Widget Slider Gambar" border = "0" src = " http://img1.blogblog.com/img/blank.gif "style =" bawah: 10%; posisi: diperbaiki; kanan: 0%; " /> </a> </div>
</div>