Cara Membuat Slider Image Berputar Seperti Gasing Keren Di Blog

Dalam Posting ini - Cara Membuat Slider Image Berputar Seperti Gasing Keren Di Blog kita akan membahas tentang membuat tampilan Slide image yang bergerak Memutar Layaknya seperti Gasing dan tampilan gambarnya bisa di perbesar dan di perkecil bagaimana selera kita cuma dengan menggunakan tag Css html dan javascrift. 

Dan Juga tampilan gambar nya tersebut bisa berputar jika saat disentuh oleh mouse kita dan akan tampil lebih fokus jika mouse berhenti pada salah satu gambar dari slider tersebut. untuk lebih jelasnya dapat kita lihat sendiri pada berikut ini

untuk dapat membangun slidernya kita membutuhkan tag css, html, dan Javascript. Agar tampilan blog kita semakin keren dan unik tujuannya supaya pengunjung akan betah berada di blog kita.. 

penasaran bagai mana bentuknya.. ? mari kita langsung saja menuju TKP. 

Caranya tinggal salin dan vaste kan saja kode di bawah ini pada situs kita tepat nya di Settingan Tema > pilih Edit HTML > terus Tekan CTRL+F > setelah itu cari Kode ini </b:skin> Lalu Vastekan Kode di bawah ini Tepat di Atas Nya.

Di Css

