Terwujud
KomTer,Komik Online
Smartphone Mainbitcoin

Membuat Gallery Foto Efek 3D di Blog


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 { width:550px; height:350px; opacity:1; visibility:visible; float:right; }
</style>

<div id="thumbgallery">
<ul>
<li>
<img alt="Sakit Gigi" class="mini" src="http://3.bp.blogspot.com/-gCH8waCkQdw/UwDtjvhw1hI/AAAAAAAAAWs/JfqJS8YzCBU/s1600/sakitgigi-terwujud.jpg" height="100" width="100">
<img alt="Sakit Gigi" class="pic" src="http://3.bp.blogspot.com/-gCH8waCkQdw/UwDtjvhw1hI/AAAAAAAAAWs/JfqJS8YzCBU/s1600/sakitgigi-terwujud.jpg">
</li>

<li>
<img alt="Terwujud.com" class="mini" src="http://1.bp.blogspot.com/-pCMiVdBeSpk/Uvsbo5CIKhI/AAAAAAAAARQ/Z6NUdPNRqJk/s1600/why-terwujud.jpg" height="100" width="100">
<img alt="Terwujud.com" class="pic" src="http://1.bp.blogspot.com/-pCMiVdBeSpk/Uvsbo5CIKhI/AAAAAAAAARQ/Z6NUdPNRqJk/s1600/why-terwujud.jpg">
</li>

<li>
<img alt="Banjir" class="mini" src="http://3.bp.blogspot.com/-9ATWq-Z1u70/UuHf8dpEDTI/AAAAAAAAAEg/QOo68dHAeMQ/s1600/banjir.jpg" height="100" width="100">
<img alt="Banjir" class="pic" src="http://3.bp.blogspot.com/-9ATWq-Z1u70/UuHf8dpEDTI/AAAAAAAAAEg/QOo68dHAeMQ/s1600/banjir.jpg">
</li>
</ul>
</div>


5. Publish atau perbaharui
6. Lihat hasilnya

Keterangan:

A. Untuk kode Css dapat anda persingkat melalui google drive atau bisa copy langsung kode di bawah ini
<link href="https://googledrive.com/host/0B2J42XkvLqFoTlpIUkpCRjFlaWs" rel="stylesheet"></link>
B. Pada Kode Css di bawah dapat anda rubah sesuai dengan keinginan.
#thumbgallery ul li:hover .pic { width:550px; height:350px; opacity:1; visibility:visible; float:right; }
C. 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>
D. 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>
E. 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!!.

Mau Artikel Gratis! Silahkan Tulis Email Anda.
Print PDF
Next
« Prev Post
Previous
Next Post »

7 komentar

wah jadi lebih keren dengan ada bayangannya

Balas

Heehee, terima kasih mas!!

Balas

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

Balas

Oke mas dipersilahkan dengan hormat

Balas

emm.. kok komentarnya g muncul. padahal sy bukan menanamkan link. tapi hanya sekedar memberi contoh agar maksud inti dari komentar sy mudah dipahami

Balas

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

Balas

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

Balas

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.

Icon:
:) ^_^ :D =D (smile dan tertawa)
:( =( (marah dan Bingung)
:-bd :-d (oke)
|o| (tepuk tangan)

By: Terwujud.com
Terima Kasih!!

Copyright © 2014. Terwujud.com | Sumber Informasi Terpercaya - All Rights Reserved | Template Created by Kompi Ajaib | Modified by Ibrahim Lubis