Cara Membuat Slide Show Slider Image Keren Di Blog

Dalam Posting ini kita akan membahas tentang membuat tampilan Slide image yang bergerak secara horizontal bergerak ke kiri dan ke kanan secara bergantian dengan menggunakan tag html saja. 

Pada pertemuan kali ini saya akan berbagi Slder Image dengan dengan tampilan yang sangat keren. dengan dropdown lain dari pada yang lain. kamu juga dapat melihat sendiri hasilnya setelah didowload atau lihat sendiri pada link Demo.juga dapat didowload pada link download. berikut ini saya jelaskan tag html dan cssnya :

Baiklah berikut ini tag html yang dapat membangun Slide Image nya :

Caranya tinggal vaste kan saja kode di bawah ini pada situs kita tepat nya di TATA LETAK

Klik tambahkan widget lalu pilih HTML/Java scrift lalu vaste. lihat hasilnya..

<style type="text/css">
.GRboximg{
       position:relative;
       width:300px;
       float:left;
       height:225px;
       margin:5px 15px 5px 0;
       border:0 solid;
       background:#ddd;
       padding:10px;
       box-shadow:-1px -1px 2px #555, 4px 4px 4px #000;
       border:1px solid #999;
       border-radius:4px;
}
.GRboximg .gambar1,.GRboximg .gambar2,.GRboximg .gambar3,.GRboximg .gambar4,.GRboximg .gambar5,.GRboximg .gambar6,.GRboximg .gambar7{
       position:absolute;
       width:300px;
       height:225px;
       margin:0;
       border:2px solid #000;
       border-radius:6px;
       padding:0;
       right:8px;
       bottom:8px;
       transition:0.4s 0.3s;
       -o-transition:0.4s 0.3s;
       -moz-transition:0.4s 0.3s;
       -webkit-transition:0.4s 0.3s;
       -ms-transition:0.4s 0.3s;
       opacity:0.7;
       filter:alpha(opacity=70);
}
.GRboximg .gambar10{
       opacity:0.9;
       filter:alpha(opacity=90);
}
.GRboximg .gambar1:hover,.GRboximg .gambar2:hover,.GRboximg .gambar3:hover,.GRboximg .gambar4:hover,.GRboximg .gambar5:hover,.GRboximg .gambar6:hover,.GRboximg .gambar7:hover{
       z-index:5;
       box-shadow:0 0 10px #000;
       border:2px solid #eee;
       opacity:1.0;
       filter:alpha(opacity=100);
}
.GRboximg:hover .gambar2{
       transform:translate(50px,0px);
       -o-transform:translate(50px,0px);
       -moz-transform:translate(50px,0px);
       -webkit-transform:translate(50px,0px);
       -ms-transform:translate(50px,0px);
}
.GRboximg:hover .gambar3{
       transform:translate(100px,0px);
       -o-transform:translate(100px,0px);
       -moz-transform:translate(100px,0px);
       -webkit-transform:translate(100px,0px);
       -ms-transform:translate(100px,0px);
}
.GRboximg:hover .gambar4{
       transform:translate(150px,0px);
       -o-transform:translate(150px,0px);
       -moz-transform:translate(150px,0px);
       -webkit-transform:translate(150px,0px);
       -ms-transform:translate(150px,0px);
}
.GRboximg:hover .gambar5{
       transform:translate(200px,0px);
       -o-transform:translate(200px,0px);
       -moz-transform:translate(200px,0px);
       -webkit-transform:translate(200px,0px);
       -ms-transform:translate(200px,0px);
}
.GRboximg:hover .gambar6{
       transform:translate(250px,0px);
       -o-transform:translate(250px,0px);
       -moz-transform:translate(250px,0px);
       -webkit-transform:translate(250px,0px);
       -ms-transform:translate(250px,0px);
}
.GRboximg:hover .gambar7{
       transform:translate(300px,0px);
       -o-transform:translate(300px,0px);
       -moz-transform:translate(300px,0px);
       -webkit-transform:translate(300px,0px);
       -ms-transform:translate(300px,0px);
}
</style>

