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

Membuat Image Efek Accordion CSS3 di Blog

Image Efek Accordion CSS3
Membuat Image Efek Accordion CSS3 di Blog – untuk mengelompokkan gambar atau yang biasa disebut gallery image didalam satu halaman posting blog caranya cukup mudah. Seperti yang sudah kita bahwa gallery image untuk suatu posting gambar didalam blog sangat banyak bahkan bermacam model sehingga untuk membuat gallery gambar pada blog dengan disertai efek pada gambar-gambar tersebut sangatlah bervariatif, salah satunya seperti pada image efek accordion ini. Gallery image memang sangat jarang digunakan oleh para blogger namun dengan adanya tutorial untuk cara membuat image efek accordion ini tentu akan jauh lebih memudahkan dikala saat anda akan membuat posting yang terdapat banyak gambar dan bisa disisipi dengan image efek accordion ini. seperti yang tertera pada judul posting, tentu semua sudah paham akan bagaimana fungsi image efek accordion ini akan bekerja. Sedikit penjelasan singkat, image efek accordion ini berjalan seperti layaknya sebuah blog yang mengkonvigurasikan dimana pada gambar tersebut akan mengarahkan ke halaman konten yang lain layaknya seperti sebuah menu utama accordion yang terdapat didalam sebuah blog. Sebelum menjumpai atau berlanjut ke tutorial, dibawah terdapat demo yang bisa anda simpulkan dan dilihat terlebih dahulu sebelum ingin mencobanya. Untuk memasang efek accordion image kedalam blog, maka berikut adalah tutorial cara Membuat Image Efek Accordion CSS3 di Blog.

1. Login ke akun blogger.
2. Copy kode CSS dibawah ini, lalu pada dashboard blog anda klik Template >> Sesuaikan >> Tingkat Lanjut >> Tambahkan CSS (paste kode CSS ini didalam kolom tersebut).
.ia-container {
width: 535px;
overflow: hidden;
box-shadow: 1px 1px 4px #52e052;
border: 7px solid #52e052;
}
.ia-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;
}
.ia-container > figure {
position: relative;
left: 0 !important;
}
.ia-container img {
display: block;
width: 100%;
}
.ia-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;
}
.ia-container input:checked{
width: 5px;
left: auto;
right: 0px;
}
.ia-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;
}
.ia-container figcaption {
width: 100%;
height: 100%;
background: rgba(87, 73, 81, 0.1);
position: absolute;
top: 0px;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.ia-container figcaption span {
position: absolute;
top: 40%;
margin-top: -30px;
right: 20px;
left: 20px;
overflow: hidden;
text-align: center;
background: rgba(87, 73, 81, 0.3);
line-height: 20px;
font-size: 18px;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
text-transform: uppercase;
letter-spacing: 4px;
font-weight: 700;
padding: 20px;
color: #fff;
text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
}
.ia-container input:checked + figcaption,
.ia-container input:checked:hover + figcaption{
background: rgba(87, 73, 81, 0);
}
.ia-container input:checked + figcaption span {
-webkit-transition: all 0.4s ease-in-out 0.5s;
-moz-transition: all 0.4s ease-in-out 0.5s;
-o-transition: all 0.4s ease-in-out 0.5s;
-ms-transition: all 0.4s ease-in-out 0.5s;
transition: all 0.4s ease-in-out 0.5s;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=99)";
filter: alpha(opacity=99);
opacity: 1;
top: 50%;
}
.ia-container #ia-selector-last:checked + figcaption span {
-webkit-transition-delay: 0.3s;
-moz-transition-delay: 0.3s;
-o-transition-delay: 0.3s;
-ms-transition-delay: 0.3s;
transition-delay: 0.3s;
}
.ia-container input:hover + figcaption {
background: rgba(87, 73, 81, 0.03);
}
.ia-container input:checked ~ figure input{
z-index: 1;
}
@media screen and (max-width: 720px) {
.ia-container {
width: 540px;
}
.ia-container figure {
left: 40px;
width: 260px;
}
.ia-container input {
width: 40px;
}
.ia-container input:checked ~ figure {
left: 260px;
}
.ia-container figcaption span {
font-size: 16px;
}
}
@media screen and (max-width: 520px) {
.ia-container {
width: 320px;
}
.ia-container figure {
left: 20px;
width: 180px;
}
.ia-container input {
width: 20px;
}
.ia-container input:checked ~ figure {
left: 180px;
}
.ia-container figcaption span {
font-size: 12px;
letter-spacing: 2px;
padding: 10px;
margin-top: -20px;
}
}
figure {
margin: 0;
-webkit-margin-before: 0;
-webkit-margin-after: 0;
-webkit-margin-start: 0;
-webkit-margin-end: 0;
}
3. Klik Terapkan ke Blog.

