23.6.14
8
Perpindahan Slide Gambar Tanpa Lompatan - Gambar pada blog hakikatnya untuk menerangkan sebuah karya tulisan yang Anda ceritakan dalam sebuah artikel, setelah sekian lama tidak menyapa sahabat semua pecinta SAHABAT BLOGGER 77, dipertemuan kali ini saya ingin memberikan sedikit pembahasan tentang cara mendesain Perpindahan Slide Gambar Tanpa Lompatan. Tutorial kali ini, merupakan hasil pembaharuan dari artikel saya sebelumnya tentang Efek According Pada Gambar Dengan Perintah Hover, yang mana untuk perpindahan gambar saya menggunakan perintah hover, cukup Anda lintasi gambar dengan panah mouse Anda, maka gambar akan berpindah dari gambar satu dan seterusnya.

Untuk slide gambar kali ini, saya akan coba menjawab request mas +Ibrahim M.Pd.I  yang ingin dibuatkan tutorial tentang cara mengubah perpindahan slide gambar dengan perintah KLIK, sehingga untuk melihat gambar berikutnya saya menggunakan perintah pointer mouse dengan sistem klik, karena beliau ingin tampilannya seperti slider efek, saya menggabungkan tombol pemicu untuk pengaturan perpindahan gambar yang saya letakkan tepat dibawah tampilan gambar seperti ini:


Image Slide Effect


Baca juga - Membuat Profil Google Plus Di Sidebar Blog


Jika kita menumpuk banyak gambar, maka akan terjadi lompatan untuk melihat gambar berikutnya, katakanlah seperti pada Handphone misalnya, pada file gambar di komputer Anda, maka akan terjadi jumping slide untuk melihat gambar selanjutnya saat Anda menekan tombol next. Agar hal itu tidak terjadi, disini saya menggunakan CSS transisi dengan efek berputar, sehingga saat gambar akan berpindah efeknya akan terasa halus (tanpa lompatan) seperti ini:




DEMO SHOW




Untuk membuatnya, pertama-tama kita rangkai dahulu pembangun selector CSS-nya seperti berikut, lalu temukan kode ]></b:skin> pada Template Anda, back-up template Anda terlebih dahulu untuk menghindari kesalahan, selanjutnya letakkan CSS berikut tepat diatasnya


//* no jumping image slide with css3
css design: inputcode="slider-sb77","sahabat blogger 77"
sumber: http://sahabatblogger77.blogspot.com/
author: devy indriyani
*//
#sb77-slider {
  margin:30px auto;padding:0px 0px;
  width:448px;height:286px;
  position:relative;}

#sb77-slider li {
  list-style:none;
  margin:0px 0px;
  padding:0px 0px;}

#sb77-slider li input + label {
  position:absolute;bottom:5px;
  left:10px;z-index:999;
  font:bold 11px/16px Arial,Sans-Serif;
  background-color:black;
  color:white;padding:0px 0px;
  width:16px;text-align:center;
  cursor:pointer;}

//peletakan gambar dengan durasi tampil
#sb77-slider li:nth-child(2) label {left:28px;}
#sb77-slider li:nth-child(3) label {left:46px;}
#sb77-slider li:nth-child(4) label {left:64px;}
#sb77-slider li:nth-child(5) label {left:82px;}

#sb77-slider li img {
  border:none;outline:none;
  position:absolute;
  top:50%;left:50%;width:0px;
  height:0px;visibility:hidden;
  opacity:0;
  -webkit-transition:all 2s ease-in-out;
  -moz-transition:all 2s ease-in-out;
  -ms-transition:all 2s ease-in-out;
  -o-transition:all 2s ease-in-out;
  transition:all 2s ease-in-out;
  -webkit-transform:rotate(0deg) scale(0);
  -moz-transform:rotate(0deg) scale(0);
  -ms-transform:rotate(0deg) scale(0);
  -o-transform:rotate(0deg) scale(0);
  transform:rotate(0deg) scale(0);}

#sb77-slider a {text-decoration:none !important;}
#sb77-slider li a span {
  display:block;position:absolute;
  right:0px;bottom:0px;left:0px;
  background-color:rgba(0,0,0,0.8);
  font:normal 11px/26px Arial,Sans-Serif;
  color:white;padding:0px 10px;
  text-align:right;opacity:0;
  viibility:hidden;
  -webkit-transition:all 2s ease-in-out;
  -moz-transition:all 2s ease-in-out;
  -ms-transition:all 2s ease-in-out;
  -o-transition:all 2s ease-in-out;
  transition:all 2s ease-in-out;}

