Blog Tutorial

Tutorial Blog, Cheat Games, Tutorial Ponsel, Tutorial Komputer, Tutorial Browser

Jumat, 01 Oktober 2010

Penerapan Image Slider Carousels

pada
Kategori : ,
Penggunaan image slider atau pun slide show pada blog atau template tidak bisa dikatakan hal yang tidak penting apalagi pada blog atau wen yang bertemakan Gallery. Namun disamping itu penggunaan Image slide atau pun slider akan menambah berat blog, jadi gunakanlah Slider ini sepentingnya saja.
Pada kesempatan sebelumnya saya juga sudah membagikan tentang slide, diantaranya :
  1. Slide Show di Blogger
  2. Membuat slide Image dengan CSS3
  3. Slider Zinmag Primus
  4. Membuat Slideshow Thumbnail
  5. Membuat Featured Content Slider
Nah Mungkin itu list Slider atau slide yang ada di blog ini, dari masing - masing slide/slider di atas, bentuk atau jenisnya berbeda-beda, untuk melihat lebih jelasnya silahkan sobat klik satu persatu. Oiya saya baru punya slide/slide baru lagi nih namanya Image Slider Carousels. Coba kita terapkan di template sobat yuk!
  1. Login ke Blogger dengan Id Sobat
  2. Masuk Ke Rancangan >> Edit HTML
  3. masukan kode di bawah ini tepat di atas kode </head>


    <script src='http://btemplatescripts.googlecode.com/files/slider.js' type='text/javascript'/>
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js' type='text/javascript'/>

    <style type='text/css'>
    #mygallery{overflow: hidden;}
    </style>

    <script type='text/javascript'>
    stepcarousel.setup({
    galleryid: 'mygallery', //id of carousel DIV
    beltclass: 'belt', //class of inner "belt" DIV containing all the panel DIVs
    panelclass: 'panel', //class of panel DIVs each holding content
    panelbehavior: {speed:500, wraparound:true, persist:true},
    defaultbuttons: {enable: true, moveby: 3, leftnav: ['https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8SfTM8-YvREA6eAEHWY4gKw1frtnVoQ32H5_cxm-Er0aj0myhi7dNPrYK5si8aFVPdjJQcJ4R8gzdGfEaV8Xv77xXRT01BGx5Zdhth6B7lTNCuYAf5ModO_3az9QnPeKfCt2lUyMeAlI/s400/left.jpg', -48, 0], rightnav: ['https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEis9wmPbuKxNnHq99raRjOFUIVIBs2tVydZxmSFj_6RI1r0NyIU5_-nrjrJAfOt0fAIakQ8YEjVi6B9VlEMrjD_8BJQDmUuLwM2oKgaNqUYI5MSV1Ta-ZlAq3BVuutQtrpH6SkK1ZeCx9o/s400/right.jpg', 0, 0]},
    statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
    contenttype: ['external'] //content setting ['inline'] or ['external', 'path_to_external_file']
    })


    </script>



    Penjelasan :
    • http://btemplatescripts.googlecode.com/files/slider.js >> ini adalah alamat script dari penggunaan Image Slider Carousels, sobat dapat menggantinya

  4. Setelah itu cari kode ]]></b:skin> lalu taruh kode di bawah ini tepat di atasnya


    #myslides{

    background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxR3iAXvtVAcMUKL_FDin63moOs-uOLYH4oGgErl-OAz130xK4-AZgXzZaNLHN9UQ_Km3iShzxnGuKNA7qlGRU5nsJqd08jyPmthsr0P8QoPms0AdOaEupTB7044453b8vy3YcXgeijA/s1600/mslid.jpg) repeat-x;
    width: 650px;
    height:165px;
    margin-bottom:5px;
    }

    .stepcarousel{
    position: relative;
    overflow: scroll;
    width: 554px;
    height: 160px;
    margin: 0px 48px 5px 48px;

    }

    .stepcarousel .belt{
    position: absolute; /*leave this value alone*/
    left: 0;
    top: 0;
    }

    .stepcarousel .panel{
    float: left; /*leave this value alone*/
    overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
    margin: 20px 10px ; /*margin around each panel*/
    width:170px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
    background:#0e1829;
    height:120px;
    border:1px solid #1d2c44;

    }
    .stepcarousel .panel p{
    text-align: left; /*leave this value alone*/
    overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
    margin: 5px 5px ; /*margin around each panel*/

    }

    .stepcarousel .panel h2{
    text-align: left; /*leave this value alone*/
    height:20px;
    overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
    margin: 2px 5px ; /*margin around each panel*/
    font-size:16px;
    font-weight:bold;
    text-align:center;
    font-family:Georgia,century gothic,Arial,verdana, sans-serif;
    }

    .stepcarousel .panel img{
    float: left; /*leave this value alone*/
    background:#0E1829; /*clip content that go outside dimensions of holding panel DIV*/
    margin: 5px 5px 5px 5px; /*margin around each panel*/
    padding:0px 0px;
    }


    Catatan : Nilai dari CSS di atas dapat sobat rubah sesuai keinginan.

  5. Lalu Simpan Template dan mari kita menuju Elemen Halaman
  6. Setelah berada Elemen Halaman, Tambahkan sebuah Gadget, untuk letaknya bisa di mana saja tapi saya sarankan di bawah header atau di bawah footer (baca selengkapnya : Menambah Elemen Baru )
  7. Setelah itu Pilih yang HTML/Javascript dan masukan kode di bawah ini


    <div id="myslides">
    <div id="mygallery" class="stepcarousel">
    <div class="belt">

    <!-- 1st Template -->
    <div class="panel">
    <a href="http://www.anshuldudeja.com/2008/10/new-two-column-denim-template.html" target="blank" title="Two Column Denim Template"> <img width="160" alt="Two Column Denim Template" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZRvi5KRgJaNGJ4qjLuMmtMJgZFZ5Li_DdBCRsLhuyUO_tRulthg2d1g09CoOFLQDDj66Fle3_krVH8lYFU7UaQwAmuYppyS5MoPeAhjOUcd0AGRBG_CFxeuJ6XzeTZbGK0X4N7PmicLU/s400/newtwocolumndenimtemplate.jpg" height="110"/> </a>
    </div>
    <!-- end code of 1st -->

    <!-- 2nd Template -->
    <div class="panel">
    <a href="http://www.anshuldudeja.com/2008/10/new-two-column-denim-template.html" target="blank" title="Two Column Denim Template"> <img width="160" alt="Two Column Denim Template" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZRvi5KRgJaNGJ4qjLuMmtMJgZFZ5Li_DdBCRsLhuyUO_tRulthg2d1g09CoOFLQDDj66Fle3_krVH8lYFU7UaQwAmuYppyS5MoPeAhjOUcd0AGRBG_CFxeuJ6XzeTZbGK0X4N7PmicLU/s400/newtwocolumndenimtemplate.jpg" height="110"/> </a>
    </div>
    <!-- end code of 2nd -->

    <!-- 3rd Template -->
    <div class="panel">
    <a href="http://www.anshuldudeja.com/2008/10/new-two-column-denim-template.html" target="blank" title="Two Column Denim Template"> <img width="160" alt="Two Column Denim Template" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZRvi5KRgJaNGJ4qjLuMmtMJgZFZ5Li_DdBCRsLhuyUO_tRulthg2d1g09CoOFLQDDj66Fle3_krVH8lYFU7UaQwAmuYppyS5MoPeAhjOUcd0AGRBG_CFxeuJ6XzeTZbGK0X4N7PmicLU/s400/newtwocolumndenimtemplate.jpg" height="110"/> </a>
    </div>
    <!-- end code of 3rd -->

    <!-- 4th Template -->
    <div class="panel">
    <a href="http://www.anshuldudeja.com/2008/10/new-two-column-denim-template.html" target="blank" title="Two Column Denim Template"> <img width="160" alt="Two Column Denim Template" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZRvi5KRgJaNGJ4qjLuMmtMJgZFZ5Li_DdBCRsLhuyUO_tRulthg2d1g09CoOFLQDDj66Fle3_krVH8lYFU7UaQwAmuYppyS5MoPeAhjOUcd0AGRBG_CFxeuJ6XzeTZbGK0X4N7PmicLU/s400/newtwocolumndenimtemplate.jpg" height="110"/> </a>
    </div>
    <!-- end code of 4th -->

    <!-- 5th Template -->
    <div class="panel">
    <a href="http://www.anshuldudeja.com/2008/10/new-two-column-denim-template.html" target="blank" title="Two Column Denim Template"> <img width="160" alt="Two Column Denim Template" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZRvi5KRgJaNGJ4qjLuMmtMJgZFZ5Li_DdBCRsLhuyUO_tRulthg2d1g09CoOFLQDDj66Fle3_krVH8lYFU7UaQwAmuYppyS5MoPeAhjOUcd0AGRBG_CFxeuJ6XzeTZbGK0X4N7PmicLU/s400/newtwocolumndenimtemplate.jpg" height="110"/> </a>
    </div>
    <!-- end code of 5th -->

    <!-- 6th Template -->
    <div class="panel">
    <a href="http://www.anshuldudeja.com/2008/10/new-two-column-denim-template.html" target="blank" title="Two Column Denim Template"> <img width="160" alt="Two Column Denim Template" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZRvi5KRgJaNGJ4qjLuMmtMJgZFZ5Li_DdBCRsLhuyUO_tRulthg2d1g09CoOFLQDDj66Fle3_krVH8lYFU7UaQwAmuYppyS5MoPeAhjOUcd0AGRBG_CFxeuJ6XzeTZbGK0X4N7PmicLU/s400/newtwocolumndenimtemplate.jpg" height="110"/> </a>
    </div>
    <!-- end code of 6th -->

    <!-- 7th Template -->
    <div class="panel">
    <a href="http://oketrik.blogspot.com/2010/07/okemagazine-blogger-template.html" target="blank" title="Okemagazine Blogger Template - oketrik"> <img width="160" alt="Okemagazine Blogger Template - oketrik" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPsxQ4M5z0S-r-kJb7BoBbftqiuQC0yT-b8HUktY19SJ7uiUkDflUMVAheWLBAeg34EJjvWUbPiVpmRjyGYShivhq7xEWLJyxAo_R-fIrTpMXZ-hiIfSkhKv-LnWtbcYWRwqpv1X8KWNs/s400/okemagazinetemplate-oketrik.blogspot.com+-+2010-07-17+-+23-42-48.png" height="110"/> </a>
    </div>
    <!-- end code of 7th -->

    <!-- 8th Template -->
    <div class="panel">
    <a href="http://www.anshuldudeja.com/2008/10/new-two-column-denim-template.html" target="blank" title="Two Column Denim Template"> <img width="160" alt="Two Column Denim Template" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZRvi5KRgJaNGJ4qjLuMmtMJgZFZ5Li_DdBCRsLhuyUO_tRulthg2d1g09CoOFLQDDj66Fle3_krVH8lYFU7UaQwAmuYppyS5MoPeAhjOUcd0AGRBG_CFxeuJ6XzeTZbGK0X4N7PmicLU/s400/newtwocolumndenimtemplate.jpg" height="110"/> </a>
    </div>
    <!-- end code of 8th -->


    </div></div></div>


    Penjelasan :
    • http://www.anshuldudeja.com/2008/10/new-two-column-denim-template.html >> Ini adalah alamat postingan yang sesuai dengan gambar yang di tampilkan, sobat dapat menggantinya dengan alamat postingan yang sesuai dengan gambar
    • https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZRvi5KRgJaNGJ4qjLuMmtMJgZFZ5Li_DdBCRsLhuyUO_tRulthg2d1g09CoOFLQDDj66Fle3_krVH8lYFU7UaQwAmuYppyS5MoPeAhjOUcd0AGRBG_CFxeuJ6XzeTZbGK0X4N7PmicLU/s400/newtwocolumndenimtemplate.jpg >> ini adalah alamat gambar, sobat dapat menggantinya.

  8. Setelah itu simpan dan lihat hasilnya deh
