Membuat Efek Gambar Bergeser Artikel Blog

Membuat Efek Gambar Bergeser Artikel Blog - Membuat efek tertentu dalam blog itu sangat menyenangkan, apalagi membuat efek untuk gambar di artikel atau di dalam blog. Selain artikel ini, saya juga sudah banyak membahas tentang efek gambar di blog ini, silahkan di baca artikel lainnya yang berhubungan dengan artikel ini, membuat efek gambar artikel blog bergeser :

Baca juga Membuat efek gambar zoom in

atau Klik Disini untuk lebih lengkapnya

Untuk efek gambar bergeser ini bisa langsung lihat demonya berikut ini. Sorot gambar..

DEMO ▼

566
124
Hallo... Hai... Bisa digeser ya..
Anda bisa meletakkan teks disini
Anda bisa meletakkan link disini
Gambar untuk sementara belum bisa
►

Membuat Efek Gambar Bergeser Artikel Blog

CSS

Salin kode css efek gambar bergeser berikut ini kedalam template blog. Letakkan sebelum kode ]]></b:skin> atau diatas </style>

.view {
    overflow: hidden;
    width: 316px;
 height: 216px;
 margin: 10px;
 float: left;
 position: relative;
 border: 8px solid #fff;
 box-shadow: 1px 1px 2px rgba(0,0,0,0.05);
 background: #333;
 -webkit-perspective: 500px;
 -moz-perspective: 500px;
 -o-perspective: 500px;
 -ms-perspective: 500px;
 perspective: 500px;
}
.view .view-back {
    padding-left:15px;
    color: #aaa;
}
.view div.view-back{
 width: 100%;
 height: 100%;
 position: absolute;
 left: 0;
 background: #666;
 z-index: 0;
}
.view-back span {
 display: block;
 float: left;
 width: 100%;
 text-align: left;
 font-size: 16px;
 color: rgba(255,255,255,0.6);
}
.view-back span:first-child {
 padding-top: 10px;
}
.view-back a {
 display: bock;
 font-size: 18px;
 color: rgba(255,255,255,0.4);
 position: absolute;
 left: 15px;
 bottom: 15px;
 border: 2px solid rgba(255,255,255,0.3);
 border-radius: 50%;
 width: 30px;
 height: 30px;
 line-height: 30px;
 text-align: center;
 font-weight: 700;
}
.view-back a:hover {
 color: #fff;
 border-color: #fff;
}
.view-back span[data-icon]:before {
    content: attr(data-icon);
    font-family: 'icons';
    color: #aaa;
 color: rgba(255,255,255,0.2);
 text-shadow: 0 0 1px rgba(255,255,255,0.2);
 padding: 0px;
}
.view img {
    width: 316px;
    height: 216px;
 position: absolute;
 z-index: 0;
 -webkit-transition: left 500ms ease-in-out;
 -o-transition: left 500ms ease-in-out;
 -moz-transition: left 500ms ease-in-out;
 -ms-transition: left 500ms ease-in-out;
 transition: left 500ms ease-in-out;
}

Simpan Template

Untuk mengganti 'icons', silahkan baca kumpulan icons sederhana

JavaScript

Salin kode javascript berikut sebelum </head>

<script type='text/javascript'>
$(function() {$('.view').hover(function(){$(this).find('img').animate({left:'260px',right:'200px'},{queue:false,duration:500});}, function(){$(this).find('img').animate({left:'0px',right:'0px'},{queue:false,duration:500});});})
</script>

Simpan Template

HTML

Sebagai hasil akhir, salin kode html efek gambar bergeser berikut ini kedalam artikel blog atau di bagian manapun selama tetap didalam blog :)

<div id="grid" class="view">
<div class="view-back">
<span data-icon="&hearts;">566</span>
<span data-icon="&#9658;">124</span>
Hallo... Hai... Bisa digeser ya..
Anda bisa meletakkan teks disini
Anda bisa meletakkan link disini
Gambar untuk sementara belum bisa
<a href="http://www.panduantemplateblog.com/2014/01/membuat-efek-gambar-bergeser-artikel.html">&#9658;</a>
</div>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgskgRbAETiSDju0aLvr_q3UE6Z4MIWM6FULUs0kBMJbZ39C5JijESJf6a_3h_kiBmPh0h-yMLF8Nm49wys6BrIEUH3nyKpcy1-h1hwXVoyI6EkaR2u5fH3ffLj75sdL8YkQhLETrjOb7A/s1600/template-cloning.png" />
</div>

Keterangan:
Angka 566 dan 124 hanyalah aksesoris saja
Ganti url link http://www.panduantemplateblog.com/2014/01/membuat-efek-gambar-bergeser-artikel.html dengan url link yang lainnya
Ganti url gambar https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgskgRbAETiSDju0aLvr_q3UE6Z4MIWM6FULUs0kBMJbZ39C5JijESJf6a_3h_kiBmPh0h-yMLF8Nm49wys6BrIEUH3nyKpcy1-h1hwXVoyI6EkaR2u5fH3ffLj75sdL8YkQhLETrjOb7A/s1600/template-cloning.png dengan url gambar yang lain

PS:
Dalam membuat efek gambar bergeser di artikel blog ini menggunakan kode css dengan atribut .view . Silahkan ganti atribut tersebut jika didalam blog Anda sudah terdapat kode yang sama karena akan menimbulkan bentrok

Untuk membuat efek gambar yang lainnya atau memasangnya didalam template secara otomatis untuk gambar artikel blog, silahkan gunakan imajinasi Anda untuk membuat hasil kreatif yang lebih sempurna. Terimakasih