#sb77-slider li input:checked + label {
  background-color:red;
  color:#fff;
  -webkit-border-radius:50%;
  border-radius:50%;}

#sb77-slider li input:checked ~ img,
#sb77-slider li input:checked ~ a img {
  top:0%;left:0%;
  width:448px;height:286px;
  visibility:visible;
  -webkit-transform:rotate(720deg) scale(1);
  -moz-transform:rotate(720deg) scale(1);
  -ms-transform:rotate(720deg) scale(1);
  -o-transform:rotate(720deg) scale(1);
  transform:rotate(720deg) scale(1);
  opacity:1;z-index:99;}

#sb77-slider input {display:none;}
#sb77-slider li input:checked ~ a span {
  opacity:1;
  z-index:100;}


Perhatikan kode yang saya beri warna berbeda, pada tahapan ini saya hanya menggunakan 5 buah gambar sebagai contoh dengan durasi jarak per 18px, tambahkan nilai pada gambar akhir sebanyak 18px jika Anda ingin menambahkan beberapa gambar lagi, dan seterusnya. Selanjutnya letakkan kode HTML berikut dimana Anda ingin menampilkannya.


<ul id='sb77-slider'>
    <li>
        <input type='radio' id='s1' name='sahabatblogger77' checked='true' />
        <label for='s1'>1</label>
        <a href='/'>
            <img src='Gambar-1.jpg' />
            <span>SAHABAT BLOGGER 77</span>
        </a>
    </li>
    <li>
        <input type='radio' id='s2' name='sahabatblogger77' />
        <label for='s2'>2</label>
        <a href='/'>
            <img src='Gambar-2.jpg' />
            <span>SAHABAT BLOGGER 77</span>
        </a>
    </li>
    <li>
        <..!! lanjutkan Untuk gambar ke-3 !!..>
    </li>
    <li>
        <..!! lanjutkan Untuk gambar ke-4 !!..>
    </li>
    <li>
    ...dan seterusnya !!
    </li>
</ul>



Pekerjaan sudah selesai, kini saatnya kita membahas hasil tampilannya pada kolom komentar dibawah, jika suka Katakan Cinta Dengan Tampilan Gambar Efek Rotate seperti pada tutorial sebelumnya.

Terimaksih dan semoga dapat meng-inspirasi sahabat semua

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= Perpindahan Slide Gambar Tanpa Lompatan
Ditulis oleh= Devy
Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip (meng-Copy), baik itu sebagian atau keseluruhan isi dari artikel ini harap menyertakan link dofollow ke >>
= TERIMA KASIH =

8 komentar

  1. mantap nih,jadi terlihat lebih keren dan profesional yambak

    BalasHapus
  2. wah akhirnya permasalahan saya diselesaikan juga oleh mbak devy, tampilannya menarik lagi, oya saya juga ada buat tapi tampilannya masih dibilang belum seindah ini. Kalau diijinkan dan karena ini artikel yang bermanfaat, boleh ngak mbak saya share di blog saya dengan menyertakan Link mbak sebagai desainer utama, saya tunggu ya mbak dan mbak bisa jawab di kolom komentar ini atau kolom komentar saya. sekali lagi terima kasih atas solusinya ya :D (h)

    BalasHapus
    Balasan
    1. alhamdulillah kalau sekiranya sesuai dengan yang mas request, tadinya mau saya desain seperti slider yang menampilkan artikel update terbaru secara otomatis dengan thumbanail,hanya tidak bisa dengan menggunakan CSS saja, harus disisipkan kode script

      jadi untuk menyisipkan link tertentu yang ada pada halaman, kita buat secara manual, artikel mana yang harus kita tampilkan pada gambar sebagai thumbanailnya.

      dengan senang hati mas,jika tutorial ini mau dishare ulang,

      Hapus
    2. terima kasih ya mbak devy atas ijinnya, saya akan segera menerapkannya :D

      Hapus
  3. waah..,pada blog ini ternyata banyak artikel yang bermanfaat dan bisa menambah pengetahuan saya.
    sekarang saya sudah sedikit paham tentang bagaimana cara membuat perpindahan slide gambar tanpa lompatan pada blog.
    thanks atas infonya mba.... :) (h)

    BalasHapus
  4. wah... keren sekali nih, sepertinya lebih keren dari portal berita yang menggunakan slide, hehehe..

    BalasHapus

  • Design
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JQuery
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • CSS
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • HTML
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JavaScript
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK