Membuat Image Efek Accordion CSS3 di Blog

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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5Yb5V5Fkrdw6FQonzJp0lxpFW3xarup4q3b1a5mIMojXQ6AfCdej_SOlWCBblpgNsO-K_Fc8Jt7aQN9q6qOYgG_YKGywKEScYFRQc7_s0iLLXNJ6Zd4QZI8FMI8zqr0sM5XMNviXAcSE/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRR6xy3YfUyMqjYXVYxZehSX-VHcgeWNGNwW_l7qkQQXhHcixGzpCBquf7hAnYywaF2S2qbb53GQyY22Xol23n363e-aeiKl6pg_2AxAvfsp9JIKyeqVhSwjN_JrFXqFNaAAMEgA-Lt_0/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAcpQtmQ5LEnLrKHqEY7JbM8DlAQ3hpmfIKgeXs42kvThLUGlUhuPz1fuC56l1Y7_S8CFIR9HWusOZJS29RDIE2B83LVX2-E7q2h-YLfcyDpWW-N3MJwtj1WPnhljBMAkpEsSGtETeKTg/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDpmRhwPf-qQU8IYuCVjz7qVTDuLss6Ot0tCNEmGRrjvYXXObG1iXPplTZmS-_wRTSApEHM3HEvaRexE-VcMx0ka5t6H963N9AD9lvBFsCtPSSFSgpG-_8VK95I9KJZDXpE5Rf0Q7ZOJc/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQGN-uKsfk1gGB2OlBvljzda8mauohysU-2pOLWb96skfRARHNFrgjH59Sx4nu3FZfGAXm4CsddCa9I053Zvl1fH9bArcBPupcvqXrrkri8cjQnH2hG6dis3ZBwAaI9_CPDjflgR3RTls/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:

Cecilia Cheung 1

Cecilia Cheung 2

Cecilia Cheung 3

Cecilia Cheung 4

Cecilia Cheung 5