<div class="GRboximg">
        <a rel="GRlightbox[mygallery]" href="">
            <img class="gambar1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEig9NElRlxW9IcCNj7pLHO_HKYzPYWuic2tzxl3a9CHSGSqPaNDbU-Jsx0Ycdbqz7k6ri4gMqQqPtxXeG6BVFdRmAAERPcf8cOjbYZDFXEzNx70vOKmgT0AC6LsCVu_q1ZYFL5aa6AJzJqC/s320/ichigo_Scool.jpg" alt="Slider Image Keren"></img>
        </a>
  <a rel="GRlightbox[mygallery]" href="">
            <img class="gambar2" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4d5yiYdovwVQHpLUX2g_9bw9kvwf1accKDlBLi1jY0HZUlRGa64lZmBxWQWefHOhn80_SEvm5jNe6iadrIS5vsQznwvOpKeNnYtOJ7KHr0QNhmwFyeom71PwVkN8TJIP0a4b-9Jh04R84/s320/zangetsuunreleased.png" alt="Slider Image Keren"></img>
        </a>
        <a rel="GRlightbox[mygallery]" href="">
            <img class="gambar3" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinzJaQogeaxZjQyHuOOsZ9I8qiceblAQGZyrvFBodSWt2Xh_dIGwYjCX3264aE_f9kteDVfPKP4dhkZGtZ8XkWWBt0nK5FWyBoXndF1AS-xrBvC6lEY0Msjl6tIK0uRHuSP7e-CdOXYxp9/s320/ichigo_shikai.jpg" alt="Slider Image Keren"></img>
        </a>
        <a rel="GRlightbox[mygallery]" href="">
            <img class="gambar4" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjz06KC3QdCSO3fD8ye5uIcaNhtCgIr000n-IU_ldEihsLcqHsnlD7seEL5odQ2mmuLrH16IcEc3MIXeUzeSGG1YrqEJ-qm0Jc7cDgpt4J6qS7aad9FWcsHliULd2HdQXURjECsCgrOFZtd/s320/Ichigo_Kurosaki_Bankai___color_by_XxDark_ValentinexX.jpg" alt="Slider Image Keren"></img>
        </a>
        <a rel="GRlightbox[mygallery]" href="">
            <img class="gambar5" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh12h9r8E2hPmf4jpJo6NJZsE7Z8XkYRxKKnLc0lUPsV_IR6zTp-VCaN4B8F2fLLvCDY_ZvzCa0lVb0u6OuXq9uT_dtbsTZ7vTw3_cuxZk86hx4faT1uYmsddb5-xOIvV9LQQUGMMasSCQ3/s320/Ichigo_Bankai_Vizard_-_Fan_Art.jpg" alt="Slider Image Keren"></img>
        </a>
        <a rel="GRlightbox[mygallery]" href="">
            <img class="gambar6" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0nHQvaOfd7clfUjMW6EUitFfO4MYd2YVMMUZv_fQ4bb6NlM8xzY2GvkV6x7QAfvZCoVitMBdrhHppSic4Fzsqo8PIpHHaRLjpfd8Y7YMMSA_-rJ3CVciuqakUx78T1K-4Ki4L_5AkJRGo/s320/ichigo_full_hollow_form_by_mortent230-d3dhaoj.jpg" alt="Slider Image Keren"></img>
        </a>
        <a rel="GRlightbox[mygallery]" href="">
            <img class="gambar7" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg14bmIdU4A106B_NlkJdMKVmI_XuuKZxsTt3SJvYbeFLmXZJd0rDDzjU32fM5PuUw26auVn45QEQ7cbcrnFe427rswjH_4wosTgGOss7cl9DfR2a3FyGJeHsa3ywy36VDRfG68da8ED4wz/s320/__hope_____mugetsu_by_kirapl-d4lio6x.png" alt="Slider Image Keren"></img>
        </a>
       
    </div>

Adapun File nya dapat dilihat hasilnya  dan dapat juga diunduh berikut di bawah ini :

Demo                                  Unduh