31.5.14
25
Efek According Pada Gambar Dengan Perintah Hover - Gambar pada blog merupakan ringkasan keterangan saat kita sulit menerangkan caranya dengan tulisan, sehingga dengan menyisipkan gambar disetiap postingan blog sangat membantu pembaca untuk memahami atau melakukan praktek secara langsung tentang semua rincian perintah dari artikel tersebut. Itu sebabnya mereka yang berkunjung ke blog Anda, tanpa membaca keseluruhan tulisan artikel Anda sekalipun, mereka akan lebih memahami hanya dengan melihat gambar pada postingan.

Kesempatan kali ini, saya akan coba memberikan tutorial yang terbaik buat kawan-kawan semua pecinta SAHABAT BLOGGER 77 tentang pembahasan bagaimana Cara Membuat Efek According Pada Gambar Dengan Perintah Hover. Melanjutkan postingan sebelumnya tentang tutorial Membuat Efek Figure According Pada Gambar Perintah KLIK yang telah saya bahas dipertemuan sebelumnya, efek gambar kali ini saya akan ubah tampilannya dengan perintah hover menggunakan JavaScript dengan animasi scroll seperti ini




DEMO SHOW




<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js' type='text/javascript'></script>
<script type="text/javascript">
$(document).ready(function () {
     $('div.jimgMenu-sb77 ul li a').hover(function() {
          if ($(this).is(':animated')) {
               $(this).addClass("active").stop().animate({width: "310px"}, {duration: 450, easing: "easeOutQuad", complete: "callback"});
          } else {
               $(this).addClass("active").stop().animate({width: "310px"}, {duration: 400, easing: "easeOutQuad", complete: "callback"});
          }
     }, function () {
          if ($(this).is(':animated')) {
               $(this).removeClass("active").stop().animate({width: "78px"}, {duration: 400, easing: "easeInOutQuad", complete: "callback"})
          } else {
               $(this).removeClass("active").stop(':animated').animate({width: "78px"}, {duration: 450, easing: "easeInOutQuad", complete: "callback"});
          }
     });
});
</script>



Perhatikan kode script yang saya beri warna MERAH, abaikan script tersebut jika pada template Anda sudah terdapat jQuery yang sama. Script diatas sudah saya susun berdasarkan perintah hover dengan animasi saat gambar active, dan saat gambar stop dengan angka value yang bisa Anda sesuaikan sendiri nantinya.

Agar tampilan gambar yang akan Anda beri efek dapat responsive, pada tahapan berikutnya kita perlu menyusun gambar dengan menggunakan perintah CSS seperti ini.


Image Accordion effect

Baca juga - Kumpulan Ragam Efek Pada Gambar


//* according effect with hover style
css design: inputcode="link-sb77","sahabat blogger 77"
sumber: http://sahabatblogger77.blogspot.com/
author: devy indriyani
*//
.jimgMenu-sb77 {
  position:relative;width:600px;
  height:200px;overflow:hidden;}

.jimgMenu-sb77 ul {
  list-style:none;display:block;
  height:200px;width:1340px;}

.jimgMenu-sb77 ul li {float:left;}
.jimgMenu-sb77 ul li a {
  text-indent:-1000px;
  background:#080 none repeat scroll 0%;
  border-right:2px solid #ccc;
  cursor:pointer;display:block;
  overflow:hidden;width:78px;height:200px;}

.jimgMenu-sb77 ul li.satu a {background:url(URL-gambar1.jpg) repeat scroll 0%;}
.jimgMenu-sb77 ul li.dua a {background:url(URL-gambar2.jpg) repeat scroll 0%;}
.jimgMenu-sb77 ul li.tiga a {background:url(URL-gambar3.jpg) repeat scroll 0%;}
.jimgMenu-sb77 ul li.empat a {background: url(URL-gambar4.jpg) repeat scroll 0%;}
.jimgMenu-sb77 ul li.lima a {background: url(URL-gambar5.jpg) repeat scroll 0%;min-width:310px;}


CSS diatas sudah saya permudah dalam peng-editan. Sebagai contoh pada tutorial kali ini, saya menyisipkan 5 buah gambar, nah..!! jika Anda ingin menyisipkan lebih banyak gambar lagi, Anda tinggal melanjutkan pada kode (jimgMenu-sb77 ul li.lima a,jimgMenu-sb77 ul li.enam a) dan seterusnya. Saatnya menampilkan hasil kerja Anda di postingan blog dengan kode perintah HTML seperti berikut:

<div class="jimgMenu-sb77">
<ul>
<li class="satu">
<a href="http://sahabatblogger77.blogspot.com">Gambar-1</a></li>
<li class="dua">
<a href="http://sahabatblogger77.blogspot.com">Gambar-2</a></li>
<li class="tiga">
<a href="http://sahabatblogger77.blogspot.com">Gambar-3</a></li>
<li class="empat">
<a href="http://sahabatblogger77.blogspot.com">Gambar-4</a></li>
<li class="lima">
<a href="http://sahabatblogger77.blogspot.com">Gambar-5</a></li>
</ul>
</div>


Mereka yang bertanya sekalipun belum tentu akan memahami atas jawaban yang mereka dapatkan, lalu bagaimana dengan Anda yang tidak mau bertanya atau malu bertanya, jadi saya akan setia menunggu suara Anda pada kolom bertanya dibawah, hehehe...!!

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= Efek According Pada Gambar Dengan Perintah Hover
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 =

