CSS3 Efek Gambar Peel Untuk Blogger

Pada artikel ini Tempat Blogging akan menjelaskan bagaimana menambahkan CSS3 Efek Gambar Peel Untuk Blogger. Anda dapat menambahkan widget ini ke sidebar Anda. Jika Anda ingin, Anda dapat menambahkan link ke gambar. Tempat Blogging menggunakan CSS dan HTML untuk widget ini. Anda dapat menggunakan gambar Anda sendiri dengan mengubah link saya sebutkan akhir kode. Anda dapat mengikuti langkah ini untuk menambahkan ke blog Anda.

Demo Widget Slide Show

1. Login ke blogger.com
2. Masuk ke bagian Layout / Design
3. Klik Tambahkan Widget.
4. Pilih HTML/Javascript.
5. Copy Kode dibawah ini dan Pastekan di HTML/Javascript.

<style type="text/css">
a.nowandthen{
position:relative;
display: block;
overflow:hidden;
cursor: pointer;
width: 650px;
height: 434px;
}
a.nowandthen img{
position:absolute;
left:0;
top:0;
width: 100%;
height: 100%;
-moz-transition: all 0.4s ease;
-webkit-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
transition: all 0.4s ease;
z-index: 2;
clip: rect(0,650px,434px,0);
}
a.nowandthen img:nth-of-type(2){
z-index: 1;
}
a.nowandthen:hover img:nth-of-type(1){
clip: rect(0,0,434px,0);
opacity: 0;
}
</style>
<a class="nowandthen" href="http://www.blogger.com/null">
 <img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLc6vHmZSvY2lx_CcHPxVT8HIl7TEp7RRTeSKvjmmOfkbS6vbgEC-vt40mB2HTWbXjrlca6hKTzBLfk6MK0gzrv7WWcJDr2goWGscNGaDxVn0uigA_TliXMFHIFbn6KjOT81KTNCUPXg4/s1600/sunset-sunrise-tblogging+(1).jpg" />
 <img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjueLmPydr_QyRYosFa-012VqJ5MIpUYQ4tjeBjjHxhBZp7scahFSHYI1VXBJWF6P33ZcRe0_TS1rb1JwwAJDoWHIYezLPKo6hIFargOt331F_n1tKOVX_fPG6zI1l_8WapsYKT913aIi8/s1600/sunset-sunrise-tblogging+(2).jpg" />
</a>

     6. Sekarang Anda Save HTML/Javascript.

Sekarang tinggal Anda cek, berhasil apa tidah script.nya.

Share this post