Penerapan Image Slider Carousels di blogger adalah salah satu tehnik untuk mempercantik blog dan membuat tampilan blog atau web semenarik mungkin agar pengunjung merasa nyaman dan betah di blog sobat. Namun Penerapan Image Slider Carousels di blogger ini juga mempunyai efek terhadapa berat atau kecepatan akses blog sobat. Jadi sekarang hanya sobatlah yang dapat memilih, untuk memasangnya atau tidak. Terima kasih dan Happy Blogging.

Thanks to : http://www.anshuldudeja.com/2009/06/images-slider-ie-carousels-for-blogger.html
Bagikan Artikel : Facebook Twitter Google+ Linkedin Technorati Digg

4 Komentar untuk Penerapan Image Slider Carousels

avatar
Balas
Unknown delete Oktober 01, 2010

salam sahabat
mas untuk penempatan image dan alamat url buat sliders ini manual apa otomatis kok bingung saya terus pada sliders ini muncul berapa slide tampilan mas ??maaf pemula gak tahu xixixixi

avatar
Balas
Unknown delete Oktober 01, 2010

@Dhana/戴安娜 >> untuk penempatan image dan alamat urlnya manual mba Dhana, tampilan slidenya ada 8, klo untuk tampilan slidenya bisa di atur tidak harus 8 slide, lebih atau kurang pun bisa ^_^

wah mba Dhana bisa aja nich merendahnya....

avatar
Balas
Haqir faqir delete November 02, 2010

Ok ni, boleh suatu saat dcoba tapi bikin brat load pageny ga y??

avatar
Balas
Bahana band delete November 29, 2010

salam kenal bos mampir2 yah ke blog saya http://www.bahanaband.co.cc

Langganan: Posting Komentar (Atom)