Perlu diperhatikan: Untuk menaruh kode CSS tidak harus seperti pada langkah di atas, cara lain bisa juga dilakukan dengan cara klik Template >> Edit HTML lalu cari kode ]]></b:skin> kemudian paste kode CSS tersebut tepat di atasnya / sebelum kode ]]></b:skin> lalu klik Simpan Template.

4. Langkah selanjutnya copy kode dibawah ini.
<div class="ia-container">
<figure>
<img src="https://lh4.googleusercontent.com/-YCPvq0AqAjs/Uc5Z0yf6HsI/AAAAAAAAFMk/84cPU7jLU3Q/w335-h480-no/Faceblog+Evolutions+%25282%2529.jpg" alt="faceblog evolutions" />
<input type="radio" name="radio-set" checked="checked"/>
<figcaption><span>Cecilia Cheung 1</span></figcaption>
<figure>
<img src="https://lh3.googleusercontent.com/-A5TtTz2RkeU/Uc5Z1iv4kxI/AAAAAAAAFMs/6KHSbFsJg6U/w335-h480-no/Faceblog+Evolutions+%25283%2529.jpg" alt="faceblog evolutions" />
<input type="radio" name="radio-set" />
<figcaption><span>Cecilia Cheung 2</span></figcaption>
<figure>
<img src="https://lh6.googleusercontent.com/-hcrnz9SfWMM/Uc5Z3PC_EPI/AAAAAAAAFM4/Otn6uIGQ7ME/w335-h480-no/Faceblog+Evolutions+%25284%2529.jpg" alt="faceblog evolutions" />
<input type="radio" name="radio-set" />
<figcaption><span>Cecilia Cheung 3</span></figcaption>
<figure>
<img src="https://lh3.googleusercontent.com/-dLZpo5RAPhg/Uc5Z3F--7GI/AAAAAAAAFM8/x75n2K88lCo/w335-h480-no/Faceblog+Evolutions+%25281%2529.jpg" alt="faceblog evolutions" />
<input type="radio" name="radio-set" />
<figcaption><span>Cecilia Cheung 4</span></figcaption>
<figure>
<img src="https://lh5.googleusercontent.com/-EZN7bcJnTXg/Uc5Z3u_S_LI/AAAAAAAAFNE/PscW4B1qPUU/w335-h480-no/Faceblog+Evolutions+%25285%2529.jpg" alt="faceblog evolutions" />
<input type="radio" name="radio-set" />
<figcaption><span>Cecilia Cheung 5</span></figcaption></figure>
</figure>
</figure>
</figure>
</figure>
</div>
Keterangan:
Ganti URL gambar dengan yang di inginkan.

5. Kemudian paste di kolom posting mode HTML, selanjutnya bisa anda klik Publikasikan.

DEMO:
faceblog evolutions
Cecilia Cheung 1
faceblog evolutions
Cecilia Cheung 2
faceblog evolutions
Cecilia Cheung 3
faceblog evolutions
Cecilia Cheung 4
faceblog evolutions
Cecilia Cheung 5

Berlangganan artikel via email

34 Response to "Membuat Image Efek Accordion CSS3 di Blog"

Waduh yang kemarin belum saya coba udah ada postingan baru lagi nih...Mantap nih mas tutorial Image Efek Accordion CSS3nya... :)

Balas

Wah..mas andes demen banget bikin gallery dan menu di blog, hasilnya keren2.... :D

Balas

mantap bro,,,,gallerynya keren-keren euyy

Balas

mampir lagi kang dikala hujan nih

Balas

wah bersyukur juga dapat tutorial lagi nih, kayaknya ini pengetahuan yg perlu diketahui, terpaksa saya save dulu brow, soalnya belum sempat dipraktekin,
terima kasih sudah berbagi tutorial yg bermbafaat

