According Effeck image

Membuat Efek Figure According Pada Gambar - Setelah lama tidak melihat Daftar Isi blog, baru tadi ada kesempatan iseng-iseng membukanya, dan menemukan ada tag label yang telah lama tidak terupdate dengan artikel terbaru, tepat sekali label dengan kategory efek gambar lama tidak mendapat perhatian, sehingga dipertemuan kali ini saya akan share modifikasi gallery gambar dengan Membuat Efek Figure According Pada Gambar.

Gambar dengan According efek merupakan susunan suatu gambar yang saling menutupi antara gambar yang satu dengan yang lain dalam satu frame, sangat berbeda penerapannya pada blog saat Membuat Efek Lensa Flip 3D Pada Gambar di artikel sebelumnya, dengan efek ini anda bisa menyisipkan beberapa gambar dalam satu tampilan album/bingkai, akan tetapi semua gambar akan dapat terlihat dengan hover klik mouse pada gambar, singkatnya ibaratkan pada sebuah buku yang apabila anda ingin melihat halaman tengah maka halaman awal akan terlihat terlebih dahulu, tetapi anda bisa langsung menuju halaman tengah tanpa melihat halaman awal.
Bagaimana efek according ini bekerja pada gambar postingan Anda ?, silahkan anda lihat hasilnya pada tombol DEMO SHOW dibawah ini




DEMO SHOW



Nah..!! jika anda sudah paham cara kerja efek figure according ini, berikut cara Membuat Efek Figure According Pada Gambar:
  1. Login ke-Blogger anda
  2. Pada dashboard pilih opsi Template >> Sesuaikan >> Tingkat Lanjut
  3. Lihat pilihan sebelah kanan, CSS >> selanjutnya Copy Kode berikut pada kolom CSS tersebut
  4. Terapkan ke Blog