<style type="text/css">
.GRboximg{
       position:relative;
       width:300px;
       float:left; /* original code by: http://gubhugreyot.blogspot.com */
       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,.GRboximg .gambar8,.GRboximg .gambar9,.GRboximg .gambar10{
       position:absolute;
       width:300px;
       height:225px;
       margin:0;
       border:2px solid #000;
       border-radius:6px;
       padding:0; /* original code by: http://gubhugreyot.blogdetik.com */
       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,.GRboximg .gambar8:hover,.GRboximg .gambar9:hover,.GRboximg .gambar10:hover{
       z-index:5;
       box-shadow:0 0 10px #000;
       border:2px solid #eee;
       opacity:1.0; /* original code by: http://lightbox-demo-tutorial.blogspot.com */
       filter:alpha(opacity=100);
}
.GRboximg:hover .gambar2{
       transform:translate(30px,0px);
       -o-transform:translate(30px,0px);
       -moz-transform:translate(30px,0px);
       -webkit-transform:translate(30px,0px);
       -ms-transform:translate(30px,0px);
}
.GRboximg:hover .gambar3{
       transform:translate(60px,0px);
       -o-transform:translate(60px,0px);
       -moz-transform:translate(60px,0px);
       -webkit-transform:translate(60px,0px);
       -ms-transform:translate(60px,0px);
}
.GRboximg:hover .gambar4{
       transform:translate(90px,0px);
       -o-transform:translate(90px,0px);
       -moz-transform:translate(90px,0px);
       -webkit-transform:translate(90px,0px);
       -ms-transform:translate(90px,0px);
}
.GRboximg:hover .gambar5{
       transform:translate(120px,0px);
       -o-transform:translate(120px,0px);
       -moz-transform:translate(120px,0px);
       -webkit-transform:translate(120px,0px);
       -ms-transform:translate(120px,0px);
}
.GRboximg:hover .gambar6{
       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 .gambar7{
       transform:translate(180px,0px);
       -o-transform:translate(180px,0px);
       -moz-transform:translate(180px,0px);
       -webkit-transform:translate(180px,0px);
       -ms-transform:translate(180px,0px);
}
.GRboximg:hover .gambar8{
       transform:translate(210px,0px);
       -o-transform:translate(210px,0px);
       -moz-transform:translate(210px,0px);
       -webkit-transform:translate(210px,0px);
       -ms-transform:translate(210px,0px);
}
.GRboximg:hover .gambar9{
       transform:translate(240px,0px) rotate(720deg);
       -o-transform:translate(240px,0px) rotate(720deg);
       -moz-transform:translate(240px,0px) rotate(720deg);
       -webkit-transform:translate(240px,0px) rotate(720deg);
       -ms-transform:translate(240px,0px) rotate(720deg);
}
.GRboximg:hover .gambar10{
       transform:translate(270px,0) rotate(360deg);
       -o-transform:translate(270px,0) rotate(360deg);
       -moz-transform:translate(270px,0) rotate(360deg);
       -webkit-transform:rotate(270px,0) translate(-42px,-262px);
       -ms-transform:translate(270px,0) rotate(360deg);
}</style>

Dan 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..

 <div class="GRboximg">
        <a rel="GRlightbox[mygallery]" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9zVadbTeC1AAI921XbXD2ZyUtlcQS476F4SyrNzWlfoHBebYx5cPGs3_3dIbT04lp_wNGPXmZz9OUL3CyyzxY3ozF-MAvdfI8qtzNbYju9qXL76d828a2xp8eA8AVYLOSv4EpU1ppOVQ/s1600/img_gubhugreyot-tiger-02.jpg" title="Slider Image Memutar">
            <img class="gambar1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhViXbiPJahSt0QrPGspoFsWDO3hjinwcbz07QytcPyM5RTi8G9Z_Ya515jn7NnSlYIj8HZTkc8-ZZ8qKzxnoygSbQ3Sja0JnCfMyBmSumeKGdl7SBj0BZzKp0oMO4YjsHM_fGTkyTcU9I/s320/th_gubhugreyot-tiger-02.jpg" alt="Slider Image Memutar"></img>
        </a>
        <a rel="GRlightbox[mygallery]" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg50JlJ5c2mUEvn0gsdZQQLWieJrrc7nKyUuQZUyoQ_u9c-OsqndHiEevZInMy3kziMrXUMSixgrgSZSlW53-R6U8lIhQyaypnjqVNjFndbr2Lx8E5NZdvb_E8v87B4l2Q_sQgbve-tZvg/s1600/img_gubhugreyot-house2.jpg" title="Slider Image Memutar">
            <img class="gambar2" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuTnFm_mGDA2qRDtugdBepRajDn2Ypy0HNoaKDox5YQCzYCweC4WuS-aIuXVmHEWOjgPjKbJ47IUGLYqaLkUm8GBorS9wj1MCb44I3ZhkuzDSFbNUtRvcEO-cPDz62Nxscaiu1g3JGAI4/s320/th_gubhugreyot-house2.jpg" alt="Slider Image Memutar"></img>
        </a>
        <a rel="GRlightbox[mygallery]" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAOFGekpRT2yZeLTGRtuCjI6waRHH6g96hM4vnBnOvYmlb_VnAfpqtH7V5I00iVUBOkVfQ0hPait0eMY8mqNw1hk7HUnVIQ-6PvPDO3Q8lHm9acu1JZOxIbfkFx6qKa35nym4yngZb4z0/s1600/img_gubhugreyot-kuda-laut.jpg" title="Slider Image Memutar">
            <img class="gambar3" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7srxENLGoG6tKWTec8oF6ECulGEYngeRwg8bHCSQIr7WeIoiTB_-qje_51I4dhpwi_iMJTQ-6yhEsVqTNDdulwTK_FmTWiKr5GIr66gLQQ2C9wogMyiDNRrleHr7vXa020w0erNj4Cq4/s320/th_gubhugreyot-kuda-laut.jpg" alt="Slider Image Memutar"></img>
        </a>
        <a rel="GRlightbox[mygallery]" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCIOnNSzBTAvHvHTvcMIbcAE13xDLH3mqngDeo49dOXL12PA77iAGcsQH6-xdsfR0s4hfZZbvS2JtL-6JxhdyMK6C-XA5gUc93Ydsug99yy7QnxI3mepPM10cabTNDARiTPAVV3BkgtGw/s1600/img_gubhugreyot-macan-ciblon.jpg" title="Slider Image Memutar">
            <img class="gambar4" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijgcVslGKnF-yOqOGh-bUuptwFoojhymXWxe-uZ2w6PxZnKVxo5ZdQ6YASKyRXO2Q1PbHBMjcK8kSbF3xbnPGXRq2MAwCsIYUbIjMbw97wyxKLKwbMCR2CYQwsZu9ByExF1hGUuQxXKFQ/s320/th_gubhugreyot-macan-ciblon.jpg" alt="Slider Image Memutar"></img>
        </a>
        <a rel="GRlightbox[mygallery]" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6lBZDICXvTwwQdI0mVI_SDq2lnJinmRpIIKkoAHBQNFWr_5eZu2aID1K3PnOtpU8YRVD6UhukmNLQhQi8tkoTFsrXDWKSVejPhiyzRiJNxG3Q9On2iEdE3t8PssxRHwsj5vJ_lM7mtUc/s1600/img_gubhugreyot-modern-house.jpg" title="Slider Image Memutar">
            <img class="gambar5" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhq2zV0AWEew3xXG9XegrnNjY-Ix-9sxMyKHvvgPz548G5zDsvylOItJu731umUHlIhSLBY9wMbsX4V3n-rGIhzSNmP8o_JRZudkVqF1P3WItQVYcZQSG7mzPfEZf4OxIH0EB4GLlNA8P0/s320/th_gubhugreyot-modern-house.jpg" alt="Slider Image Memutar"></img>
        </a>
        <a rel="GRlightbox[mygallery]" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXmdPbcMZ7jafiNd9dWV-TigJmTLfzI8ZpeE0IE0GW7a1SCsmyap_IOO9tO_buLlV7L7zpCe0OJmdtju-vPCbtC5SqMP5Ibi-8HQOCH_ZcTLHp11kZDAFQG3vNtS5Y7Bn_js_Xkaffr28/s1600/img_gubhugreyot-crazy-house.jpg" title="Slider Image Memutar">
            <img class="gambar6" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1ppwTR3OGUnZMO-jKN55SBNPA5ta8q1lhtbuFfLAMkPA0b2SBIrQeAu0dyTLJGMTevCOwQOc4PjLCfbzdlIg5-_NtGnypH6FXDrDV8GMrK-VV_IjYvR6_5zIq4aVEn0m7l2Z_0ML7mbo/s320/th_gubhugreyot-crazy-house.jpg" alt="Slider Image Memutar"></img>
        </a>
        <a rel="GRlightbox[mygallery]" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTunR4QYQgXXTm5l2BBpJfPfx3Q7iachhICAhd6ngo0NC2naRbloZBKtg9gdvM4KyBymW8gQ80pKZTAMHuwr5BqvjjeDZ27LKfIsJQkBelgE1Lzc8wwX-qRnBlVIpE2Hn5TkjGuozbM8o/s1600/img_gubhugreyot-rajawali.jpg" title="Slider Image Memutar">
            <img class="gambar7" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhs_YbHCQ5deYyOhJuzKQVK5JWtKpV4ZYBLtZ42SHmgn96FtkwFq3BHuJk2iPA9J9snnaT9eTraHK2RDwOq0Oo1woFqlCYdZN91jJ2HmPqpkNzmbAUu2lJG0u8WiIPR8KA8eYJZUcHNi3w/s320/th_gubhugreyot-rajawali.jpg" alt="Slider Image Memutar"></img>
        </a>
        <a rel="GRlightbox[mygallery]" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEGKuzEFpr5GLh7mI6D-qwbE9cw8hl6fLUvUgmPfRS1rxnNjU0fXGui2umX-GWWvuDruJoqP3BNFwvV7UHQ_fKdT-dmi80tOGJj4_qLTRC9KaH6_-A4U_rv6pd6_dbbeMXiBSmaa4Nuzg/s1600/img_gubhugreyot-cleopatra.jpg" title="Slider Image Memutar">
            <img class="gambar8" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiM07_LcWZlE-FURe1Xz4xbLnhuVzBtURJbpwKxkLjqrlNwfNCstke4AoKopN3lWWWBiAlVCRJC0av4we0CjnVs4hqp-5yRKS8cRGSpId8ASSyaUC3c4mkYFIOSBAJ1PcIVht7IiFE_l2c/s320/th_gubhugreyot-cleopatra.jpg" alt="Slider Image Memutar"></img>
        </a>
        <a rel="GRlightbox[mygallery]" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrboeIflQ3sGljNeDQI8i7amkBahDbhr8lup9hGs3ygS0k8vvL7ErvBiUIQBSaw722LwnTtzhDCfOfsMVK2FnW1k1JPiRZ4UK9BhadwYz_IHH7S_RS-O6p546XUbFiknj0-nJujJqEEmo/s1600/img_gubhugreyot-clock.jpg" title="Slider Image Memutar">
            <img class="gambar9" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDzglcqBnWvqkBJfKtcFwfhvKJ3X-XGKtf_6q4mhafECVnRbdvPzes-YObSJuFU5yo0VGpzLlHD-en69alCGjhe549NkkkgzjjvYAyMdALAATbvpUjy3aqylteitDmGOjB5r0H2ENEtLM/s320/th_gubhugreyot-clock.jpg" alt="Slider Image Memutar"></img>
        </a>
        <a rel="GRlightbox[mygallery]" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh50Ejw9I4-IYhIvTVVq3GXJ6VAx3Q3UGqREmJ8gt0P0fUBgwXGWbDw-OgrAsUSya4yTXNKmyHKmpPfdXRqFEyRULOSnMHQuxkkSlTTh8v9TgqFkaTVyejsNWaMBXYs33fnn9WGG8scUnc/s1600/img_gubhugreyot_gadisku-06.jpg" title="Slider Image Memutar">
            <img class="gambar10" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWdNn2MpXUIrKCT-PXkEif2zJS0cF2xQgmRlAm1mW3hgiwRW9EWuTWvZuOQNfVzBwS6Q94E5njFZWPNZMY-3XGHHXziQXeipRe_ZI7WQPxzBJWvf6k6NTu8CYBJ9MFEVoD6Ytcw3ZKp_s/s240/bg-slideshow-css3.jpg" alt="Slider Image Memutar"></img>
        </a>
    </div>

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

Demo                                  Unduh