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 :

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..
sobat bisa meletakkan teks disini
sobat 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..
sobat bisa meletakkan teks disini
sobat bisa meletakkan link disini
Gambar untuk sementara belum bisa
<a href="http://www.all-trick-blogs.com/2016/01/membuat-efek-gambar-bergeser-artikel.html">&#9658;</a>
</div>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeR8Z3oqQWdriNKmmftYS26plevFys4YQu4FEPjZD1c5C1us-6MAf1c4H-a9cdL_IfsHLwMAT9LcJxMPwpP7gMe2LdFlN9KL64C1kchyphenhyphennHn87oN-pSMn9WiHeSzYtD_EDbfGZW127CFnU/s1600/template-cloning.png" />
</div>

Keterangan:
Angka 566 dan 124 hanyalah aksesoris saja
Ganti url link http://www.all-trick-blogs.com/2016/01/membuat-efek-gambar-bergeser-artikel.html dengan url link yang lainnya
Ganti url gambar https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeR8Z3oqQWdriNKmmftYS26plevFys4YQu4FEPjZD1c5C1us-6MAf1c4H-a9cdL_IfsHLwMAT9LcJxMPwpP7gMe2LdFlN9KL64C1kchyphenhyphennHn87oN-pSMn9WiHeSzYtD_EDbfGZW127CFnU/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 sobat 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 sobat untuk membuat hasil kreatif yang lebih sempurna. Terimakasih