Membuat Efek Figure According Pada Gambar

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