.sb77-container {
   width: 535px;
   overflow: hidden;
   box-shadow: 1px 1px 4px #454545;
   border: 7px solid #080;}

.sb77-container figure {
   position: absolute;
   top: 0;left: 50px;width: 335px;
   box-shadow: 0 0 0 1px rgba(255,255,255,0.6);
   -webkit-transition: all 0.3s ease-in-out;
   -moz-transition: all 0.3s ease-in-out;
   -o-transition: all 0.3s ease-in-out;
   -ms-transition: all 0.3s ease-in-out;
   transition: all 0.3s ease-in-out;}

.sb77-container > figure {position: relative;left: 0 !important;}
.sb77-container img {display: block;width: 100%;}
.sb77-container input {
   position: absolute;top: 0;left: 0;
   width: 50px;height: 100%;
   cursor: pointer;border: 0;padding: 0;
   -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;z-index: 100;
   -webkit-appearance: none;
   -moz-appearance: none;appearance: none;}

.sb77-container input:checked{width: 5px;left: auto;right: 0px;}
.sb77-container input:checked ~ figure {
   -webkit-transition: all 0.7s ease-in-out;
   -moz-transition: all 0.7s ease-in-out;
   -o-transition: all 0.7s ease-in-out;
   -ms-transition: all 0.7s ease-in-out;
   transition: all 0.7s ease-in-out;
   left: 335px;}

.sb77-container input:checked ~ figure input{z-index: 1;}
@media screen and (max-width: 720px) {
.sb77-container {width: 540px;}
.sb77-container figure {left: 40px;width: 260px;}
.sb77-container input {width: 40px;}
.sb77-container input:checked ~ figure {left: 260px;}}

@media screen and (max-width: 520px) {
.sb77-container {width: 320px;}
.sb77-container figure {left: 20px;width: 180px;}
.sb77-container input {width: 20px;}
.sb77-container input:checked ~ figure {left: 180px;}}

figure {margin: 0;
   -webkit-margin-before: 0;
   -webkit-margin-after: 0;
   -webkit-margin-start: 0;
   -webkit-margin-end: 0;}


CSS pembangun pada kode diatas hanya menggunakan perintah klik mouse. Untuk melihat gambar berikutnya, maka efek pergantian frame gambar akan bekerja jika diperintah oleh klik mouse, (klik gambar ke-2, 3..dan seterusnya.!).

Untuk Memanggil efek pada selector kode CSS diatas, tahap selanjutnya Copy lalu Pastekan kode HTML berikut pada halaman postingan Anda yang baru mode HTML.

<div class="sb77-container">
<figure>
<img  alt="Your atribut...." src="URL-Gambar Anda" />
<input checked="checked" name="radio-set" type="radio" />
<figure>
<img alt="Your atribut...." src="URL-Gambar Anda" />
<input name="radio-set" type="radio" />
<figure>
<img alt="Your atribut...." src="URL-Gambar Anda" />
<input name="radio-set" type="radio" />
<figure>
<img alt="Your atribut...." src="URL-Gambar Anda" />
<input name="radio-set" type="radio" />
<figure>
<img alt="Your atribut...." src="URL-Gambar Anda" />
<input name="radio-set" type="radio" /></figure>
</figure>
</figure>
</figure>
</figure>
</div>


Sebelum kita akhiri, tutorial berikutnya dengan desain yang sama, saya sudah membuat efek pada gambar postingan blog dengan Efek Slide Show Otomatis Pada Gambar, sehingga pergantian frame gambar dapat bekerja secara auto ready slide.

Semoga Cara Membuat Efek Figure According Pada Gambar kali ini dapat memberikan manfaat buat kawan-kawan semua pecinta SAHABAT BLOGGER 77. Terimakasih
*** Selamat Berkreasi



Desain tampilan Efek Figure According Pada Gambar, telah didesain ulang
Oleh: Devy Indriyani
Diperbaharui May 30, 2014 Friday

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= Membuat Efek Figure According Pada Gambar
Ditulis oleh= Devy Indriyani
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 =

23 komentar

  1. wah tampak cantik & praktis jika menggunakan Efek Figure According.
    terimakasih sharenya..

    BalasHapus
    Balasan
    1. lebih praktis dan efesien mas,hehe

      Hapus
    2. keren mbak tutornya, bisa dicoba nih ntar :)
      btw fotonya yg dibuat tutor itu cantix baget ya mbak, hehehe x-)
      makasih sharingnya (f)

      Hapus
    3. yang pasti semua cewek cantik attuh mbak,kan gak ada cewek yang ganteng.hehehe

      Hapus
  2. gambar yang di sertakan di blogg jadi lebih keren yaa mbak
    tapi apakah ini membuat loading blogg menjadi lama mabk ??
    thanks :)

    BalasHapus
    Balasan
    1. bang ferdon bisa upload dahulu gambar ke album picasa,selanjutnya upload pada postingan agar loaading gambar cepat terbuka..

      Hapus
  3. Keren nih, tp demonya mana ya :)

    BalasHapus
    Balasan
    1. tadi ada sedikit masalah teknis dalam upload gambar mas, agar efek dapat bekerja saya upload dari picasa web, kebetulan album picasanya lagi error tadi makanya agak lambat muncul demonya, sekarang sudah beres..hehehe

      Hapus
    2. ahaay... manis sekali demonya :)

      Hapus
    3. demonya atau adminnya neh yang manis,,heheh..
      gak apa-apa dech gak dibilang manis juga.(ngarep)

      Hapus
  4. ijin yimak mas salam kenal semoga makin sukses jangan lupa kunbal y

    BalasHapus
    Balasan
    1. authornya bernama Devy Indriyani masih juga dipanggil mas,,hehhe...terimakasih sudah berkunjung sob, siap melawat keblog sobat

      Hapus
  5. Yah modelnya adminya sendiri ya.? Saya aja mbak modelnya hahahaha

    keren juga mbak hasilnya. Bisa di coba nih kapan kapan.?

    BalasHapus
    Balasan
    1. hitung-hitung pajang tampang mas,kali aja ada yang ajak kenalan,,hehehe
      kalau gamabarnya mas nady kan sudah banyak yang kenal,,

      Hapus
    2. hahaahahah saya setuju dengan mbak itung itung nampang hehehe ijin save gambar nya juga ya mbak

      Hapus
    3. tapi jangan disebar luaskan ya mas..hehehe

      Hapus
  6. bagus banget,apalagi modelnya hehe

    BalasHapus
    Balasan
    1. terima kasih sob,,
      happy blogging

      Hapus
  7. jd nanti gambarnya ada di postingan ya ka? *haduuuh aku kok gak bgitu ngerti ya kaya ginian >.<*

    BalasHapus
    Balasan
    1. bener sekali mbak, terkadang blog yang dominan menyisipkan gambar pada postingannya sudah dipastikan akan sedikit memperberat loading blog, sehingga ada ide buat efek gallery gambar seperti ini,

      Hapus
  8. cocok banget nih kalau diterapkan di blog saya :d

    BalasHapus
  9. setelah liat demonya baru ngerti hasilnya kaya apa hehe

    BalasHapus
  10. wah kreatif banget Mba, kapan-kapan di coba deh....

    Salam

    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