Tutorial Blog Mas Andes Official - Tips Blogging | Trik Blogger | Tutorial Blogger | Widget Blogger | Blog Design | Taktik SEO (Search Engine Optimization)

Membuat Gallery Gambar Efek Pop Up Image Dengan CSS

gallery image
Membuat Gallery Gambar Efek Pop Up Image Dengan CSS – setelah pada sebelumnya adalah membuat Gallery Gambar Efek Smart Enlarger With Teks Deskripsi Dengan CSS maka sekarang tidak jauh berbeda dengan tutorial tersebut. Cuma yang sedikit jelas terlihat berbeda pada tutorial ini adalah pada link. Jika setelah tips ini diterapkan kedalam blog maka yang terjadi adalah pada link juga akan menampilkan deskripsi berupa gambar yang sudah dimaksudkan untuk lebih memperjelas keterangan link tersebut. Membuat Gallery Gambar Efek Pop Up Image Dengan CSS ini adalah galeri foto berbasis murni CSS yang menampilkan versi gambar yang lebih besar dari gambar thumbnail dinamis ketika gambar tersorot oleh mouse. Sebuah keterangan berupa bahasa HTML juga dapat ditambahkan ke dalam gambar yang diperbesar, dan setiap aspek dari Image Gallery terdapat keterangan HTML pada halaman. Idenya adalah dengan menggunakan CSS, hover class semu menyebabkan elemen bereaksi onMouseOver. Ketika itu terjadi, maka elemen benar-benar diposisikan untuk memegang gambar yang diperbesar, berlabuh pada halaman dengan frame lain dengan posisi diatur untuk relatif, akan ditampilkan. Selanjutnya, itu mungkin untuk memodifikasi perilaku sehingga gambar diperbesar hanya ditampilkan onClick. Agar lebih jelasnya, berikut adalah tutorial tentang cara Membuat Gallery Gambar Efek Pop Up Image Dengan CSS kedalam posting blog:

1. Login ke akun blogger.
2. Klik Template > Sesuaikan > Tingkat Lanjut > Tambahkan CSS (paste kode didalam kolom tersebut).
gallery images
.gallerycontainer{
position: relative;
}

.thumbnail img{
border: 1px solid white;
margin: 0 5px 5px 0;
}

.thumbnail:hover{
background-color: transparent;
}

.thumbnail:hover img{
border: 1px solid blue;
}

.thumbnail span{
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img{
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{
visibility: visible;
top: 0;
left: 230px;
z-index: 50;
}
3. Klik Terapkan ke Blog.

Selanjutnya apabila akan menampilkan Gallery Gambar Efek Pop Up Image Dengan CSS ini kedalam posting blog maka langkahnya adalah saat posting menggunakan mode HTML kemudian masukan kode dibawah ini:
<div class="gallerycontainer">

<a class="thumbnail" href="http://mas-andes.blogspot.com/"><img src="https://lh6.googleusercontent.com/-okA3E6TA3yY/Uc4Qu_forEI/AAAAAAAAFJA/JDPGON9duO4/w400-h300-no/Camilla+Belle-cute-06.jpg" width="100px" height="66px" /><span><img src="https://lh6.googleusercontent.com/-okA3E6TA3yY/Uc4Qu_forEI/AAAAAAAAFJA/JDPGON9duO4/w400-h300-no/Camilla+Belle-cute-06.jpg" width="500px" height="300px"/><br />Silahkan isi dengan teks deskripsi sesuka anda</span></a>

<a class="thumbnail" href="http://mas-andes.blogspot.com/"><img src="https://lh4.googleusercontent.com/-7WPZzMC67I8/Uc4Qt35wwpI/AAAAAAAAFI4/NlQt7DIB0VE/w425-h318-no/Britney+Spears+%25282%2529.jpg" width="100px" height="66px" /><span><img src="https://lh4.googleusercontent.com/-7WPZzMC67I8/Uc4Qt35wwpI/AAAAAAAAFI4/NlQt7DIB0VE/w425-h318-no/Britney+Spears+%25282%2529.jpg" width="500px" height="300px"/><br />Silahkan isi dengan teks deskripsi sesuka anda</span></a>

<br />

<a class="thumbnail" href="http://mas-andes.blogspot.com/"><img src="https://lh6.googleusercontent.com/-I3dKc7-Ttq4/Uc4QszU4zBI/AAAAAAAAFIo/dAx8qhPg-iw/w600-h450-no/Britney+Spears+%25281%2529.jpg" width="100px" height="66px" /><span><img src="https://lh6.googleusercontent.com/-I3dKc7-Ttq4/Uc4QszU4zBI/AAAAAAAAFIo/dAx8qhPg-iw/w600-h450-no/Britney+Spears+%25281%2529.jpg" width="500px" height="300px"/><br />Silahkan isi dengan teks deskripsi sesuka anda</span></a>

<a class="thumbnail" href="http://mas-andes.blogspot.com/"><img src="https://lh4.googleusercontent.com/-7s7-ViUU1g4/Uc4Qt7jQnJI/AAAAAAAAFI0/WHAna9qiJuI/w425-h318-no/Britney+Spears+%25284%2529.jpg" width="100px" height="66px" /><span><img src="https://lh4.googleusercontent.com/-7s7-ViUU1g4/Uc4Qt7jQnJI/AAAAAAAAFI0/WHAna9qiJuI/w425-h318-no/Britney+Spears+%25284%2529.jpg" width="500px" height="300px"/><br />Silahkan isi dengan teks deskripsi sesuka anda</span></a>

<br />

<a class="thumbnail" href="http://mas-andes.blogspot.com">Faceblog Evolutions<span><img src="https://lh4.googleusercontent.com/-UNQh9JdFR_s/Uc4RhwVBLhI/AAAAAAAAFJM/6UIh-J4eBK4/w850-h533-no/faceblog-evolutions.jpg" width="500px" height="300px"/><br />Faceblog Evolutions</span></a>

</div>
Keterangan:
Ganti "http://mas-andes.blogspot.com" dengan link tujuan yang di inginkan.
Ganti URL gambar dengan gambar lain yang di inginkan.

DEMO:

Berlangganan artikel via email

31 Response to "Membuat Gallery Gambar Efek Pop Up Image Dengan CSS"

bikin berat ga tuh gan?

Balas

mnrt saya, slide kadang bikin loading lambat mas. bener ndak sih?

Balas

silahkan dinilai sendiri mas kayak kalo buka blog ini :)

Balas

tergantung dari script dan widget yang udah terpasang mbak, kalo widget yang terpasang sebelumnya udah banyak otomatis juga ngaruh pada loading. dari segi script, misal pake jquery kalo scriptnya banyak juga ngaruh pada loading. kalo CSS sih menurut saya biasa aja, scriptnya juga gak terlalu banyak. tapi menurut saya script udah banyak juga kalo CSS lebih ringan di banding javascript/jquery. bisa dilihat pada blog demo mbak, tekan ctrl+u lalu liat source kodenya dari yang masih terpakai sampai yang udah terpakai masih ada belom saya hapus disitu

Balas

menarik juga untuk dicoba nich ..trimakasih sudah berbagi ilmu sobat :-)