25 komentar

  1. bisa disimpn di laman efek in ya.. Dev..!, kyak itu..seperti foto2 propil Mba..!,..maap liat2 td nda permisi... :)

    BalasHapus
    Balasan
    1. iya mas, sebagai koleksi gallery foto album, biasanya saya tempatkan pada laman blog

      Hapus
  2. hmm... mantap banget mba, ilmu bloggingnya, hebat, saya bikin template sendiri ga jadi-jadi.

    BalasHapus
    Balasan
    1. berbeda mas saat kita akan membuat template sendiri, banyak hal yang harus disiapkan, dan pastinya membutuhkan waktu dan imajinasi yang akurat,agar template yang kita pamerkan dapat diterima sahabat blogger lainnya..

      sabar mas, saya juga sudah menyimpan 2 buah template,namun belum saya rilis untuk dipublikasikan,belum yakin,,hehe

      Hapus
  3. kebetulan saya lagi nyari yang seperti ini, terima kasih banget mbk..

    BalasHapus
  4. boleh tanya diluar topik mba,
    contoh: untuk mengatu gambar autoresize berdasarkan lebar layar codenya adalah style="width: 100%;max-height: 100%"

    pertanyaannya;
    kalau mengatur widget autoresize caranya gimana ya mba, autoresize ini letaknya di bawah link menu blog.

    BalasHapus
    Balasan
    1. kolom komentar sebagai ajang tanya jawab mas, gak apa-apa jika bertanya diluar topik, hanya jangan terlalu sering,,hehe..

      jika kode lebar width=100% maka hasil akan ditentukan berdasarkan lebar keseluruhan lay-out area, sedangkan max-height=100% untuk menentukan batas maksimal tinggi objek, contoh, sekalipun kita buat tinggi dengan height=500px maka nilai 500 tidak akan mempengaruhi,karena sudah kita beri batas dengan maksimal,
      nah untuk mengatur widgetnya mas gunakan perintah em atau pixel,jangan persen(%)

      Hapus
  5. wah keren efeknya mba,,,
    tapi apakah hal itu tidak akan memperlambat akses blog kita?

    BalasHapus
  6. keren banget nih demonya,tp sayang banget pakai js jadinya memperberat blog yambak

    BalasHapus
    Balasan
    1. js diatas hanya sebagai pengganti css yang sedikit saya ringkas mas, karena CSS aslinya terlalu panjang, sehingga efeknya saya ubah dengan perintah js, dan js diatas tidak mutlak,karena pengaturannya dapat kita ubah kecepatan dan lain sebagainya

      Hapus
  7. berarti ini bs meringkas dan menghemat tempat ya sob?
    wah, musti aku coba nih
    thanks ya

    BalasHapus
  8. itu efek secara horizontal ya sob, kalo vertikal bisa gak sob?

    BalasHapus
    Balasan
    1. saya menggunakan sistem gambar dengan style menu mas, jika membuat secara vertical CSS pengaturan gambar berbeda lagi.

      Hapus
  9. benar-benar hebat... sangat kreatif...

    soal begituan si bos emang jagonya, tinggal templatenya aja yang ga muncul2, hehehe...

    BalasHapus
    Balasan
    1. sedikit kreatif kok bos,hanya iseng-iseng aja kok,hehe

      templatenya masih dalam tahap pembuatan mas,sebenarnya sudah saya buat 2 buah dengan style berbeda namun saya belum yakin dapat diterima sahabat lainnya, jadi belum saya rilis sampai sekarang, masih dalam tahap renovasi,,hehe

      Hapus
  10. Keren juga ya :D
    pengen nyoba ah dengan gambar yang banyak..

    BalasHapus
    Balasan
    1. tetapi jangan terlalu banya juga mas,ntar layar komputernya kagak muat lagi hehehe...

      Hapus
  11. Saya coba dulu ya mbak, oya saya mau reuest ni tentang cara menampilkan sejumlah gambar tapi bisa bertukar-tukar ketika di klik, kayak sistem slider mbak, namun tampilannya di postingan, mohon bantuannya ya mbak

    BalasHapus
    Balasan
    1. http://sahabatblogger77.blogspot.com/2014/02/membuat-efek-figure-according-pada-gambar.html

      Hapus
  12. Wah, keren nih mba... Ijin praktek dulu ya mba ... :)

    BalasHapus
  13. Terimkasih mb atas postinganx sy coba ya.. biar manyous... :)

    BalasHapus
  14. Klaau tips tentang gambar bukan hover ada ngak mbak, maksudnya yang diklik baru gambarnya berubah, seperti slider gitu lho tapi ngak berat seperti artikel ini.

    BalasHapus
    Balasan
    1. gunakan perintah CSS only saja mas, kalau pada tutorial ini CSSnya saya ganti dengan script, agar load tidak berat kirimterlebih dahulu gambar untuk diparse, lalu simpan pada picasa,selanjtnya baru upload gambarnya ke blog untuk mendapatkan URL gambar

      Hapus
  15. Artikel yang bagus... kapan-kapan saya akan berkunjung kembali.
    Link agan sudah saya pasang silahkan di cek,,
    http://www.devilsonline.ga/2014/10/blog-dofollow-indonesia-yang-dapat.html
    jangan lupa berkomentar.
    dan memasang link balik seperti saya
    http://www.devilsonline.ga
    http://www.azharekapranata.ga

    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