Berbeda dengan slider yang memanfaatkan Jquery seperti yang sudah diulas oleh o-om.com, pada slider kali ini sifat bahkan bentuknya lebih simple sehingga bisa diletakkan sebagai widget di sidebar. EasySlider1.5 jQuery memanfaatkan script dari CSS Globe yang pada awalnya tidak memiliki auto scroll. Untungnya Choen telah melakukan reparasi ulang dan menambahkan fasilitas auto scroll dengan meminjam scrip dari CMSlounge sehingga dengan sedikit penyesuaian, EasySlider1.5 jQuery bisa dimanfaatkan oleh member blogspot.

Instalasi Pada Template
Masuk ke Edit HTML. Lakukan backup dan masukkan Easy Jquery berikut sebelum </head>

    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
    <!-- JS easySlider -->
    <script src='http://choenblogspot.googlecode.com/files/easySlider1.5.js' type='text/javascript'/>

    <script type='text/javascript'>
    $(document).ready(function(){
    $(&quot;#slider&quot;).easySlider({
    auto: true,
    continuous: true
    });
    });
    </script>
    <!-- End JS easySlider -->



Cari ]]></b:skin> dan letakkan CSS berikut diatas ]]></b:skin>

    /* CSS easySlider */

    #containerSlider {
    width:210px;
    height:110px;
    margin:0 40px;
    padding:0;
    position:relative;
    }
    #prevBtn, #nextBtn {
    display:block;
    margin:0;
    overflow:hidden;
    padding:0;
    text-indent:-8000px;
    }
    #slider ul, #slider li {
    list-style:none;
    margin:0;
    padding:0;
    text-indent:0;
    }
    #slider, #slider li {
    overflow:hidden;
    width:210px;
    height:110px;
    margin:0 auto;
    }
    #slider {
    margin-left:0;
    background:#ccc;
    border:1px solid #999;
    }
    #prevBtn, #nextBtn {
    display:block;
    height:34px;
    left:-20px;
    position:absolute;
    top:38px;
    width:31px;
    }
    #nextBtn {
    left:200px;
    }
    #prevBtn a, #nextBtn a {
    background:transparent url(http://lh3.ggpht.com/_dfnTVAxeWMI/SsiVVC6KWDI/AAAAAAAACbI/PPeBfsVUs30/s800/prev.gif) no-repeat scroll 0 0;
    display:block;
    height:34px;
    width:31px;
    }
    #nextBtn a {
    background:transparent url(http://lh3.ggpht.com/_dfnTVAxeWMI/SsiVVAwivSI/AAAAAAAACbM/rWvFhU-sWa0/s800/next.gif) no-repeat scroll 0 0;
    }
    #slider img {
    background:#ccc;
    padding:5px;
    width:200px;
    height:100px;
    }



Sample menggunakan ukuran 200x100px. Untuk ukuran bisa anda ganti sesuka hati dengan mengubah size width dan height. Kalau sudah selesai jangan lupa disimpan.

Instalasi Pada Elemen Halaman

Masuk ke Elemen Halaman->Tambah gadget->HTML/Javascript, dan pastekan kode berikut:

    <div id="containerSlider">
    <!-- START CONTENT SLIDER -->
    <div id="contentSlider">
    <!-- START SLIDER -->
    <div id="slider">
    <ul>
    <li><a href="http://deconstructioncode.blogspot.com/2009/09/blogger-template-grid-system.html"><img alt="free blogger template grid system" src="http://lh5.ggpht.com/_dfnTVAxeWMI/SsAW5zoNvgI/AAAAAAAACZE/8mj28hj3Zh4/960gridblogger.gif"/></a></li>
    <li><a href="http://deconstructioncode.blogspot.com/2009/08/nge-grunge-dengan-sifr-20-free-blogger.html"><img alt="free blogger template sifr2.0 grunge" src="http://lh3.ggpht.com/_dfnTVAxeWMI/SohU0LuKBBI/AAAAAAAAB00/WQuzkblfkXc/grungesifr3.jpg"/></a></li>
    <li><a href="http://deconstructioncode.blogspot.com/2009/05/free-blogger-templates-dengan-sentuhan.html"><img alt="jquery blogger template" src="http://lh3.ggpht.com/_dfnTVAxeWMI/SkAJydDNFaI/AAAAAAAABFI/4yjcqePU3JI/jquery-blogger1.gif"/></a></li>
    <li><a href="http://deconstructioncode.blogspot.com/2009/06/free-blogger-templates-dengan-sentuhan.html"><img alt="jquery blogger template" src="http://lh5.ggpht.com/_dfnTVAxeWMI/SkAJyWnnF9I/AAAAAAAABFM/zRspioeFe_I/jquery-blogger2.gif"/></a></li>
    <li><a href="http://deconstructioncode.blogspot.com/2009/07/free-blogger-template-cufon-sifr.html"><img alt="jquery blogger template" src="http://lh3.ggpht.com/_dfnTVAxeWMI/SlFl54V6-zI/AAAAAAAABWg/Az4thdpf2lQ/Typo-Cufon2.jpg"/></a></li>
    <li><a href="http://deconstructioncode.blogspot.com/2009/07/ini-minimal-kah-free-blogger-template.html"><img alt="Ini minimaliskah" src="http://lh4.ggpht.com/_dfnTVAxeWMI/Sm06ecjVfUI/AAAAAAAABqs/agXqPs4SfyA/minimalkahtemp.gif"/></a></li>
    <li><a href="http://deconstructioncode.blogspot.com/2009/07/bukan-template-coklat.html"><img alt="bukan template coklat" src="http://lh5.ggpht.com/_dfnTVAxeWMI/SnKJT_g3pHI/AAAAAAAABtI/U2saMvjILl8/template-coklat.gif"/></a></li>
    </ul>
    </div>
    <!-- END SLIDER -->
    </div>
    <!-- END CONTENT SLIDER -->
    </div>
    <!-- END CONTAINER SLIDER -->


Selesai...silahkan anda lihat previewnya

Catatan:

Untuk mengganti image pada slider, perhatikan kode berikut:
<li><a href="http://deconstructioncode.blogspot.com/2009/09/blogger-template-grid-system.html"><img alt="free blogger template grid system" src="http://lh5.ggpht.com/_dfnTVAxeWMI/SsAW5zoNvgI/AAAAAAAACZE/8mj28hj3Zh4/960gridblogger.gif"/></a></li>

Silahkan ganti->
Merah : URL target
Hijau : Adalah text yang akan muncul jika image tidak diload oleh browser
Biru : URL Image

( sumber : http://berbagi-blog.blogspot.com )