Terwujud

Cara Membuat Gallery Foto Efek 3D di Blog Responsive



Jika bermanfaat, Mohon di Share ya !, jika ada unek-unek komen aja
Tentunya dalam setiap postingan artikel jika anda membutuhkan 2 atau 3 gambar yang akan anda tampilkan, pasti akan memenuhi kapasitas di halaman postingan artikel blog anda, hal ini juga yang selalu saya alami jika tema artikelnya terkait dengan tutorial yang membutuhkan dukungan gambar.

Maka dari itulah saya mencoba mencari referensi bagaimana caranya untuk menghemat tata letak posisi gambar, setelah saya berkunjung dibeberapa blog, akhirnya saya bertemu blog mbak devi yaitu Sahabat Blogger77, dan saya melihat ada artikel beliau cocok dengan apa yang saya cari.

Gallery foto ini selain berfungsi menghemat susunan gambar, efek 3D yang otomatis membesar saat tersentuh kursor akan membuat tampilan artikel anda elegant dan menarik. Berikut cara Membuat Gallery Foto Efek 3D di Blog ( Demo: Arahkan Kursor anda pada gambar di bawah ini).

  • Alam
    Alam

  • Banjir
    Banjir

  • Hijau
    Hijau
1. Log In ke www.blogger.com
2. Buat atau edit postingan artikel anda
3. Buka menu HTML bukan Compose
4. Copy dan Paste kode di bawah ini

<style>
#thumbgallery { overflow: visible; }
#thumbgallery ul li { list-style:none; display:inline-table; padding:5px; }
#thumbgallery ul li .pic{
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
-o-transition: all 0.6s ease-in-out;
opacity:0; visibility:hidden; position:absolute; border:1px solid #52e052;
-webkit-box-shadow:#272229 2px 2px 10px;
-moz-box-shadow:#272229 2px 2px 10px;
filter:progid:DXImageTransform.Microsoft.Shadow(color='#272229', Direction=135, Strength=5);
box-shadow:#272229 2px 2px 10px;}
#thumbgallery ul li .mini:hover { cursor:pointer; }
#thumbgallery ul li:hover .pic { max-width:80%; height:350px; opacity:1; visibility:visible; position: absolute; left: 50px;}
</style>

<div id="thumbgallery">
<ul>
<li>
<img alt="Sakit Gigi" class="mini" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqSENCO4pWul4yAy00Pfc-XSqt2zhdU33_ydHs7_gNyLwmDJ_mKtA5x7LtozOhFPTxhhpUb4Kzi0z15W1bVdLVkMT02Y5ivboStPbEG9kMnca5s1oejDrcuewjB7z2zlFROH28org7hg3o/s1600/sakitgigi-terwujud.jpg" height="100" width="100">
<img alt="Sakit Gigi" class="pic" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqSENCO4pWul4yAy00Pfc-XSqt2zhdU33_ydHs7_gNyLwmDJ_mKtA5x7LtozOhFPTxhhpUb4Kzi0z15W1bVdLVkMT02Y5ivboStPbEG9kMnca5s1oejDrcuewjB7z2zlFROH28org7hg3o/s1600/sakitgigi-terwujud.jpg">
</li>

<li>
<img alt="Terwujud.com" class="mini" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtwiLCmCWhGrQbkpD_tVv9YWyWUqoq7nLx2Pv3n14K9WmqIr3yHQqinl3sYSh97h-dldlruQtJQ529F_Xpm9tNzKL_9HsBHzsQqQTv_DRZajPh9vXtveR6FoO8tCVNOj8sgVcvHYOU-oS9/s1600/why-terwujud.jpg" height="100" width="100">
<img alt="Terwujud.com" class="pic" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtwiLCmCWhGrQbkpD_tVv9YWyWUqoq7nLx2Pv3n14K9WmqIr3yHQqinl3sYSh97h-dldlruQtJQ529F_Xpm9tNzKL_9HsBHzsQqQTv_DRZajPh9vXtveR6FoO8tCVNOj8sgVcvHYOU-oS9/s1600/why-terwujud.jpg">
</li>

