Terwujud
KomTer,Komik Online
Smartphone Mainbitcoin

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:


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="http://4.bp.blogspot.com/-POv5WCbdKpM/UwYMj7iuO7I/AAAAAAAAAXg/jGNMNOvdqys/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="http://1.bp.blogspot.com/-BYe2UQtOjQI/UuCKiZtbusI/AAAAAAAAACo/207rZjhCP_Y/s1600/terwujud.jpg" alt="Terwujud" title="Terwujud.com" />
<input type="radio" name="radio-set" />
 <figcaption><span>Gambar 2</span></figcaption>
<figure>
 <img src="http://3.bp.blogspot.com/-BYkjmz0Y3Dg/UuU65frpG9I/AAAAAAAAAFc/hxTmQ5VSJwY/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="http://1.bp.blogspot.com/-WAFW8F9ulxA/UvCPboA8HHI/AAAAAAAAAKE/k2qAFFLxVCk/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="http://2.bp.blogspot.com/-rvMhsP7DF88/UwdU6TwhxZI/AAAAAAAAAZY/tCoWypbCOmU/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!!

Mau Artikel Gratis! Silahkan Tulis Email Anda.
Print PDF
Next
« Prev Post
Previous
Next Post »

4 komentar

PERTAMAX.... artikel yang bagus

Balas

Terima kasih mas Pertamax, dah diamankan kan pertamax nya :D

Balas

TERIMA KASIH BAN SANGAT MEMBANTU

Balas

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.

Icon:
:) ^_^ :D =D (smile dan tertawa)
:( =( (marah dan Bingung)
:-bd :-d (oke)
|o| (tepuk tangan)

By: Terwujud.com
Terima Kasih!!

Copyright © 2014. Terwujud.com | Sumber Informasi Terpercaya - All Rights Reserved | Template Created by Kompi Ajaib | Modified by Ibrahim Lubis