Cara Membuat Gallery Foto Efek 3D di Blog Responsive

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).

• 
  
  
  
• 
  
  
  
• 
  
  
  

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!!.