Membuat Efek Slide Gambar di Postingan Blog

Efek Slide merupakan cara untuk menampilkan Gambar atau foto yang bisa bergerak dari kanan ke kiri, efek berjalan bahkan efek bergantian saat kursor mengklik salah satu gambar tersebut. Tentunya secara umum efek slide pada gambar digunakan dan diletakkan di bagian Header.

Namun, kali ini saya akan memaparkan bagaimana Gambar atau foto anda menjadi menarik ketika diklik dengan efek slide muncul tenggelam (bahasa saya ya!!). Untuk membuat Efek Slide Gambar di Postingan Blog tidak terlalu sulit kok !!, hanya dengan menggunakan beberapa kode yang cukup anda Copy dan paste ke dalam Postingan Blog. Berikut:

Gambar 1

Gambar 2

Gambar 3

Gambar 4

Gambar 5

Membuat Efek Slide Gambar di Postingan Blog

1. Masuk ke Blog anda
2. Edit atau Buat Posting artikel Baru
3. Buka menu HTML bukan Compose
4. Copy Kode CSS dibawah dan Paste ke dalam Postingan

<style>
.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;
}
</style>

5. Copy dan Paste kode dibawah ini setelah kode CSS di atas

<div class="ia-container">

<figure>

 <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilyqFS04jNhurRg2xOIIrd8l-542U39CKdFczlkDJ2_ZGBX29ejKe7s4doWmui4QtWLVIxuJ9l8kRez-UpT9HqNxnM6kT_A-BnXLnAF5rsaLv0mzWsrbXRoEPCy1ZZfSBdTfoNKcgWa7Pp/s1600/terwujud.jpg" alt="Terwujud.com" title="Boleh di Coba"/>

<input type="radio" name="radio-set" checked="checked"/>

 <figcaption><span>Gambar 1</span></figcaption>

<figure>

 <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNpjhJAZDPKHD1lpBl0LYRt22uOOoF6xPUstBFDhhyphenhyphen6XxdDnDKSt8D3qq_GwVb6f-fO_CUFMCqjds-AG4XeY8VVE_VtOJGyH1AcxQrbKm-mSpRY4D9ZtPT7GkSU4IOU9ifR3kYZJvKcp86/s1600/terwujud.jpg" alt="Terwujud" title="Terwujud.com" />

<input type="radio" name="radio-set" />

 <figcaption><span>Gambar 2</span></figcaption>

<figure>

 <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgErBm-tgIYKSoccIw9w6yZYoYLqG3i5HkvynQ9NlSjS4w0AyZx07WMaZ-7CiDLlHg0ucFjQzc3w4W1Xpsb31lDyfguiiPGL6mo5SFUXeYeDDu0DRzg3fmmeCgqpZzB_utLsx0K2NMArFsM/s1600/KTP+Goole%252B.png" alt="Google" title="Terwujud KTG" />

<input type="radio" name="radio-set" />

 <figcaption><span>Gambar 3</span></figcaption>

<figure>

 <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFnAgtwRbTfDT5F2DHqCwA43MVPel05gabhL-GXU2GBvjSJW7BiY4rsIo5OMUgTaGXOO0lryrlmlq2Z-XjvDOGY9WrqofekeNHLTtNC2AkR4tRb8kX6ZR4aSmN9Q5t10Z0vQnspdhUX69X/s1600/Aplikasi+android-terwujud.jpg" alt="Aplikasi" title="Aplikasi android terwujud" />

<input type="radio" name="radio-set" />

 <figcaption><span>Gambar 4</span></figcaption>

<figure>

 <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcNkPlmeHKP6UmD4Y0F-p_hkcSsgpGz0AY1aFvn9EbhN4CHomw3EN4kd5HKYn85wPDbPkDDmmczOvpY293-d6c7mR-EijwpJSHo1RppTEEyee8_PQQUITiacLJP_3nrvsraUKSHkDOvpuF/s1600/popularpost-terwujud.jpg" alt="Terwujud" title="Popular post Terwujud" />

<input type="radio" name="radio-set" />

 <figcaption><span>Gambar 5</span></figcaption></figure>

</figure>

</figure>

</figure>

</figure>

 </div>

6. Save, Publish atau perbaharui Posting Artikel
7. Lihat hasilnya

Keterangan:

• Url: Ganti alamat gambar anda
• Alt: Buat kalimat alternative Gambar anda
• Title: Buat kalimat Judul gambar anda

Demikian artikel tentang Membuat Efek Slide Gambar di Postingan Blog, untuk melihat langsung Gambar yang telah saya paparkan, silahkan anda arahkan dan klik gambar yang telah saya sediakan di atas. Baca juga Cara Desain Gambar dengan Efek Miring di Blog. Semoga Bermanfaat. Terima Kasih!!