Balas

Sedikit menambahkan boleh ya mas, soalnya terkadang ada aja orang yang sering masih bingung dengan penerapan kode css! Kalau kolom CSS di customize design sudah full atau sudah diisi kode css lain-- kode css di atas (dari .gallerycontainer{ sampai seterusnya....) bisa diletakkan pada edit html >> di dalam <*/b:*skin> atau tepat di atas ]]><*/b:*skin>, sama aja.

Sukses terus mas andes! :)

Balas

iya mas terimakasih atas partisipasinya, sama aja mas cuman penerapan bahasanya kedalam postingan terlalu banyak. soalnya untuk menemukan kode ]]></b:skin> harus terlebih dahulu mengklik/membuka tanda segitiga/panah kecil yang ada disebelah angka/baris script. jadi saya ambil singkatnya saja :)

Balas

pgn ganti tapi ini kok kodenya banyak bener.

Balas

wah kedatangan bang hariyanto, terimakasih atas waktunya udah mampir kesini bang :)

Balas

keren sobat, dah bisa saya coba. makasi informasi nya

Balas

yang empunya blog pasti jago nih tentang CSS

Balas

Tutorial yg sangat berguna sekali sobat, sepertinya Memang bagus dan saya sudah lihat demonya. Kapan kapan memang bisa digunakan jika diperlukan sobat
terima kasih banyak sudah berbagi

Balas

keren sob tutorialnya, thanks udah berbagi

http://andisyam.web.id/cara-menambahkan-account-email-di-app-mail-windows-8/

Balas

lain kali deh kalau berminat saya coba sob...:D
kunjungan perdana nih. slm kenal folback y mas andes..hehe

Balas

Boleh dicoba gan, soalnya blm prnh pake langkah diatas, thx infonya :)

Balas

Model yang seperti ini sangat cocok buat sobat blogger yang memiliki blog yang banyak menampilkan gambar, misalkan blog seputar ponsel atau fotografi.. mantap mas rizky...

Balas

urusan mempercantik blog faceblog emang jagonya dah, ilmu ane g nyampe

Balas

wah keren nih sob bs buat album di blog,,,makasih sudah berbagi

Balas

Keren abis, masih menimbang utk dicoba di blog sendiri...

Balas

wah mantep banget efek galerynya...jadi pengen belajar bang

Balas

keren mantab.. coba deh saya plajari dulu.. keren sekali lg

Balas

izin nyoba praktek dulu nih

Balas

mas, kalo untuk background gambar , bisa diubah g ?

Balas

bisa mas, ubah saja url gambarnya

Balas

Thanks Gan ijin praktek... dan bekerja 100%

Balas

Sy sdh coba di blog sy tapi ga efek.. mungkin konflik dengan jQuery yg sdh terpasang ya...?

Balas

bisa ndak yah buat wordpresmas
aku mau buat di website jasa seo ku tolong donk utk versi wp mas ?

Balas

gan untuk menghilangkan garis putus-putusnya gimana gan?

Balas

sama pada blog saya juga ga bekerja, tapi saya coba pada blog yang masih baru, baru bisa bekerja

Balas

ini blog keren yang ane cari.. makasih sob tutorialnya...

Balas
  • Berkomentarlah dengan sopan dan bijak sesuai dengan isi konten.
  • Komentar yang tidak diperlukan oleh pembaca lain [spam] akan segera dihapus.
  • Apabila artikel yang berjudul "Membuat Gallery Gambar Efek Pop Up Image Dengan CSS" ini bermanfaat, share ke jejaring sosial.
Konversi Kode