Membuat Image Slider Easy

Di sini saya berbagi JavaScript image slider keren untuk blogger. Hal ini dapat dengan mudah digunakan sebagai konten yang ditampilkan di blog blogger. Slider Gambar ini dibuat oleh menuc##l.com. Sebuah slider benar-benar keren adalah ini. Ini memiliki efek geser cukup bagus, dan kurang waktu pembukaan yang diciptakan oleh Javascript, ada jQuery atau flash yang digunakan. Dan satu hal lagi adalah itu mudah disesuaikan. Saya telah disesuaikan itu sedikit sesuai dengan sempurna untuk blogger blog. Lihat Demo atau download kode sumber dari link di bawah ini.

      DEMO

Cara Pasang Slider Image untuk Blog Blogger Anda

1. Pergi ke Blogger Dashboard> Tata Letak> Tambah Gadget
2. Pilih HTML / Javascript
3. Salin kode di bawah ini dan paste di atasnya.
   

   <style type="text/css">
   
   #sliderFrame {position:relative;width:700px;margin: 0 auto 40px;}
          
   #slider {
       width:700px;height:306px;/* Make it the same size as your images */
    background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSktbaNKYELdeFqZ9RIHIlDuqbPdcMWBEailq1b6MyVqCE4863NZ1d3m9Ao0AAoWHdr3tbV83S0_lSFEEFhd6NhN-Ymh-SNr_DTxeTXg0U5CD5dRTgAC0KrMcCogkT9bEbbedlF_7kKY11/s1600/loading.gif) no-repeat 50% 50%;
    position:relative;
    margin:0 auto;/*make the image slider center-aligned */
       box-shadow: 0px 1px 5px #999999;
   }
   #slider img {
    position:absolute;
    border:none;
    display:none;
   }
   
   /* the link style (if an image is wrapped in a link) */
   #slider a.imgLink {
    z-index:2;
    display:none;position:absolute;
    top:0px;left:0px;border:0;padding:0;margin:0;
    width:100%;height:100%;
   }
   
   /* Caption styles */
   div.mc-caption-bg, div.mc-caption-bg2 {
    position:absolute;
    width:100%;
    height:auto;
    padding:0;
    left:0px;
    bottom:15px;
    z-index:3;
    overflow:hidden;
    font-size: 0;
   }
   div.mc-caption-bg {
    background-color:black;
   }
   div.mc-caption {
    font: bold 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;
   }
   
   
   /* ------ built-in navigation bullets wrapper ------*/
   div.navBulletsWrapper  {
    top:320px; left:280px; /* Its position is relative to the #slider */
    width:150px;
    background:none;
    padding-left:20px;
    position:relative;
    z-index:5;
    cursor:pointer;
   }
   
   /* each bullet */
   div.navBulletsWrapper div
   {
       width:11px; height:11px;
       background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNS-OQfs6mJv2D8fSKVQfsW8zj16PmsXYq11lV8_mJ-F7hqIsay5RpPfgBiYsR5D7nAh6XuC_kJdNypLLGW0esloXuViQytGQ4nCkpKpHpuvVfrDSdeCMCFE_iFQiThmh6jhbPmJ9Qm-l7/s1600/bullet.png) no-repeat 0 0;
       float:left;overflow:hidden;vertical-align:middle;cursor:pointer;
       margin-right:11px;/* distance between each bullet*/
       _position:relative;/*IE6 hack*/
   }
   div.navBulletsWrapper div.active {background-position:0 -11px;}
   .intro {
       bottom: 0;
       color: rgba(0, 0, 0, 0.2);
       font-size: 16px;
       position: absolute;
       right: 0;
       text-decoration: none;
       z-index: 99999;
   }
   /* --------- Others ------- */
   #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://project.dimpost.com/image-slider/js-image-slider-1.js" type="text/javascript"></script>
   <script src="http://project.dimpost.com/image-slider/js-image-slider-2.js" type="text/javascript"></script>
   
   <div id="sliderFrame">
   <div id="slider">
   <a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFGgwDbPOeX565eN7ZooP5sJ4ZVQVhsPbxz2qwHhcELwwvb1QYuQaFL_luopOmX8J0HsL0Ckh5-pvjhpdtjbwf2_0bR0HhkqrltPZbZGdAiyaAbQDtH-Tpd3zvZmgIlmzr7lSuCrzBSaXV/s1600/image-slider-1.jpg" alt="#htmlcaption1" /></a>
   <a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIHIZDPPRgMfFPXSdvYNF0_wWCAjnvbaiPV7GjoLhrUrdh-gSZSKMQ46S4gc_qgZVOmdp11ccBCg3C9MU2ozW3IrOR9b1-722yog9bFk20groqr6GfmJ2r1bDMJXExJlsRIhSrRRVfE05w/s1600/image-slider-2.jpg" alt="Go UP!" /></a>
   <a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1GFZALROM2BC93P4FoySZ91J0yZts50lvodTzLKY9q1b-EP5vJHXBnSvaAkcnf8rsc6F5rkVLxwv2OVdJ1OEuhJ7Dmcmf40h2cEDLWzDNBeYxyv57WLwX8ByxueeMCUZ7YfJG69SerHhd/s1600/image-slider-3.jpg" alt="Pure Javascript. No jQuery. No flash." /></a>
   <a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglFGHC3m_cNZN7u318XXS8OEsDyVcKMkt9m6uHA_jXQ-26624vZEAslM9u-UK7eZi1fjQLEdSlNgkUDAcx7vojRylkuQIg_l3YdnRHVutU8t0w4iV8knHAOIKS9SCRq8uPUVN9xjsyOzlZ/s1600/image-slider-4.jpg" alt="#htmlcaption2" /></a>
   <a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiY-MD5oNwHUNWxGBq1Q4dMN59WW2d513iuXXMGKWW-zSfr4UlOr9XiDCtiFVC-q3B0n070T-43DSyv-NtYx3dwsKKNO39tiGfWlYd_pTjQekiFtEe9wDAgX8GMA08lsuTaKmWJWIh7jsmk/s1600/image-slider-5.jpg" alt="Stay Connected"/></a>
   </div>
   <div id="htmlcaption1" style="display: none;">
   Image Slider by <a href="http://dimpost.com/" target="_blank">DIMPost.com</a>
   </div>
   <div id="htmlcaption2" style="display: none;">
   <a href="http://www.w3schools.com/css/" target="_blank">CSS</a> <a href="http://www.w3schools.com/js/default.asp" target="_blank">JavaScript</a> Rocks.
   </div>
   </div>

4. Save