<li>
<img alt="Banjir" class="mini" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOMLlkXU54a7oQt6PmCc5nevt5bwg0CkR63DGhbd2LyJyl5UHER9yubunkgRzWhRPhqzzm8vv3S-nqy5D6Gqy_vqWD2C0NsrPe3-eaGI0sZ6E0GRApO6nv6wZ8IAol_s0dmUhH4iyn1D78/s1600/banjir.jpg" height="100" width="100">
<img alt="Banjir" class="pic" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOMLlkXU54a7oQt6PmCc5nevt5bwg0CkR63DGhbd2LyJyl5UHER9yubunkgRzWhRPhqzzm8vv3S-nqy5D6Gqy_vqWD2C0NsrPe3-eaGI0sZ6E0GRApO6nv6wZ8IAol_s0dmUhH4iyn1D78/s500/banjir.jpg">
</li>
</ul>
</div>


5. Publish atau perbaharui
6. Lihat hasilnya

Keterangan:
A. Pada Kode Css di bawah dapat anda rubah sesuai dengan keinginan.
#thumbgallery ul li:hover .pic { width:80%; height:350px; opacity:1; visibility:visible; left:50px; }
B. Untuk menambahkan jumlah gambar, anda tinggal tambah kode
<li>
<img alt="isi alternative gambar" class="mini" src="alamat gambar anda" height="100" width="100">
<img alt="isi alternative gambar" class="pic" src="alamat gambar anda">
</li>
C. Untuk Membuat baris/kolom baru pada gambar, silahkan tambahkan kode
<div id="thumbgallery">
<ul>
<li>
<img alt="isi alternative gambar" class="mini" src="alamat gambar anda" height="100" width="100">
<img alt="isi alternative gambar" class="pic" src="alamat gambar anda">
<li>
</ul>
</div>
D. Jika kode <style> tidak berfungsi, silahkan ganti kode <style type="text/css">

Demikian artikel tentang Membuat Gallery Foto Efek 3D di Blog, jika ada kendala dalam menerapkannya silahkan tinggalkan pertanyaan atau komentar kepada saya. Bagi yang ingin mempersingkat kode CSS di atas dengan Google drive, silahkan membaca  Cara Mempersingkat Kode Panjang dengan Google Drive. Terima Kasih!!.


Artikelnya sudah di share, makasih ya !

Mau Artikel Gratis! Silahkan Tulis Email Anda.
Print PDF

You Might Also Like:

Previous
Next Post »

Sudah ada 7 komentar

Saya akan sangat senang jika ada komentar yang membangun, tetapi:

*Jangan komentar SPAM
*Jangan menanam link
*Jangan ada unsur sara, Fornografi dan memojokkan

Komentar yang melanggar akan dimasukkan kedalam daftar SPAM dan tidak akan diijinkan lagi.

Klik dan Copy Icon di bawah:
:) :( hihi :-) :D =D :-d ;( ;-( @-) :P :o -_- (o) :p :-? (p) :-s (m) 8-) :-t :-b b-( :-# =p~ $-) (y) (f) x-) (k) (h) cheer lol rock angry @@ :ng pin poop :* :v 100

By: Terwujud.com
Terima Kasih!!

  1. wah jadi lebih keren dengan ada bayangannya

    ReplyDelete
  2. Menariki mas, saya bookmark dulu, ntar kalau mau bikin artikel yang ada gallery fotonya tak mampir lagi ..

    ReplyDelete
  3. maksud ndak muncul apa mas syamsul, kalau memang perlu kirim aja melalui email mas, komentar mas kan muncul lihat ni heehee

    ReplyDelete
  4. terimaksih sudah saya coba dan behasil mohon kunjungannya bang http://tipsaqua-scap.blogspot.com/

    ReplyDelete
Copyright © 2014 Terwujud.com - All Rights Reserved