Terwujud

Membuat Efek Slide Gambar di Postingan Blog



Jika bermanfaat, Mohon di Share ya !, jika ada unek-unek komen aja
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:


Terwujud.com

Gambar 1


Terwujud

Gambar 2


Google

Gambar 3


Aplikasi

Gambar 4


Terwujud

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!!


Artikelnya sudah di share, makasih ya !

Mau Artikel Gratis! Silahkan Tulis Email Anda.
Print PDF

You Might Also Like:

Previous
Next Post »

Sudah ada 4 komentar

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.

Klik dan Copy Icon di bawah:
:) :( hihi :-) :D =D :-d ;( ;-( @-) :P :o -_- (o) :p :-? (p) :-s (m) 8-) :-t :-b b-( :-# =p~ $-) (y) (f) x-) (k) (h) cheer lol rock angry @@ :ng pin poop :* :v 100

By: Terwujud.com
Terima Kasih!!

Copyright © 2014 Terwujud.com - All Rights Reserved