Balas

yg kemarin masukin kulkas aja mas anthonie...biar awet.. :)

Balas

kemaren wanita jadi-jadian.. kali ini wanita beneran
tapi susah sih pake bskin bskin.. takut nambah berat, terus kalo mau hapus juga susah..
yang praktis aja dong muehehehe.

Balas

kalo saya dikala itu... :)

Balas

nama image efeknya keren mas..Accordion....
kaya artis yg nyanyian lagu kapal tenggelem ya...hehe
------
Nice.. :)

Balas

bentuknya dan hasilnya sangat keren. untuk gambar tidak bisa secara otomatis dari hasil postingan kah ?

Balas

untuk url gambar bisa ambil dari mana saja bang, cuma diatas memang saya uplod di photobucket yang menurut saya lebih praktis URLnya juga lebih pendek

Balas

kang dede aku sering mampir tapi kok gak disediain kolom komen maupun cbox, dimanakah letaknya itu :)

Balas

komentator yang satu ini emang sukanya ngeyel* hohoho..
biar kodenya langsung masuk postingan semua, pada kode css diatas tinggal tambahin aja:

<style>
css diatas taruh sini...
</style>
html diatas taruh sini..

gitu doang mitia* praktis kan.. mudah kan.. dapet bonus makin langsing pula gak bakal berat :D

Balas

makasih ya pak admin dah share tips dan ilmunya. maklum baru nih. semoga manfaat
sekalian saya klik iklan ppcnya

Balas

izin nyimak kak,,,,
smoga d masa mendatang bisa d coba

Balas

si umpetin dekat dapurnya hehe

Balas

Makin hari makin keren sumeren neh tutornya kawan
sukses sob

Balas

Tutorialnya mas andes memang keren Miz.Ia amat suka dengan gambar wanita, mungkin karena wanita itulah mas andes selalu semangat buat tutorial ..
selain pakai wanita jadi jadian juga perlu wanita beneran..hehe..)

Balas

bukannya itu rojali mas:)

Balas

ahahaha *udah ngakak duluan masih inget wanita jadi-jadian. wanita sebagian dari iman bang juga selalu memberi inspirasi :) tapi bukan sebab itu saya semangat blogging lho.
itu gambar wanita maksutnya buat bukan menyemangatkan saya bang, tapi buat menyemangatkan pemirsa :) tuhhh kannn buktinya foto om PP langsung senyum abis liat gambar wanita *hayoooo... ketahuan ya sekarang :D

#kehabisan stock helm nih soalnya bang *hohoho

Balas

ahh om sukanya merendah, selalu memuji juga :)
inget pesan mas budi diatas ya om, jangan lupa disimpan taruh didalam kulkas biar awet *okey
hohoho

Balas

gapapa kan mbak, yang penting gak demen istri orang aja :)

Balas

Mantap sekali tutornya... saya pasti akan butuh ini ... Saya simpan dulu mas ...

Balas

keren jg y sob
kpn2 ak cba nh

blogny jg kren :)

Balas

ide yang bagus mas Budi hehe...

Balas

andes stickerr ini kurang jeli ahaha
aku kok lihat, ada di sidebar pake spoillerr.

Balas

hmm hampir sama dengan artikel saya tentang efek accordion di gallery gambar. Tapi beda dikit-dikit. Terutama tentang efek hovernya . Memang beda.

Balas

hadir untuk menyimak, lagi cari gambar slider yang loadingnya ringan.

Balas

mantep mas nugroho,,,dongakno sukses tur izin ngopy,,,
klo cara buat gambar gerak menyamping koyo gone mas nugroho,,,pripun enggh carane,,,?

Balas

mungkin ini bisa di pelajari mas..
http://mas-andes.blogspot.com/search/label/Slider

Balas

makasih mas nugroho coba saya pelajari dulu

Balas

mantap gan tutorialnya... kalo pengen gambar yang terbuka otomatis kalau kena mouse hover gimana y gan, jadi ga perlu di klik gan... kalau ane ga input jadi mouse hover berarti semua kode checked harus diganti ga gan...

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 Image Efek Accordion CSS3 di Blog" ini bermanfaat, share ke jejaring sosial.
Konversi Kode